From c9baae2c09679c625baad937692ddfbb998a9782 Mon Sep 17 00:00:00 2001
From: Advait Jayant <advaitjk@gmail.com>
Date: Thu, 14 May 2026 19:04:47 +0100
Subject: [PATCH 1/3] Align explorer with OpenGradient brand

---
 configs/app/features/growthBook.ts            |   2 +-
 configs/app/ui.ts                             |   2 +-
 lib/hooks/useNavItems.tsx                     |   4 -
 nextjs/csp/policies/app.ts                    |   1 +
 nextjs/headers.js                             |   2 +-
 pages/_document.tsx                           |   8 +-
 toolkit/chakra/input-group.tsx                |   4 +-
 toolkit/chakra/table.tsx                      |  15 +-
 .../AdaptiveTabs/AdaptiveTabsList.tsx         |   3 +-
 toolkit/theme/foundations/animations.ts       |   4 +
 toolkit/theme/foundations/colors.ts           |  56 +-
 toolkit/theme/foundations/semanticTokens.ts   |  74 +--
 toolkit/theme/foundations/typography.ts       |  11 +-
 toolkit/theme/globalCss.ts                    |   7 +-
 toolkit/theme/recipes/table.recipe.ts         |  15 +-
 ui/blocks/BlocksContent.tsx                   |  11 +-
 ui/blocks/BlocksTabSlot.tsx                   |   5 +-
 ui/gasTracker/GasTrackerChart.tsx             | 139 ++--
 .../GasTrackerNetworkUtilization.tsx          |  23 +-
 ui/gasTracker/GasTrackerPriceSnippet.tsx      | 118 +++-
 ui/gasTracker/GasTrackerPrices.tsx            |  13 +-
 ui/home/HeroBanner.tsx                        | 488 ++++++---------
 ui/home/LatestBlocks.tsx                      |  59 +-
 ui/home/LatestBlocksItem.tsx                  | 301 ++++-----
 ui/home/LatestTxs.tsx                         | 134 ++--
 ui/home/LatestTxsItem.tsx                     | 303 ++++-----
 ui/home/LatestTxsItemMobile.tsx               |  55 +-
 ui/home/Stats.tsx                             |  45 +-
 ui/home/Transactions.tsx                      |  10 +-
 ui/home/brand.ts                              |  30 +
 .../indicators/ChainIndicatorChartContent.tsx |  13 +-
 ui/home/indicators/ChainIndicators.tsx        | 125 ++--
 ui/home/indicators/useChartDataQuery.tsx      |  20 +-
 ui/home/utils/isStatsMicroserviceEnabled.ts   |  11 +
 ui/opengradient/brand.ts                      |   1 +
 .../teeRegistry/TEENodeDetailDrawer.tsx       | 111 ++--
 ui/opengradient/teeRegistry/TEENodesTable.tsx | 302 +++++----
 ui/opengradient/teeRegistry/TEETypeCard.tsx   | 143 +++--
 ui/pages/Accounts.tsx                         |  18 +-
 ui/pages/Blocks.tsx                           |  15 +-
 ui/pages/GasTracker.tsx                       |   8 +-
 ui/pages/Home.tsx                             |  28 +-
 ui/pages/InternalTxs.tsx                      |  15 +-
 ui/pages/Transactions.tsx                     |  14 +-
 ui/pages/VerifiedContracts.tsx                |  15 +-
 ui/pages/opengradient/TEERegistry.tsx         | 591 ++++++++----------
 ui/shared/ActionBar.tsx                       |   6 +-
 ui/shared/Page/ExplorerPageSurface.tsx        |  26 +
 ui/shared/Page/ExplorerPageTitle.tsx          |  62 ++
 ui/shared/Page/PageTitle.tsx                  |  16 +-
 ui/shared/chart/ChartArea.tsx                 |   3 +-
 ui/shared/chart/ChartWatermarkIcon.tsx        |  19 +-
 ui/shared/chart/ChartWidget.tsx               |   8 +-
 ui/shared/layout/LayoutApp.tsx                |   2 +
 ui/shared/layout/LayoutHome.tsx               |   2 +
 ui/shared/layout/components/Container.tsx     |   5 +-
 ui/shared/stats/StatsWidget.tsx               |  20 +-
 ui/snippets/colorMode/ColorModeToggle.tsx     | 101 +++
 ui/snippets/header/HeaderDesktop.tsx          |  21 +-
 ui/snippets/header/HeaderMobile.tsx           |   2 +
 .../navigation/useNavLinkStyleProps.tsx       |   4 +-
 ui/snippets/navigation/vertical/NavLink.tsx   |  21 +-
 .../navigation/vertical/NavLinkGroup.tsx      |  39 +-
 .../navigation/vertical/NavigationDesktop.tsx |  23 +-
 ui/snippets/searchBar/SearchBarInput.tsx      |  67 +-
 ui/txs/TxsContent.tsx                         |   9 +-
 66 files changed, 2027 insertions(+), 1801 deletions(-)
 create mode 100644 ui/home/brand.ts
 create mode 100644 ui/home/utils/isStatsMicroserviceEnabled.ts
 create mode 100644 ui/opengradient/brand.ts
 create mode 100644 ui/shared/Page/ExplorerPageSurface.tsx
 create mode 100644 ui/shared/Page/ExplorerPageTitle.tsx
 create mode 100644 ui/snippets/colorMode/ColorModeToggle.tsx

diff --git a/configs/app/features/growthBook.ts b/configs/app/features/growthBook.ts
index af672c5ac9..651e628ca6 100644
--- a/configs/app/features/growthBook.ts
+++ b/configs/app/features/growthBook.ts
@@ -7,7 +7,7 @@ const clientKey = getEnvValue('NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY');
 const title = 'GrowthBook feature flagging and A/B testing';
 
 const config: Feature<{ clientKey: string }> = (() => {
-  if (clientKey) {
+  if (clientKey && clientKey !== 'xxx') {
     return Object.freeze({
       title,
       isEnabled: true,
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
index 674580d944..b2eba474e3 100644
--- a/configs/app/ui.ts
+++ b/configs/app/ui.ts
@@ -49,7 +49,7 @@ const highlightedRoutes = (() => {
 
 const defaultColorTheme = (() => {
   const envValue = getEnvValue('NEXT_PUBLIC_COLOR_THEME_DEFAULT') as ColorThemeId | undefined;
-  return COLOR_THEMES.find((theme) => theme.id === envValue);
+  return COLOR_THEMES.find((theme) => theme.id === envValue) ?? COLOR_THEMES.find((theme) => theme.id === 'light');
 })();
 
 const UI = Object.freeze({
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
index 7f6ac5e01b..0d7238664a 100644
--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -300,10 +300,6 @@ export default function useNavItems(): ReturnType {
         url: 'https://hub.opengradient.ai',
         icon: 'apps',
       },
-      {
-        text: 'Testnet V1 Explorer',
-        url: 'https://testnetv1.opengradient.ai',
-      },
     ].filter(Boolean);
 
     const accountNavItems: ReturnType['accountNavItems'] = [
diff --git a/nextjs/csp/policies/app.ts b/nextjs/csp/policies/app.ts
index e445281572..ae0c3ecbd0 100644
--- a/nextjs/csp/policies/app.ts
+++ b/nextjs/csp/policies/app.ts
@@ -115,6 +115,7 @@ export function app(): CspDev.DirectiveDescriptor {
     ],
 
     'font-src': [
+      KEY_WORDS.SELF,
       KEY_WORDS.DATA,
       ...MAIN_DOMAINS,
       ...(externalFontsDomains || []),
diff --git a/nextjs/headers.js b/nextjs/headers.js
index c38f294879..1d35384404 100644
--- a/nextjs/headers.js
+++ b/nextjs/headers.js
@@ -22,7 +22,7 @@ async function headers() {
         },
         {
           key: 'Cross-Origin-Opener-Policy',
-          value: 'same-origin',
+          value: 'same-origin-allow-popups',
         },
         {
           key: 'Referrer-Policy',
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 61ee1a3284..c3ca6875e2 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -34,17 +34,19 @@ class MyDocument extends Document {
         <Head>
           { /* FONTS */ }
           <link
-            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap' }
+            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap' }
             rel="stylesheet"
           />
           <link
-            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' }
+            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap' }
             rel="stylesheet"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
+          <link rel="preconnect" href="https://fonts.googleapis.com"/>
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
 
           { /* eslint-disable-next-line @next/next/no-sync-scripts */ }
           <script src="/assets/envs.js"/>
diff --git a/toolkit/chakra/input-group.tsx b/toolkit/chakra/input-group.tsx
index 7f493ade9e..e835fd3d64 100644
--- a/toolkit/chakra/input-group.tsx
+++ b/toolkit/chakra/input-group.tsx
@@ -70,8 +70,8 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           return React.cloneElement(child, {
             ...(startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${ inlinePaddings.start }px` : undefined) }),
             ...(endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${ inlinePaddings.end }px` : undefined) }),
-            // hide input value and placeholder for the first render
-            value: inlinePaddings ? child.props.value : undefined,
+            // keep value controlled while hiding text until paddings are measured
+            value: inlinePaddings ? child.props.value : '',
             placeholder: inlinePaddings ? child.props.placeholder : undefined,
           });
         }) }
diff --git a/toolkit/chakra/table.tsx b/toolkit/chakra/table.tsx
index c970792347..a5f95581bd 100644
--- a/toolkit/chakra/table.tsx
+++ b/toolkit/chakra/table.tsx
@@ -95,12 +95,21 @@ export const TableHeaderSticky = (props: TableHeaderProps) => {
     };
   }, [ handleScroll ]);
 
+  const stickyTop = (() => {
+    if (!isStuck) {
+      return undefined;
+    }
+
+    return top ? `${ top }px` : 0;
+  })();
+
   return (
     <TableHeader
       ref={ ref }
-      position="sticky"
-      top={ top ? `${ top }px` : 0 }
-      backgroundColor={{ _light: 'white', _dark: 'black' }}
+      position={ isStuck ? 'sticky' : 'static' }
+      top={ stickyTop }
+      backgroundColor={{ _light: 'rgba(244, 252, 254, 0.96)', _dark: 'rgba(10, 15, 25, 0.96)' }}
+      backdropFilter="blur(16px)"
       boxShadow={ isStuck ? 'action_bar' : 'none' }
       zIndex="1"
       { ...rest }
diff --git a/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx b/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
index 27a2106d0b..d4f33ab892 100644
--- a/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
+++ b/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
@@ -91,7 +91,8 @@ const AdaptiveTabsList = (props: Props) => {
       flexWrap="nowrap"
       alignItems="center"
       whiteSpace="nowrap"
-      bgColor={{ _light: 'white', _dark: 'black' }}
+      bgColor={{ _light: 'rgba(244, 252, 254, 0.94)', _dark: 'rgba(10, 15, 25, 0.94)' }}
+      backdropFilter="blur(16px)"
       // initially our cut is 0 and we don't want to show the list
       // but we want to keep all items in the tabs row so it won't collapse
       // that's why we only change opacity but not the position itself
diff --git a/toolkit/theme/foundations/animations.ts b/toolkit/theme/foundations/animations.ts
index 1764e175af..eac59ef696 100644
--- a/toolkit/theme/foundations/animations.ts
+++ b/toolkit/theme/foundations/animations.ts
@@ -17,4 +17,8 @@ export const keyframes = {
     '0%, 100%': { opacity: 1 },
     '50%': { opacity: 0.7 },
   },
+  signalScan: {
+    from: { backgroundPosition: '0 0, 0 0, 0 0' },
+    to: { backgroundPosition: '120px 0, 0 120px, 160px 160px' },
+  },
 };
diff --git a/toolkit/theme/foundations/colors.ts b/toolkit/theme/foundations/colors.ts
index a957d1c37c..86354b5716 100644
--- a/toolkit/theme/foundations/colors.ts
+++ b/toolkit/theme/foundations/colors.ts
@@ -11,17 +11,32 @@ const colors = {
     '800': { value: '#22543D' },
     '900': { value: '#1C4532' },
   },
+  // OpenGradient brand cyan reused as "blue" — Blockscout uses blue.* for many UI accents
   blue: {
-    '50': { value: '#EBF8FF' },
-    '100': { value: '#BEE3F8' },
-    '200': { value: '#90CDF4' },
-    '300': { value: '#63B3ED' },
-    '400': { value: '#4299E1' },
-    '500': { value: '#3182CE' },
-    '600': { value: '#2B6CB0' },
-    '700': { value: '#2C5282' },
-    '800': { value: '#2A4365' },
-    '900': { value: '#1A365D' },
+    '50': { value: '#f4fcfe' },
+    '100': { value: '#e9f8fc' },
+    '200': { value: '#bdebf7' },
+    '300': { value: '#a7e4f4' },
+    '400': { value: '#50c9e9' },
+    '500': { value: '#24bce3' },
+    '600': { value: '#1d96b6' },
+    '700': { value: '#167188' },
+    '800': { value: '#0e4b5b' },
+    '900': { value: '#041317' },
+  },
+  // OpenGradient brand secondary — nautical blue-gray (registered as a new palette)
+  navy: {
+    '50': { value: '#dde2ec' },
+    '100': { value: '#bfc8dc' },
+    '200': { value: '#9ba9c4' },
+    '300': { value: '#7889ad' },
+    '400': { value: '#546a95' },
+    '500': { value: '#314a7d' },
+    '600': { value: '#273b64' },
+    '700': { value: '#1d2c4b' },
+    '800': { value: '#141e32' },
+    '900': { value: '#0f1626' },
+    '950': { value: '#0a0f19' },
   },
   red: {
     '50': { value: '#FFF5F5' },
@@ -83,17 +98,18 @@ const colors = {
     '800': { value: '#234E52' },
     '900': { value: '#1D4044' },
   },
+  // OpenGradient brand cyan (formerly Chakra "cyan")
   cyan: {
-    '50': { value: '#EDFDFD' },
-    '100': { value: '#C4F1F9' },
-    '200': { value: '#9DECF9' },
-    '300': { value: '#76E4F7' },
-    '400': { value: '#0BC5EA' },
-    '500': { value: '#00B5D8' },
-    '600': { value: '#00A3C4' },
-    '700': { value: '#0987A0' },
-    '800': { value: '#086F83' },
-    '900': { value: '#065666' },
+    '50': { value: '#f4fcfe' },
+    '100': { value: '#e9f8fc' },
+    '200': { value: '#bdebf7' },
+    '300': { value: '#a7e4f4' },
+    '400': { value: '#50c9e9' },
+    '500': { value: '#24bce3' },
+    '600': { value: '#1d96b6' },
+    '700': { value: '#167188' },
+    '800': { value: '#0e4b5b' },
+    '900': { value: '#041317' },
   },
   purple: {
     '50': { value: '#FAF5FF' },
diff --git a/toolkit/theme/foundations/semanticTokens.ts b/toolkit/theme/foundations/semanticTokens.ts
index 33cf8a5cb0..8e697728ee 100644
--- a/toolkit/theme/foundations/semanticTokens.ts
+++ b/toolkit/theme/foundations/semanticTokens.ts
@@ -162,8 +162,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     popover: {
       DEFAULT: {
-        bg: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
-        shadow: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.300}' } },
+        bg: { value: { _light: '#fcfdfe', _dark: '#0f1626' } },
+        shadow: { value: { _light: 'rgba(36, 188, 227, 0.25)', _dark: 'rgba(36, 188, 227, 0.35)' } },
       },
     },
     progressCircle: {
@@ -180,31 +180,31 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     tabs: {
       solid: {
         fg: {
-          DEFAULT: { value: { _light: '{colors.blue.700}', _dark: '{colors.blue.100}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
+          DEFAULT: { value: { _light: '#314a7d', _dark: 'rgba(189, 235, 247, 0.66)' } },
+          selected: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
         },
         bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
+          selected: { value: { _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' } },
         },
       },
       secondary: {
         fg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+          DEFAULT: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
         },
         bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
+          selected: { value: { _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' } },
         },
         border: {
-          DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
+          DEFAULT: { value: { _light: 'rgba(36, 188, 227, 0.22)', _dark: 'rgba(189, 235, 247, 0.16)' } },
         },
       },
       segmented: {
         fg: {
-          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
+          DEFAULT: { value: { _light: '#1d96b6', _dark: '#50c9e9' } },
+          selected: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
         },
         border: {
-          DEFAULT: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+          DEFAULT: { value: { _light: 'rgba(36, 188, 227, 0.18)', _dark: 'rgba(36, 188, 227, 0.18)' } },
         },
       },
     },
@@ -244,23 +244,23 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     input: {
       fg: {
-        DEFAULT: { value: { _light: '{colors.gray.800}', _dark: '{colors.gray.50}' } },
+        DEFAULT: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
         error: { value: '{colors.text.error}' },
       },
       bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-        readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
+        DEFAULT: { value: { _light: '#ffffff', _dark: 'rgba(15, 22, 38, 0.6)' } },
+        readOnly: { value: { _light: '#e9f8fc', _dark: 'rgba(15, 22, 38, 0.4)' } },
       },
       border: {
-        DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
-        hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
-        focus: { value: '{colors.blue.400}' },
-        filled: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
-        readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
+        DEFAULT: { value: { _light: 'rgba(36, 188, 227, 0.18)', _dark: 'rgba(36, 188, 227, 0.18)' } },
+        hover: { value: { _light: 'rgba(36, 188, 227, 0.45)', _dark: 'rgba(36, 188, 227, 0.45)' } },
+        focus: { value: '#24bce3' },
+        filled: { value: { _light: 'rgba(36, 188, 227, 0.25)', _dark: 'rgba(36, 188, 227, 0.22)' } },
+        readOnly: { value: { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.12)' } },
         error: { value: '{colors.red.500}' },
       },
       placeholder: {
-        DEFAULT: { value: '{colors.gray.500}' },
+        DEFAULT: { value: { _light: 'rgba(14, 75, 91, 0.4)', _dark: 'rgba(189, 235, 247, 0.35)' } },
         error: { value: '{colors.red.500}' },
       },
     },
@@ -273,26 +273,26 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     dialog: {
       bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
+        DEFAULT: { value: { _light: '#fcfdfe', _dark: '#0f1626' } },
       },
       fg: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        DEFAULT: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
       },
     },
     drawer: {
       bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
+        DEFAULT: { value: { _light: '#fcfdfe', _dark: '#0f1626' } },
       },
     },
     select: {
       trigger: {
         outline: {
-          fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+          fg: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
         },
       },
       item: {
         bg: {
-          highlighted: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
+          highlighted: { value: { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.10)' } },
         },
       },
       indicator: {
@@ -310,7 +310,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     menu: {
       item: {
         bg: {
-          highlighted: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
+          highlighted: { value: { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.12)' } },
         },
       },
     },
@@ -333,12 +333,12 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         fg: { value: { _light: '{colors.red.500}', _dark: '{colors.red.200}' } },
       },
       purple: {
-        bg: { value: { _light: '{colors.purple.50}', _dark: '{colors.purple.800}' } },
-        fg: { value: { _light: '{colors.purple.500}', _dark: '{colors.purple.100}' } },
+        bg: { value: { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.15)' } },
+        fg: { value: { _light: '#1d96b6', _dark: '#50c9e9' } },
       },
       purple_alt: {
-        bg: { value: { _light: '{colors.purple.100}', _dark: '{colors.purple.800}' } },
-        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        bg: { value: { _light: 'rgba(36, 188, 227, 0.14)', _dark: 'rgba(36, 188, 227, 0.18)' } },
+        fg: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
       },
       orange: {
         bg: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800}' } },
@@ -389,8 +389,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     table: {
       header: {
-        bg: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.200}' } },
-        fg: { value: { _light: '{colors.blackAlpha.700}', _dark: '{colors.whiteAlpha.700}' } },
+        bg: { value: { _light: 'rgba(233, 248, 252, 0.78)', _dark: 'rgba(36, 188, 227, 0.08)' } },
+        fg: { value: { _light: '#314a7d', _dark: 'rgba(189, 235, 247, 0.72)' } },
       },
     },
     checkbox: {
@@ -422,15 +422,15 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       highlighted: { value: '{colors.yellow.400}' },
     },
     heading: {
-      DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+      DEFAULT: { value: { _light: '#0e4b5b', _dark: '#bdebf7' } },
     },
     text: {
-      primary: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      secondary: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.400}' } },
+      primary: { value: { _light: '#0e4b5b', _dark: 'rgba(189, 235, 247, 0.92)' } },
+      secondary: { value: { _light: '#314a7d', _dark: 'rgba(189, 235, 247, 0.55)' } },
       error: { value: '{colors.red.500}' },
     },
     border: {
-      divider: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.100}' } },
+      divider: { value: { _light: 'rgba(36, 188, 227, 0.14)', _dark: 'rgba(189, 235, 247, 0.10)' } },
       error: { value: '{colors.red.500}' },
     },
     icon: {
@@ -446,7 +446,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     global: {
       body: {
-        bg: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
+        bg: { value: { _light: '#f4fcfe', _dark: '#0a0f19' } },
         fg: { value: '{colors.text.primary}' },
       },
       mark: {
diff --git a/toolkit/theme/foundations/typography.ts b/toolkit/theme/foundations/typography.ts
index 8d859e7540..acc1203ee4 100644
--- a/toolkit/theme/foundations/typography.ts
+++ b/toolkit/theme/foundations/typography.ts
@@ -4,12 +4,13 @@ import type { ExcludeUndefined } from 'types/utils';
 
 import config from 'configs/app';
 
-export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
-export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Poppins';
+export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Geist';
+export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Geist';
 
 export const fonts: ExcludeUndefined<ThemingConfig['tokens']>['fonts'] = {
-  heading: { value: `${ HEADING_TYPEFACE }, sans-serif` },
-  body: { value: `${ BODY_TYPEFACE }, sans-serif` },
+  heading: { value: `${ HEADING_TYPEFACE }, system-ui, -apple-system, sans-serif` },
+  body: { value: `${ BODY_TYPEFACE }, system-ui, -apple-system, sans-serif` },
+  mono: { value: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' },
 };
 
 export const textStyles: ThemingConfig['textStyles'] = {
@@ -19,7 +20,7 @@ export const textStyles: ThemingConfig['textStyles'] = {
         fontSize: '32px',
         lineHeight: '40px',
         fontWeight: '500',
-        letterSpacing: '-0.5px',
+        letterSpacing: '0',
         fontFamily: 'heading',
       },
     },
diff --git a/toolkit/theme/globalCss.ts b/toolkit/theme/globalCss.ts
index 5dec641b57..b3322c8f4d 100644
--- a/toolkit/theme/globalCss.ts
+++ b/toolkit/theme/globalCss.ts
@@ -6,7 +6,7 @@ import scrollbar from './globals/scrollbar';
 
 const webkitAutofillOverrides = {
   WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
-  '-webkit-box-shadow': '0 0 0px 1000px var(--chakra-colors-input-bg) inset',
+  WebkitBoxShadow: '0 0 0px 1000px var(--chakra-colors-input-bg) inset',
   transition: 'background-color 5000s ease-in-out 0s',
 };
 
@@ -20,10 +20,15 @@ const globalCss: SystemConfig['globalCss'] = {
   body: {
     bg: 'global.body.bg',
     color: 'global.body.fg',
+    fontFamily: 'body',
     WebkitTapHighlightColor: 'transparent',
     fontVariantLigatures: 'no-contextual',
     focusRingStyle: 'hidden',
   },
+  '::selection': {
+    bg: 'blue.200',
+    color: 'blue.900',
+  },
   mark: {
     bg: 'global.mark.bg',
     color: 'inherit',
diff --git a/toolkit/theme/recipes/table.recipe.ts b/toolkit/theme/recipes/table.recipe.ts
index 89511ce483..1da6c91ad3 100644
--- a/toolkit/theme/recipes/table.recipe.ts
+++ b/toolkit/theme/recipes/table.recipe.ts
@@ -12,16 +12,22 @@ export const recipe = defineSlotRecipe({
       textAlign: 'start',
       verticalAlign: 'top',
       overflow: 'unset',
+      bg: 'transparent',
     },
     cell: {
       textAlign: 'start',
       alignItems: 'center',
       verticalAlign: 'top',
       fontWeight: 'medium',
+      color: 'text.primary',
     },
     columnHeader: {
-      fontWeight: 'medium',
+      fontFamily: 'mono',
+      fontSize: 'xs',
+      fontWeight: '700',
+      letterSpacing: '0',
       textAlign: 'start',
+      textTransform: 'uppercase',
     },
   },
 
@@ -43,7 +49,12 @@ export const recipe = defineSlotRecipe({
           borderColor: 'border.divider',
         },
         row: {
-          bg: 'bg',
+          bg: 'transparent',
+          transitionProperty: 'background-color,color',
+          transitionDuration: 'fast',
+          _hover: {
+            bg: { _light: 'rgba(36, 188, 227, 0.045)', _dark: 'rgba(36, 188, 227, 0.055)' },
+          },
         },
       },
     },
diff --git a/ui/blocks/BlocksContent.tsx b/ui/blocks/BlocksContent.tsx
index d71fffd66d..8f684b4e5a 100644
--- a/ui/blocks/BlocksContent.tsx
+++ b/ui/blocks/BlocksContent.tsx
@@ -17,12 +17,13 @@ import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import IconSvg from 'ui/shared/IconSvg';
+import ExplorerPageSurface from 'ui/shared/Page/ExplorerPageSurface';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 const OVERLOAD_COUNT = 75;
-const TABS_HEIGHT = 88;
+const TABS_HEIGHT = 68;
 
 interface Props {
   type?: BlockType;
@@ -114,7 +115,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   ) : null;
 
   const actionBar = isMobile ? (
-    <ActionBar mt={ -6 }>
+    <ActionBar>
       <Link href={ route({ pathname: '/block/countdown' }) }>
         <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
         <span>Block countdown</span>
@@ -130,7 +131,11 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
       emptyText="There are no blocks."
       actionBar={ actionBar }
     >
-      { content }
+      { content && (
+        <ExplorerPageSurface overflowX="auto">
+          { content }
+        </ExplorerPageSurface>
+      ) }
     </DataListDisplay>
   );
 };
diff --git a/ui/blocks/BlocksTabSlot.tsx b/ui/blocks/BlocksTabSlot.tsx
index 55d9c75fec..1d856e6426 100644
--- a/ui/blocks/BlocksTabSlot.tsx
+++ b/ui/blocks/BlocksTabSlot.tsx
@@ -10,6 +10,7 @@ import { nbsp } from 'lib/html-entities';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 
@@ -28,10 +29,10 @@ const BlocksTabSlot = ({ pagination }: Props) => {
     <Flex alignItems="center" columnGap={ 8 } display={{ base: 'none', lg: 'flex' }}>
       { statsQuery.data?.network_utilization_percentage !== undefined && (
         <Box>
-          <Text as="span" fontSize="sm">
+          <Text as="span" color={ OPENGRADIENT_BRAND.text.secondary } fontSize="sm">
             Network utilization (last 50 blocks):{ nbsp }
           </Text>
-          <Skeleton display="inline-block" fontSize="sm" color="blue.400" fontWeight={ 600 } loading={ statsQuery.isPlaceholderData }>
+          <Skeleton display="inline-block" fontSize="sm" color={ OPENGRADIENT_BRAND.text.accent } fontWeight={ 600 } loading={ statsQuery.isPlaceholderData }>
             <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
           </Skeleton>
         </Box>
diff --git a/ui/gasTracker/GasTrackerChart.tsx b/ui/gasTracker/GasTrackerChart.tsx
index f3f4d6357f..990d5914d3 100644
--- a/ui/gasTracker/GasTrackerChart.tsx
+++ b/ui/gasTracker/GasTrackerChart.tsx
@@ -1,67 +1,124 @@
 import { Box, Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { Resolution } from '@blockscout/stats-types';
+import type { Block, BlocksResponse } from 'types/api/block';
+import type { TimeChartItem } from 'ui/shared/chart/types';
+
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import { STATS_CHARTS } from 'stubs/stats';
 import { Link } from 'toolkit/chakra/link';
-import ContentLoader from 'ui/shared/ContentLoader';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import ChartWidgetContainer from 'ui/stats/ChartWidgetContainer';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
+import ChartWidget from 'ui/shared/chart/ChartWidget';
+import useChartQuery from 'ui/shared/chart/useChartQuery';
 
 const GAS_PRICE_CHART_ID = 'averageGasPrice';
+const DEFAULT_GAS_PRICE_CHART = {
+  title: 'Average gas price',
+  description: 'Average gas price for the period',
+  units: 'Gwei',
+};
+const RECENT_BLOCK_GAS_CHART = {
+  title: 'Recent block gas price',
+  description: 'Base fee per gas from latest blocks',
+  units: 'Gwei',
+};
+const RECENT_BLOCK_USAGE_CHART = {
+  title: 'Recent block utilization',
+  description: 'Gas used across latest blocks',
+  units: '%',
+};
+const BLOCKS_PLACEHOLDER: BlocksResponse = {
+  items: [],
+  next_page_params: null,
+};
 
 const GasTrackerChart = () => {
-  const [ isChartLoadingError, setChartLoadingError ] = React.useState(false);
-  const { data, isPlaceholderData, isError } = useApiQuery('stats_lines', {
+  const { items: statsItems, lineQuery } = useChartQuery(GAS_PRICE_CHART_ID, Resolution.DAY, 'oneMonth');
+  const shouldUseRecentBlocks = lineQuery.isError || (!lineQuery.isPlaceholderData && (!statsItems || statsItems.length < 3));
+
+  const blocksQuery = useApiQuery('blocks', {
     queryOptions: {
-      placeholderData: STATS_CHARTS,
+      enabled: shouldUseRecentBlocks,
+      placeholderData: BLOCKS_PLACEHOLDER,
     },
   });
 
-  const handleLoadingError = React.useCallback(() => {
-    setChartLoadingError(true);
-  }, []);
-
-  const content = (() => {
-    if (isPlaceholderData) {
-      return <ContentLoader/>;
-    }
-
-    if (isChartLoadingError || isError) {
-      return <DataFetchAlert/>;
-    }
-
-    const chart = data?.sections.map((section) => section.charts.find((chart) => chart.id === GAS_PRICE_CHART_ID)).filter(Boolean)?.[0];
-
-    if (!chart) {
-      return <DataFetchAlert/>;
-    }
-
-    return (
-      <ChartWidgetContainer
-        id={ GAS_PRICE_CHART_ID }
-        title={ chart.title }
-        description={ chart.description }
-        interval="oneMonth"
-        units={ chart.units || undefined }
-        isPlaceholderData={ isPlaceholderData }
-        onLoadingError={ handleLoadingError }
-        h="320px"
-      />
-    );
-  })();
+  const recentBlockFallback = React.useMemo(() => buildRecentBlockFallback(blocksQuery.data?.items), [ blocksQuery.data?.items ]);
+  const chart = shouldUseRecentBlocks ? recentBlockFallback.chart : DEFAULT_GAS_PRICE_CHART;
+  const chartItems = shouldUseRecentBlocks ? recentBlockFallback.items : statsItems;
+  const isLoading = lineQuery.isPlaceholderData || (shouldUseRecentBlocks && blocksQuery.isPlaceholderData);
+  const isError = shouldUseRecentBlocks && blocksQuery.isError;
 
   return (
     <Box>
       <Flex justifyContent="space-between" alignItems="center" mb={ 6 }>
-        <chakra.h3 textStyle="h3">Gas price history</chakra.h3>
+        <chakra.h3 color={ OPENGRADIENT_BRAND.text.primary } textStyle="h3">Gas activity</chakra.h3>
         <Link href={ route({ pathname: '/stats', hash: 'gas' }) }>Charts & stats</Link>
       </Flex>
-      { content }
+      <ChartWidget
+        title={ chart.title }
+        description={ chart.description }
+        units={ chart.units }
+        items={ chartItems }
+        isLoading={ isLoading }
+        isError={ isError }
+        emptyText="No gas price samples yet"
+        h="320px"
+      />
     </Box>
   );
 };
 
 export default React.memo(GasTrackerChart);
+
+function buildRecentBlockFallback(blocks?: Array<Block>): { chart: typeof RECENT_BLOCK_GAS_CHART; items?: Array<TimeChartItem> } {
+  const priceItems = blocksToChartItems(blocks, (block) => Number(block.base_fee_per_gas ?? 0) / 1_000_000_000);
+  const hasGasPriceMovement = Boolean(priceItems?.some((item) => item.value > 0));
+
+  if (hasGasPriceMovement) {
+    return {
+      chart: RECENT_BLOCK_GAS_CHART,
+      items: priceItems,
+    };
+  }
+
+  return {
+    chart: RECENT_BLOCK_USAGE_CHART,
+    items: blocksToChartItems(blocks, getBlockUtilization),
+  };
+}
+
+function blocksToChartItems(blocks: Array<Block> | undefined, getValue: (block: Block) => number): Array<TimeChartItem> | undefined {
+  const items = blocks
+    ?.filter((block) => block.type === 'block')
+    .slice()
+    .reverse()
+    .map((block) => {
+      const value = getValue(block);
+
+      return {
+        date: new Date(block.timestamp),
+        date_to: new Date(block.timestamp),
+        value: Number.isFinite(value) ? value : 0,
+      };
+    });
+
+  return items && items.length > 2 ? items : undefined;
+}
+
+function getBlockUtilization(block: Block): number {
+  if (typeof block.gas_used_percentage === 'number') {
+    return block.gas_used_percentage;
+  }
+
+  const gasUsed = Number(block.gas_used ?? 0);
+  const gasLimit = Number(block.gas_limit);
+
+  if (!Number.isFinite(gasUsed) || !Number.isFinite(gasLimit) || gasLimit === 0) {
+    return 0;
+  }
+
+  return (gasUsed / gasLimit) * 100;
+}
diff --git a/ui/gasTracker/GasTrackerNetworkUtilization.tsx b/ui/gasTracker/GasTrackerNetworkUtilization.tsx
index 9a13af35d3..6ef84f5c41 100644
--- a/ui/gasTracker/GasTrackerNetworkUtilization.tsx
+++ b/ui/gasTracker/GasTrackerNetworkUtilization.tsx
@@ -1,8 +1,8 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { mdash } from 'lib/html-entities';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 
 interface Props {
   percentage: number;
@@ -10,29 +10,10 @@ interface Props {
 }
 
 const GasTrackerNetworkUtilization = ({ percentage, isLoading }: Props) => {
-  const load = (() => {
-    if (percentage > 80) {
-      return 'high';
-    }
-
-    if (percentage > 50) {
-      return 'medium';
-    }
-
-    return 'low';
-  })();
-
-  const colors = {
-    high: 'red.600',
-    medium: 'orange.600',
-    low: 'green.600',
-  };
-  const color = colors[load];
-
   return (
     <Skeleton loading={ isLoading } whiteSpace="pre-wrap">
       <span>Network utilization </span>
-      <chakra.span color={ color }>{ percentage.toFixed(2) }% { mdash } { load } load</chakra.span>
+      <chakra.span color={ OPENGRADIENT_BRAND.text.accent }>{ percentage.toFixed(2) }%</chakra.span>
     </Skeleton>
   );
 };
diff --git a/ui/gasTracker/GasTrackerPriceSnippet.tsx b/ui/gasTracker/GasTrackerPriceSnippet.tsx
index 9858a31c6b..74a8b049de 100644
--- a/ui/gasTracker/GasTrackerPriceSnippet.tsx
+++ b/ui/gasTracker/GasTrackerPriceSnippet.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { GasPriceInfo, GasPrices } from 'types/api/stats';
@@ -6,6 +6,7 @@ import type { GasPriceInfo, GasPrices } from 'types/api/stats';
 import { SECOND } from 'lib/consts';
 import { asymp } from 'lib/html-entities';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import GasPrice from 'ui/shared/gas/GasPrice';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
@@ -28,43 +29,114 @@ const ICONS: Record<keyof GasPrices, IconName> = {
 };
 
 const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
-  const bgColors = {
-    fast: 'transparent',
-    average: { _light: 'gray.50', _dark: 'whiteAlpha.200' },
-    slow: { _light: 'gray.50', _dark: 'whiteAlpha.200' },
+  const accentColors = {
+    fast: OPENGRADIENT_BRAND.text.accent,
+    average: { _light: '#24bce3', _dark: '#24bce3' },
+    slow: { _light: 'rgba(29, 150, 182, 0.52)', _dark: 'rgba(189, 235, 247, 0.34)' },
+  };
+  const iconBgColors = {
+    fast: { _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.14)' },
+    average: { _light: 'rgba(36, 188, 227, 0.09)', _dark: 'rgba(36, 188, 227, 0.10)' },
+    slow: { _light: 'rgba(14, 75, 91, 0.06)', _dark: 'rgba(189, 235, 247, 0.07)' },
   };
-  const borderColor = { _light: 'gray.200', _dark: 'whiteAlpha.300' };
 
   return (
     <Box
       as="li"
       listStyleType="none"
-      px={ 9 }
-      py={ 6 }
-      w={{ lg: 'calc(100% / 3)' }}
-      bgColor={ bgColors[type] }
-      _notLast={{
-        borderColor: borderColor,
-        borderRightWidth: { lg: '2px' },
-        borderBottomWidth: { base: '2px', lg: '0' },
+      position="relative"
+      overflow="hidden"
+      px={{ base: 5, lg: 6 }}
+      py={ 5 }
+      bg={ OPENGRADIENT_BRAND.panel.bg }
+      borderColor={ OPENGRADIENT_BRAND.panel.border }
+      borderWidth="1px"
+      borderRadius="8px"
+      boxShadow={ OPENGRADIENT_BRAND.panel.shadow }
+      _before={{
+        content: '""',
+        position: 'absolute',
+        insetInline: 0,
+        top: 0,
+        h: '2px',
+        bg: accentColors[type],
       }}
     >
-      <Skeleton loading={ isLoading } textStyle="heading.lg" w="fit-content">{ TITLES[type] }</Skeleton>
-      <Flex columnGap={ 3 } alignItems="center" mt={ 3 }>
-        <IconSvg name={ ICONS[type] } boxSize={{ base: '30px', xl: 10 }} isLoading={ isLoading } flexShrink={ 0 }/>
+      <Flex alignItems="center" justifyContent="space-between" columnGap={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
+          <chakra.span
+            color={ OPENGRADIENT_BRAND.text.primary }
+            fontFamily="heading"
+            fontSize="lg"
+            fontWeight={ 600 }
+          >
+            { TITLES[type] }
+          </chakra.span>
+        </Skeleton>
+        <Flex
+          boxSize={ 10 }
+          alignItems="center"
+          justifyContent="center"
+          flexShrink={ 0 }
+          borderRadius="8px"
+          bg={ iconBgColors[type] }
+          color={ OPENGRADIENT_BRAND.text.accent }
+        >
+          <IconSvg name={ ICONS[type] } boxSize={ 6 } isLoading={ isLoading }/>
+        </Flex>
+      </Flex>
+
+      <Flex columnGap={ 3 } alignItems="baseline" mt={ 5 }>
         <Skeleton loading={ isLoading }>
-          <GasPrice data={ data } fontSize={{ base: '36px', xl: '48px' }} lineHeight="48px" fontWeight={ 600 } letterSpacing="-1px" fontFamily="heading"/>
+          <GasPrice
+            data={ data }
+            fontSize={{ base: '34px', xl: '42px' }}
+            lineHeight="1.05"
+            fontWeight={ 600 }
+            letterSpacing="0"
+            fontFamily="heading"
+            color={ OPENGRADIENT_BRAND.text.primary }
+          />
         </Skeleton>
       </Flex>
-      <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" mt={ 3 } w="fit-content">
+
+      <Skeleton loading={ isLoading } fontSize="sm" color={ OPENGRADIENT_BRAND.text.secondary } mt={ 3 } w="fit-content">
         { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
         <span> per transaction</span>
         { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
       </Skeleton>
-      <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
-        { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
-        { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
-        { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+
+      <Skeleton loading={ isLoading } mt={ 5 }>
+        <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
+          { typeof data.base_fee === 'number' && (
+            <Box
+              as="span"
+              px={ 3 }
+              py={ 1 }
+              borderRadius="6px"
+              borderWidth="1px"
+              borderColor={ OPENGRADIENT_BRAND.panel.border }
+              color={ OPENGRADIENT_BRAND.text.secondary }
+              fontSize="xs"
+            >
+              Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }
+            </Box>
+          ) }
+          { typeof data.priority_fee === 'number' && (
+            <Box
+              as="span"
+              px={ 3 }
+              py={ 1 }
+              borderRadius="6px"
+              borderWidth="1px"
+              borderColor={ OPENGRADIENT_BRAND.panel.border }
+              color={ OPENGRADIENT_BRAND.text.secondary }
+              fontSize="xs"
+            >
+              Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }
+            </Box>
+          ) }
+        </Flex>
       </Skeleton>
     </Box>
   );
diff --git a/ui/gasTracker/GasTrackerPrices.tsx b/ui/gasTracker/GasTrackerPrices.tsx
index 3c6485654b..3cad62fa23 100644
--- a/ui/gasTracker/GasTrackerPrices.tsx
+++ b/ui/gasTracker/GasTrackerPrices.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { SimpleGrid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { GasPrices } from 'types/api/stats';
@@ -12,18 +12,15 @@ interface Props {
 
 const GasTrackerPrices = ({ prices, isLoading }: Props) => {
   return (
-    <Flex
+    <SimpleGrid
       as="ul"
-      flexDir={{ base: 'column', lg: 'row' }}
-      borderColor={{ _light: 'gray.200', _dark: 'whiteAlpha.300' }}
-      borderWidth="2px"
-      borderRadius="xl"
-      overflow="hidden"
+      columns={{ base: 1, lg: 3 }}
+      gap={ 4 }
     >
       { prices.fast && <GasTrackerPriceSnippet type="fast" data={ prices.fast } isLoading={ isLoading }/> }
       { prices.average && <GasTrackerPriceSnippet type="average" data={ prices.average } isLoading={ isLoading }/> }
       { prices.slow && <GasTrackerPriceSnippet type="slow" data={ prices.slow } isLoading={ isLoading }/> }
-    </Flex>
+    </SimpleGrid>
   );
 };
 
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
index ca5b3fd403..899a1a3cf4 100644
--- a/ui/home/HeroBanner.tsx
+++ b/ui/home/HeroBanner.tsx
@@ -1,39 +1,90 @@
-// we use custom heading size for hero banner
-
 import { Box, Flex, VStack, Text, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
 import { LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
-import IconSvg from 'ui/shared/IconSvg';
+import IconSvg, { type IconName } from 'ui/shared/IconSvg';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 
-export const BACKGROUND_DEFAULT = { _light: 'gray.900', _dark: 'gray.800' };
+import { HOME_BRAND } from './brand';
+import isStatsMicroserviceEnabled from './utils/isStatsMicroserviceEnabled';
 
-const isStatsFeatureEnabled = config.features.stats.isEnabled;
+export const BACKGROUND_DEFAULT = { _light: '#e9f8fc', _dark: '#0a0f19' };
 
-const HeroBanner = () => {
-  const configBackgroundLight = config.UI.homepage.heroBanner?.background?.[0] || config.UI.homepage.plate.background;
-  const configBackgroundDark = config.UI.homepage.heroBanner?.background?.[1] ||
-    config.UI.homepage.heroBanner?.background?.[0] ||
-    config.UI.homepage.plate.background;
+const { colors, fonts, panel, text } = HOME_BRAND;
+
+type MetricCardProps = {
+  href: string;
+  external?: boolean;
+  label: string;
+  iconName: IconName;
+  value: React.ReactNode;
+  loading?: boolean;
+};
 
-  const hasConfigBackground = Boolean(configBackgroundLight);
-  const backgroundValue = hasConfigBackground ?
-    { _light: configBackgroundLight, _dark: configBackgroundDark } :
-    { _light: '#ffffff', _dark: '#0a0a0a' };
+const MetricCard = ({ href, external, label, iconName, value, loading }: MetricCardProps) => {
+  const valueText = (
+    <Text
+      fontSize={{ base: '22px', lg: '28px' }}
+      fontWeight={ 500 }
+      letterSpacing="0"
+      color={ text.primary }
+      fontFamily={ fonts.mono }
+      lineHeight="1"
+    >
+      { value }
+    </Text>
+  );
 
-  // Fetch stats for hero metrics
+  return (
+    <LinkBox
+      p={{ base: 3, lg: 4 }}
+      position="relative"
+      borderRadius="8px"
+      border="1px solid"
+      borderColor={ panel.border }
+      bg={ panel.bg }
+      backdropFilter="blur(12px)"
+      transition="background-color 0.18s ease, border-color 0.18s ease"
+      _hover={{
+        bg: { _light: 'rgba(255, 255, 255, 0.94)', _dark: 'rgba(15, 22, 38, 0.84)' },
+        borderColor: { _light: 'rgba(36, 188, 227, 0.38)', _dark: 'rgba(80, 201, 233, 0.32)' },
+      }}
+    >
+      <LinkOverlay href={ href } external={ external } noIcon/>
+      <Flex alignItems="center" gap={ 1.5 } mb={ 2 }>
+        <Text
+          fontSize="9px"
+          fontWeight={ 500 }
+          letterSpacing="0.08em"
+          textTransform="uppercase"
+          color={ text.accent }
+          fontFamily={ fonts.mono }
+          whiteSpace="nowrap"
+        >
+          { label }
+        </Text>
+        <IconSvg
+          name={ iconName }
+          boxSize={ 3 }
+          color={ text.accent }
+        />
+      </Flex>
+      { loading ? <Skeleton loading w="fit-content">{ valueText }</Skeleton> : valueText }
+    </LinkBox>
+  );
+};
+
+const HeroBanner = () => {
   const statsQuery = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      placeholderData: isStatsFeatureEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
-      enabled: isStatsFeatureEnabled,
+      placeholderData: isStatsMicroserviceEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
+      enabled: isStatsMicroserviceEnabled,
     },
   });
 
@@ -60,8 +111,8 @@ const HeroBanner = () => {
   });
 
   const totalTransactions = React.useMemo(() => {
-    const statsData = statsQuery.data;
-    const apiData = apiQuery.data;
+    const statsData = statsQuery.isPlaceholderData ? undefined : statsQuery.data;
+    const apiData = apiQuery.isPlaceholderData ? undefined : apiQuery.data;
     if (statsData?.total_transactions?.value) {
       return Number(statsData.total_transactions.value);
     }
@@ -69,11 +120,11 @@ const HeroBanner = () => {
       return Number(apiData.total_transactions);
     }
     return null;
-  }, [ statsQuery.data, apiQuery.data ]);
+  }, [ statsQuery.data, statsQuery.isPlaceholderData, apiQuery.data, apiQuery.isPlaceholderData ]);
 
   const totalBlocks = React.useMemo(() => {
-    const statsData = statsQuery.data;
-    const apiData = apiQuery.data;
+    const statsData = statsQuery.isPlaceholderData ? undefined : statsQuery.data;
+    const apiData = apiQuery.isPlaceholderData ? undefined : apiQuery.data;
     if (statsData?.total_blocks?.value) {
       return Number(statsData.total_blocks.value);
     }
@@ -81,7 +132,7 @@ const HeroBanner = () => {
       return Number(apiData.total_blocks);
     }
     return null;
-  }, [ statsQuery.data, apiQuery.data ]);
+  }, [ statsQuery.data, statsQuery.isPlaceholderData, apiQuery.data, apiQuery.isPlaceholderData ]);
 
   const llmBatchSettlementsCount = React.useMemo(() => {
     const countersData = settlementQuery.data;
@@ -93,9 +144,10 @@ const HeroBanner = () => {
     }
     return v1Count + v2Count;
   }, [ settlementQuery.data, settlementQueryV2.data ]);
+  const isSettlementCountLoading = llmBatchSettlementsCount === null && (settlementQuery.isPending || settlementQueryV2.isPending);
 
   const formatNumber = (num: number | null, decimals: number = 2): string => {
-    if (num === null) return '—';
+    if (num === null) return '-';
     if (num >= 1_000_000) return `${ (num / 1_000_000).toFixed(decimals) }M`;
     if (num >= 1_000) return `${ (num / 1_000).toFixed(decimals) }K`;
     return num.toLocaleString();
@@ -106,26 +158,29 @@ const HeroBanner = () => {
       position="relative"
       w="100%"
       overflow="hidden"
-      background={ backgroundValue }
-      border="none"
+      background={{ _light: '#e9f8fc', _dark: '#0a0f19' }}
+      borderBottom="1px solid"
+      borderColor={ panel.border }
       borderRadius="0"
-      borderColor={{ _light: 'rgba(0, 0, 0, 0.06)', _dark: 'rgba(64, 209, 219, 0.1)' }}
       minH={{ base: 'auto', lg: 'auto' }}
     >
-      { /* Subtle grid pattern - very minimal */ }
       <Box
         position="absolute"
-        top={ 0 }
-        left={ 0 }
-        right={ 0 }
-        bottom={ 0 }
-        opacity={{ _light: 0.008, _dark: 0.02 }}
+        inset={ 0 }
+        pointerEvents="none"
+        zIndex={ 0 }
         backgroundImage={{
-          _light: 'repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(0, 0, 0, 0.03) 99px, rgba(0, 0, 0, 0.03) 100px), repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(0, 0, 0, 0.03) 99px, rgba(0, 0, 0, 0.03) 100px)',
-          _dark: 'repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(64, 209, 219, 0.03) 99px, rgba(64, 209, 219, 0.03) 100px), repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(64, 209, 219, 0.03) 99px, rgba(64, 209, 219, 0.03) 100px)',
+          _light: [
+            'linear-gradient(90deg, rgba(14, 75, 91, 0.06) 1px, transparent 1px)',
+            'linear-gradient(0deg, rgba(14, 75, 91, 0.06) 1px, transparent 1px)',
+          ].join(', '),
+          _dark: [
+            'linear-gradient(90deg, rgba(189, 235, 247, 0.04) 1px, transparent 1px)',
+            'linear-gradient(0deg, rgba(189, 235, 247, 0.04) 1px, transparent 1px)',
+          ].join(', '),
         }}
-        backgroundSize="100px 100px"
-        pointerEvents="none"
+        backgroundSize="72px 72px"
+        opacity={{ _light: 0.44, _dark: 0.52 }}
       />
 
       <Box
@@ -134,73 +189,77 @@ const HeroBanner = () => {
         maxW={{ base: '100%', xl: '1600px' }}
         mx="auto"
         px={{ base: 4, lg: 8, xl: 12 }}
-        pt={{ base: 6, lg: 10, xl: 12 }}
-        pb={{ base: 4, lg: 6, xl: 7 }}
+        pt={{ base: 5, lg: 6, xl: 7 }}
+        pb={{ base: 5, lg: 6 }}
       >
-        { /* Large diffuse radial gradient behind entire top section */ }
-        <Box
-          position="absolute"
-          top={{ base: '20px', lg: '40px' }}
-          left={{ base: '-100px', md: '-150px', lg: '-200px' }}
-          w={{ base: '400px', md: '500px', lg: '600px' }}
-          h={{ base: '400px', md: '500px', lg: '600px' }}
-          borderRadius="50%"
-          background={{
-            _light: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(0, 0, 0, 0) 70%)',
-            _dark: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(0, 0, 0, 0) 70%)',
-          }}
-          filter="blur(60px)"
-          pointerEvents="none"
-          zIndex={ 0 }
-        />
         <Grid
           position="relative"
           zIndex={ 1 }
-          templateColumns={{ base: '1fr', lg: '1.2fr 0.8fr' }}
-          gap={{ base: 8, lg: 16 }}
-          alignItems="center"
+          templateColumns={{ base: '1fr', lg: 'minmax(0, 1fr) minmax(420px, 520px)' }}
+          gap={{ base: 6, lg: 8, xl: 10 }}
+          alignItems="end"
         >
-          { /* Left: Search + Title */ }
           <VStack
             align="stretch"
             gap={{ base: 4, lg: 5 }}
           >
-            { /* Title Section */ }
             <Box>
               <Text
-                fontSize={{ base: '30px', md: '44px', lg: '50px', xl: '56px' }}
-                fontWeight={ 200 }
-                letterSpacing="-0.04em"
-                lineHeight="0.95"
-                color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                fontSize="11px"
+                fontWeight={ 500 }
+                letterSpacing="0.12em"
+                textTransform="uppercase"
+                color={ text.accent }
+                fontFamily={ fonts.mono }
+                mb={ 3 }
               >
-                OpenGradient Explorer
+                / OpenGradient Network Explorer
               </Text>
+
               <Text
-                fontSize={{ base: '13px', md: '14px' }}
+                as="h1"
+                fontSize={{ base: '30px', md: '38px', lg: '44px', xl: '48px' }}
+                fontWeight={ 500 }
+                letterSpacing="0"
+                lineHeight="1.06"
+                fontFamily={ fonts.sans }
+              >
+                <Box
+                  as="span"
+                  color={ text.primary }
+                >
+                  OpenGradient
+                </Box>
+                <Box
+                  as="span"
+                  color={ text.accent }
+                >
+                  { ' ' }Explorer
+                </Box>
+              </Text>
+              <Text
+                fontSize={{ base: '14px', md: '16px' }}
                 fontWeight={ 400 }
-                letterSpacing="0.02em"
-                color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                letterSpacing="0"
+                lineHeight="1.6"
+                color={ text.secondary }
+                fontFamily={ fonts.sans }
                 mt={ 3 }
-                maxW="500px"
+                maxW="620px"
               >
-                Find transactions, blocks, addresses, models, and AI workflows on the OpenGradient network.
+                Trace transactions, settlement batches, addresses, models, and AI workflows across the OpenGradient network.
               </Text>
             </Box>
 
-            { /* Search Bar - Premium, polished */ }
             <Box
               w="100%"
-              maxW={{ base: '100%', lg: '700px' }}
+              maxW={{ base: '100%', lg: '680px' }}
               position="relative"
             >
               <SearchBar isHomepage/>
             </Box>
           </VStack>
 
-          { /* Right: Live Metrics Dashboard */ }
           <Box
             display={{ base: 'none', lg: 'block' }}
             position="relative"
@@ -208,261 +267,72 @@ const HeroBanner = () => {
             <VStack
               align="stretch"
               gap={ 0 }
+              border="1px solid"
+              borderColor={ panel.border }
+              borderRadius="8px"
+              bg={ panel.bg }
+              backdropFilter="blur(18px)"
+              p={ 3 }
             >
-              { /* Section Header */ }
               <Flex
                 alignItems="center"
                 gap={ 2 }
-                mb={ 6 }
+                mb={ 3 }
               >
                 <Box
                   position="relative"
                   w="6px"
                   h="6px"
                   borderRadius="50%"
-                  bg="green.500"
-                  boxShadow="0 0 6px rgba(34, 197, 94, 0.6)"
-                  _dark={{
-                    boxShadow: '0 0 8px rgba(34, 197, 94, 0.8)',
-                  }}
+                  bg={ colors.cyan }
+                  boxShadow="0 0 10px rgba(36, 188, 227, 0.8), 0 0 20px rgba(36, 188, 227, 0.4)"
                   animation="pulseOpacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
                 />
                 <Text
                   fontSize="11px"
                   fontWeight={ 500 }
-                  letterSpacing="0.1em"
+                  letterSpacing="0.12em"
                   textTransform="uppercase"
-                  color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
+                  color={ text.accent }
+                  fontFamily={ fonts.mono }
                 >
-                  Network Stats
+                  Live network stats
                 </Text>
               </Flex>
 
-              { /* Metrics Grid */ }
               <Grid
                 templateColumns="1fr 1fr"
-                gap={ 0 }
-                overflow="hidden"
+                gap={ 2.5 }
+                overflow="visible"
               >
-                { /* Models Hosted */ }
-                <LinkBox
-                  p={ 5 }
-                  position="relative"
-                  bgGradient={{
-                    _light: 'linear-gradient(135deg, rgba(88, 28, 135, 0.04) 0%, rgba(109, 40, 217, 0.05) 100%)',
-                    _dark: 'linear-gradient(135deg, rgba(88, 28, 135, 0.08) 0%, rgba(109, 40, 217, 0.1) 100%)',
-                  }}
-                  transition="all 0.2s ease"
-                  _hover={{
-                    bgGradient: {
-                      _light: 'linear-gradient(135deg, rgba(88, 28, 135, 0.06) 0%, rgba(109, 40, 217, 0.08) 100%)',
-                      _dark: 'linear-gradient(135deg, rgba(88, 28, 135, 0.12) 0%, rgba(109, 40, 217, 0.15) 100%)',
-                    },
-                  }}
-                >
-                  <LinkOverlay
-                    href="https://hub.opengradient.ai"
-                    external
-                    noIcon
-                  />
-                  <Flex
-                    alignItems="center"
-                    gap={ 1.5 }
-                    mb={ 2 }
-                  >
-                    <Text
-                      fontSize="10px"
-                      fontWeight={ 600 }
-                      letterSpacing="0.08em"
-                      textTransform="uppercase"
-                      color={{ _light: 'rgba(88, 28, 135, 0.9)', _dark: 'rgba(167, 139, 250, 1)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                    >
-                      Models Hosted
-                    </Text>
-                    <IconSvg
-                      name="link_external"
-                      boxSize={ 3 }
-                      color={{ _light: 'rgba(88, 28, 135, 0.9)', _dark: 'rgba(167, 139, 250, 1)' }}
-                    />
-                  </Flex>
-                  <Text
-                    fontSize="32px"
-                    fontWeight={ 200 }
-                    letterSpacing="-0.02em"
-                    color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
-                    lineHeight="1"
-                  >
-                    2000+
-                  </Text>
-                </LinkBox>
-
-                { /* Total Blocks */ }
-                <LinkBox
-                  p={ 5 }
-                  position="relative"
-                  bgGradient={{
-                    _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                    _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-                  }}
-                  transition="all 0.2s ease"
-                  _hover={{
-                    bgGradient: {
-                      _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                      _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                    },
-                  }}
-                >
-                  <LinkOverlay
-                    href={ route({ pathname: '/blocks' }) }
-                    noIcon
-                  />
-                  <Flex
-                    alignItems="center"
-                    gap={ 1.5 }
-                    mb={ 2 }
-                  >
-                    <Text
-                      fontSize="10px"
-                      fontWeight={ 600 }
-                      letterSpacing="0.08em"
-                      textTransform="uppercase"
-                      color={{ _light: 'rgba(30, 58, 138, 0.9)', _dark: 'rgba(148, 163, 184, 1)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                    >
-                      Total Blocks
-                    </Text>
-                    <IconSvg
-                      name="block_slim"
-                      boxSize={ 3 }
-                      color={{ _light: 'rgba(30, 58, 138, 0.9)', _dark: 'rgba(148, 163, 184, 1)' }}
-                    />
-                  </Flex>
-                  <Skeleton loading={ statsQuery.isPlaceholderData || apiQuery.isPlaceholderData } w="fit-content">
-                    <Text
-                      fontSize="32px"
-                      fontWeight={ 200 }
-                      letterSpacing="-0.02em"
-                      color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                      lineHeight="1"
-                    >
-                      { formatNumber(totalBlocks, 1) }
-                    </Text>
-                  </Skeleton>
-                </LinkBox>
-
-                { /* LLM Settlement Txns */ }
-                <LinkBox
-                  p={ 5 }
-                  position="relative"
-                  bgGradient={{
-                    _light: 'linear-gradient(135deg, rgba(6, 182, 212, 0.04) 0%, rgba(14, 165, 233, 0.05) 100%)',
-                    _dark: 'linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(14, 165, 233, 0.1) 100%)',
-                  }}
-                  transition="all 0.2s ease"
-                  _hover={{
-                    bgGradient: {
-                      _light: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(14, 165, 233, 0.08) 100%)',
-                      _dark: 'linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(14, 165, 233, 0.15) 100%)',
-                    },
-                  }}
-                >
-                  <LinkOverlay
-                    href={ route({ pathname: '/address/[hash]', query: { hash: settlementContractAddress } }) }
-                    noIcon
-                  />
-                  <Flex
-                    alignItems="center"
-                    gap={ 1.5 }
-                    mb={ 2 }
-                  >
-                    <Text
-                      fontSize="10px"
-                      fontWeight={ 600 }
-                      letterSpacing="0.08em"
-                      textTransform="uppercase"
-                      color={{ _light: 'rgba(6, 182, 212, 0.9)', _dark: 'rgba(125, 211, 252, 1)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                    >
-                      x402 Txns
-                    </Text>
-                    <IconSvg
-                      name="transactions_slim"
-                      boxSize={ 3 }
-                      color={{ _light: 'rgba(6, 182, 212, 0.9)', _dark: 'rgba(125, 211, 252, 1)' }}
-                    />
-                  </Flex>
-                  <Skeleton loading={ settlementQuery.isPlaceholderData || settlementQueryV2.isPlaceholderData } w="fit-content">
-                    <Text
-                      fontSize="32px"
-                      fontWeight={ 200 }
-                      letterSpacing="-0.02em"
-                      color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                      lineHeight="1"
-                    >
-                      { formatNumber(llmBatchSettlementsCount) }
-                    </Text>
-                  </Skeleton>
-                </LinkBox>
-
-                { /* Transactions */ }
-                <LinkBox
-                  p={ 5 }
-                  position="relative"
-                  bgGradient={{
-                    _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                    _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-                  }}
-                  transition="all 0.2s ease"
-                  _hover={{
-                    bgGradient: {
-                      _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                      _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                    },
-                  }}
-                >
-                  <LinkOverlay
-                    href={ route({ pathname: '/txs' }) }
-                    noIcon
-                  />
-                  <Flex
-                    alignItems="center"
-                    gap={ 1.5 }
-                    mb={ 2 }
-                  >
-                    <Text
-                      fontSize="10px"
-                      fontWeight={ 600 }
-                      letterSpacing="0.08em"
-                      textTransform="uppercase"
-                      color={{ _light: 'rgba(30, 58, 138, 0.9)', _dark: 'rgba(148, 163, 184, 1)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                    >
-                      Transactions
-                    </Text>
-                    <IconSvg
-                      name="transactions_slim"
-                      boxSize={ 3 }
-                      color={{ _light: 'rgba(30, 58, 138, 0.9)', _dark: 'rgba(148, 163, 184, 1)' }}
-                    />
-                  </Flex>
-                  <Skeleton loading={ statsQuery.isPlaceholderData || apiQuery.isPlaceholderData } w="fit-content">
-                    <Text
-                      fontSize="32px"
-                      fontWeight={ 200 }
-                      letterSpacing="-0.02em"
-                      color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                      lineHeight="1"
-                    >
-                      { formatNumber(totalTransactions) }
-                    </Text>
-                  </Skeleton>
-                </LinkBox>
+                <MetricCard
+                  href="https://hub.opengradient.ai"
+                  external
+                  label="Models Hosted"
+                  iconName="link_external"
+                  value="4,500+"
+                />
+                <MetricCard
+                  href={ route({ pathname: '/blocks' }) }
+                  label="Total Blocks"
+                  iconName="block_slim"
+                  loading={ totalBlocks === null && (statsQuery.isPending || apiQuery.isPending) }
+                  value={ formatNumber(totalBlocks, 1) }
+                />
+                <MetricCard
+                  href={ route({ pathname: '/address/[hash]', query: { hash: settlementContractAddress } }) }
+                  label="x402 Txns"
+                  iconName="transactions_slim"
+                  loading={ isSettlementCountLoading }
+                  value={ formatNumber(llmBatchSettlementsCount) }
+                />
+                <MetricCard
+                  href={ route({ pathname: '/txs' }) }
+                  label="Transactions"
+                  iconName="transactions_slim"
+                  loading={ totalTransactions === null && (statsQuery.isPending || apiQuery.isPending) }
+                  value={ formatNumber(totalTransactions) }
+                />
               </Grid>
             </VStack>
           </Box>
diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx
index 077a8be93a..712436ae16 100644
--- a/ui/home/LatestBlocks.tsx
+++ b/ui/home/LatestBlocks.tsx
@@ -16,8 +16,11 @@ import { BLOCK } from 'stubs/block';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import { Link } from 'toolkit/chakra/link';
 
+import { HOME_BRAND } from './brand';
 import LatestBlocksItem from './LatestBlocksItem';
 
+const { colors, fonts, panel, text } = HOME_BRAND;
+
 const LatestBlocks = () => {
   const isMobile = useIsMobile();
   const blocksMaxCount = isMobile ? 4 : 6;
@@ -70,8 +73,8 @@ const LatestBlocks = () => {
       <Box px={ 4 } py={ 8 }>
         <Text
           fontSize="sm"
-          color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
+          color={ text.secondary }
+          fontFamily={ fonts.sans }
         >
           No data. Please reload the page.
         </Text>
@@ -88,6 +91,7 @@ const LatestBlocks = () => {
           align="stretch"
           gap={ 2.5 }
           px={{ base: 3, lg: 4 }}
+          pt={ 3 }
           pb={ 4 }
         >
           { dataToShow.map(((block, index) => (
@@ -111,8 +115,8 @@ const LatestBlocks = () => {
             fontWeight={ 500 }
             letterSpacing="0.08em"
             textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.muted }
+            fontFamily={ fonts.mono }
             width="100%"
             display="block"
             textAlign="center"
@@ -121,7 +125,7 @@ const LatestBlocks = () => {
             _hover={{
               textDecoration: 'none',
               opacity: 0.7,
-              color: { _light: 'rgba(0, 0, 0, 0.6)', _dark: 'rgba(255, 255, 255, 0.6)' },
+              color: text.accent,
             }}
           >
             View all blocks
@@ -133,27 +137,43 @@ const LatestBlocks = () => {
 
   return (
     <Box
-      width={{ base: '100%', lg: '320px' }}
+      width="100%"
       flexShrink={ 0 }
       position="relative"
+      border="1px solid"
+      borderColor={ panel.border }
+      borderRadius="8px"
+      bg={ panel.bg }
+      boxShadow={ panel.shadow }
+      backdropFilter="blur(18px)"
+      overflow="hidden"
     >
-      { /* Premium Header with Status Indicator */ }
       <Flex
         alignItems="center"
         gap={ 2 }
         px={{ base: 3, lg: 4 }}
-        pt={{ base: 4, lg: 6 }}
-        pb={ 5 }
+        pt={{ base: 4, lg: 4 }}
+        pb={ 3 }
+        borderBottom="1px solid"
+        borderColor={ panel.border }
       >
+        <Box
+          w="6px"
+          h="6px"
+          borderRadius="50%"
+          bg={ colors.cyan }
+          boxShadow="0 0 10px rgba(36, 188, 227, 0.65)"
+          flexShrink={ 0 }
+        />
         <Text
-          fontSize="13px"
+          fontSize="11px"
           fontWeight={ 500 }
-          letterSpacing="0.1em"
+          letterSpacing="0.12em"
           textTransform="uppercase"
-          color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
+          color={ text.accent }
+          fontFamily={ fonts.mono }
         >
-          Latest blocks
+          / Latest blocks
         </Text>
       </Flex>
       { statsQueryResult.data?.celo && (
@@ -161,14 +181,15 @@ const LatestBlocks = () => {
           <Box
             px={ 3 }
             py={ 2 }
-            bg={{ _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(64, 209, 219, 0.05)' }}
+            bg={{ _light: 'rgba(36, 188, 227, 0.06)', _dark: 'rgba(36, 188, 227, 0.08)' }}
+            borderRadius="8px"
           >
             <Text
               fontSize="10px"
               fontWeight={ 500 }
               letterSpacing="0.08em"
-              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
+              color={ text.muted }
+              fontFamily={ fonts.mono }
               mb={ 0.5 }
             >
               Current epoch
@@ -176,8 +197,8 @@ const LatestBlocks = () => {
             <Text
               fontSize="14px"
               fontWeight={ 400 }
-              color={{ _light: 'rgba(0, 0, 0, 0.8)', _dark: 'rgba(255, 255, 255, 0.9)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
+              color={ text.primary }
+              fontFamily={ fonts.mono }
             >
               #{ statsQueryResult.data.celo.epoch_number }
             </Text>
diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx
index e65085fbe2..9692588051 100644
--- a/ui/home/LatestBlocksItem.tsx
+++ b/ui/home/LatestBlocksItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text, HStack, VStack } from '@chakra-ui/react';
+import { Box, Flex, Text, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -8,13 +8,13 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import { LinkBox, LinkOverlay } from 'toolkit/chakra/link';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import { Tooltip } from 'toolkit/chakra/tooltip';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import IconSvg from 'ui/shared/IconSvg';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
+import { HOME_BRAND } from './brand';
+
+const { colors, fonts, text } = HOME_BRAND;
+
 type Props = {
   block: Block;
   isLoading?: boolean;
@@ -24,211 +24,120 @@ type Props = {
 
 const LatestBlocksItem = ({ block, isLoading, animation, isFirst = false }: Props) => {
   const blockUrl = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: block.height.toString() } });
+  const txCount = block.transaction_count;
+  const barPct = Math.min(100, Math.round((Math.log(Math.max(txCount, 1) + 1) / Math.log(400)) * 100));
 
   return (
-    <Box
+    <LinkBox
+      animation={ animation }
       position="relative"
       width="100%"
-      css={{
-        '& a': {
-          outline: 'none !important',
-          '&:hover': {
-            outline: 'none !important',
-          },
-          '&:focus': {
-            outline: 'none !important',
-          },
-          '&:focus-visible': {
-            outline: 'none !important',
-          },
-        },
+      py={ 3 }
+      px={ 3.5 }
+      borderRadius="6px"
+      borderBottom="1px solid"
+      borderColor={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(189, 235, 247, 0.06)' }}
+      transition="all 0.18s ease"
+      _hover={{
+        bg: { _light: 'rgba(36, 188, 227, 0.04)', _dark: 'rgba(36, 188, 227, 0.05)' },
+        borderColor: { _light: 'rgba(36, 188, 227, 0.35)', _dark: 'rgba(36, 188, 227, 0.30)' },
       }}
     >
-      <LinkBox
-        animation={ animation }
-        position="relative"
-        width="100%"
-        transition="all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
-        outline="none"
-        _hover={{
-          transform: 'translateX(2px)',
-          outline: 'none',
-        }}
-        _focus={{
-          outline: 'none',
-        }}
-        _focusVisible={{
-          outline: 'none',
-        }}
-      >
-        <LinkOverlay
-          href={ blockUrl }
-          noIcon
+      <LinkOverlay href={ blockUrl } noIcon/>
+
+      <Flex alignItems="baseline" justifyContent="space-between" gap={ 3 } mb={ 1.5 }>
+        <HStack gap={ 2 } alignItems="baseline">
+          { isFirst && (
+            <Box
+              w="6px"
+              h="6px"
+              borderRadius="50%"
+              bg={ colors.cyan }
+              boxShadow="0 0 10px rgba(36, 188, 227, 0.8)"
+              flexShrink={ 0 }
+              alignSelf="center"
+            />
+          ) }
+          <Text
+            fontFamily={ fonts.mono }
+            fontSize="15px"
+            fontWeight={ 500 }
+            color={ text.primary }
+            letterSpacing="0"
+            lineHeight="1"
+          >
+            #{ block.height.toLocaleString() }
+          </Text>
+        </HStack>
+        <TimeAgoWithTooltip
+          timestamp={ block.timestamp }
+          enableIncrement={ !isLoading }
+          isLoading={ isLoading }
+          color={ text.muted }
+          fontSize="11px"
+          fontWeight={ 400 }
+          fontFamily={ fonts.mono }
+          flexShrink={ 0 }
         />
-        <Flex
-          gap={ 3 }
-          alignItems="flex-start"
+      </Flex>
+
+      <Flex alignItems="center" gap={ 2.5 } mb={ 1.5 }>
+        <Box
+          flex={ 1 }
+          h="3px"
+          borderRadius="2px"
+          bg={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.10)' }}
           position="relative"
-          p={ 3.5 }
-          bg={{ _light: '#ffffff', _dark: '#0a0a0a' }}
-          _hover={{
-            bg: { _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(64, 209, 219, 0.08)' },
-          }}
+          overflow="hidden"
         >
-          { /* Visual Block Indicator */ }
           <Box
-            position="relative"
-            flexShrink={ 0 }
-            mt={ 0.5 }
+            position="absolute"
+            top={ 0 }
+            left={ 0 }
+            h="100%"
+            w={ `${ barPct }%` }
+            bgGradient={ `linear-gradient(90deg, ${ colors.tealMid } 0%, ${ colors.cyan } 100%)` }
+            borderRadius="2px"
+            transition="width 0.4s ease"
+          />
+        </Box>
+        <Text
+          fontFamily={ fonts.mono }
+          fontSize="11px"
+          fontWeight={ 500 }
+          color={ text.secondary }
+          flexShrink={ 0 }
+        >
+          { txCount.toLocaleString() } { txCount === 1 ? 'tx' : 'txs' }
+        </Text>
+      </Flex>
+
+      { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && (
+        <HStack gap={ 1.5 } alignItems="center" minH="16px">
+          <Text
+            fontFamily={ fonts.mono }
+            fontSize="10px"
+            color={ text.muted }
+            letterSpacing="0.08em"
+            textTransform="uppercase"
           >
-            <IconSvg
-              name="block_slim"
-              boxSize={ 5 }
-              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.5)' }}
+            { getNetworkValidatorTitle() }
+          </Text>
+          <Box maxW="160px" minW={ 0 } flex={ 1 }>
+            <AddressEntity
+              address={ block.miner }
               isLoading={ isLoading }
+              noIcon
+              noCopy
+              truncation="constant"
+              fontSize="11px"
+              fontFamily={ fonts.mono }
+              color={ text.secondary }
             />
-            { /* New block indicator for first block */ }
-            { isFirst && (
-              <Box
-                position="absolute"
-                top="-2px"
-                right="-2px"
-                width="8px"
-                height="8px"
-                bg="green.500"
-                borderRadius="50%"
-                boxShadow="0 0 4px rgba(34, 197, 94, 0.6)"
-                _dark={{
-                  boxShadow: '0 0 6px rgba(34, 197, 94, 0.8)',
-                }}
-              />
-            ) }
-            { /* Epoch indicator */ }
-            { block.celo?.is_epoch_block && (
-              <Tooltip content={ `Finalized epoch #${ block.celo.epoch_number }` }>
-                <Box
-                  position="absolute"
-                  top="-4px"
-                  right="-4px"
-                  bg="orange.500"
-                  borderRadius="50%"
-                  width="12px"
-                  height="12px"
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                >
-                  <IconSvg
-                    name="checkered_flag"
-                    boxSize={ 2.5 }
-                    color="white"
-                    isLoading={ isLoading }
-                  />
-                </Box>
-              </Tooltip>
-            ) }
           </Box>
-
-          { /* Content Section */ }
-          <VStack
-            align="stretch"
-            gap={ 2.5 }
-            flex={ 1 }
-            minW={ 0 }
-          >
-            { /* Header: Block Number & Time */ }
-            <Flex
-              alignItems="center"
-              justifyContent="space-between"
-              gap={ 3 }
-              flexWrap="wrap"
-            >
-              <BlockEntity
-                isLoading={ isLoading }
-                number={ block.height }
-                tailLength={ 2 }
-                fontSize="sm"
-                fontWeight={ 500 }
-                fontFamily="system-ui, -apple-system, sans-serif"
-                color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                noIcon
-              />
-              <TimeAgoWithTooltip
-                timestamp={ block.timestamp }
-                enableIncrement={ !isLoading }
-                isLoading={ isLoading }
-                color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                fontSize="11px"
-                fontWeight={ 400 }
-                fontFamily="system-ui, -apple-system, sans-serif"
-                flexShrink={ 0 }
-              />
-            </Flex>
-
-            { /* Stats Row */ }
-            <HStack
-              gap={ 4 }
-              flexWrap="wrap"
-              alignItems="center"
-            >
-              { /* Transaction Count - Prominent Display */ }
-              <Skeleton loading={ isLoading }>
-                <HStack gap={ 1.5 }>
-                  <Text
-                    fontSize="11px"
-                    fontWeight={ 500 }
-                    letterSpacing="0.02em"
-                    color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
-                  >
-                    Txn
-                  </Text>
-                  <Text
-                    fontSize="12px"
-                    fontWeight={ 500 }
-                    color={{ _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.95)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
-                  >
-                    { block.transaction_count.toLocaleString() }
-                  </Text>
-                </HStack>
-              </Skeleton>
-
-              { /* Miner/Validator */ }
-              { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && (
-                <Skeleton loading={ isLoading }>
-                  <HStack gap={ 1.5 }>
-                    <Text
-                      fontSize="11px"
-                      fontWeight={ 500 }
-                      letterSpacing="0.02em"
-                      color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                      fontFamily="system-ui, -apple-system, sans-serif"
-                      textTransform="capitalize"
-                    >
-                      { getNetworkValidatorTitle() }
-                    </Text>
-                    <Box display="inline-block" maxW="120px">
-                      <AddressEntity
-                        address={ block.miner }
-                        isLoading={ isLoading }
-                        noIcon
-                        noCopy
-                        truncation="constant"
-                        fontSize="11px"
-                        fontWeight={ 500 }
-                        fontFamily="system-ui, -apple-system, sans-serif"
-                        color={{ _light: 'rgba(0, 0, 0, 0.8)', _dark: 'rgba(255, 255, 255, 0.8)' }}
-                      />
-                    </Box>
-                  </HStack>
-                </Skeleton>
-              ) }
-            </HStack>
-          </VStack>
-        </Flex>
-      </LinkBox>
-    </Box>
+        </HStack>
+      ) }
+    </LinkBox>
   );
 };
 
diff --git a/ui/home/LatestTxs.tsx b/ui/home/LatestTxs.tsx
index 6d82e32672..81bdf911d0 100644
--- a/ui/home/LatestTxs.tsx
+++ b/ui/home/LatestTxs.tsx
@@ -10,56 +10,72 @@ import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import { TX } from 'stubs/tx';
 import { Link } from 'toolkit/chakra/link';
 
+import { HOME_BRAND } from './brand';
 import LatestTxsItem from './LatestTxsItem';
 import LatestTxsItemMobile from './LatestTxsItemMobile';
 
+const { colors, fonts, panel, text } = HOME_BRAND;
+
 const LatestTransactions = () => {
   const isMobile = useIsMobile();
-  const txsCount = isMobile ? 2 : 6;
+  const txsCount = isMobile ? 2 : 11;
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_txs', {
     queryOptions: {
       placeholderData: Array(txsCount).fill(TX),
     },
   });
+  const validatedTxsQuery = useApiQuery('txs_validated', {
+    queryParams: {
+      filter: 'validated',
+    },
+    queryOptions: {
+      placeholderData: {
+        items: Array(txsCount).fill(TX),
+        next_page_params: null,
+      },
+    },
+  });
 
   const { num, socketAlert } = useNewTxsSocket();
   const txsUrl = route({ pathname: '/txs' });
 
   let content;
 
-  if (isError) {
+  const txs = isMobile ? data : validatedTxsQuery.data?.items;
+  const isTxsPlaceholderData = isMobile ? isPlaceholderData : validatedTxsQuery.isPlaceholderData;
+  const isTxsError = isMobile ? isError : validatedTxsQuery.isError;
+
+  if (isTxsError) {
     content = (
       <Box px={{ base: 4, lg: 6 }} py={ 8 }>
         <Text
           fontSize="sm"
-          color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
+          color={ text.secondary }
+          fontFamily={ fonts.sans }
         >
           No data. Please reload the page.
         </Text>
       </Box>
     );
-  }
-
-  if (data) {
+  } else if (txs) {
     content = (
       <>
         <Box
           display={{ base: 'block', lg: 'none' }}
           width="100%"
-          bg={{ _light: '#ffffff', _dark: '#0a0a0a' }}
+          bg="transparent"
           borderRadius="0"
           overflow="hidden"
         >
-          { data.slice(0, txsCount).map(((tx, index) => (
+          { txs.slice(0, txsCount).map(((tx, index) => (
             <Box
-              key={ tx.hash + (isPlaceholderData ? index : '') }
+              key={ tx.hash + (isTxsPlaceholderData ? index : '') }
               borderBottom={ index < txsCount - 1 ? '1px solid' : 'none' }
-              borderColor={{ _light: 'rgba(0, 0, 0, 0.1)', _dark: 'rgba(255, 255, 255, 0.1)' }}
+              borderColor={ panel.border }
             >
               <LatestTxsItemMobile
                 tx={ tx }
-                isLoading={ isPlaceholderData }
+                isLoading={ isTxsPlaceholderData }
               />
             </Box>
           ))) }
@@ -68,36 +84,21 @@ const LatestTransactions = () => {
           <Box
             display={{ base: 'none', lg: 'block' }}
             width="100%"
-            bg={{ _light: '#ffffff', _dark: '#0a0a0a' }}
+            bg="transparent"
             borderRadius="0"
             overflow="hidden"
             position="relative"
           >
-            { /* Subtle grid pattern overlay */ }
-            <Box
-              position="absolute"
-              top={ 0 }
-              left={ 0 }
-              right={ 0 }
-              bottom={ 0 }
-              opacity={{ _light: 0.005, _dark: 0.015 }}
-              backgroundImage={{
-                _light: 'repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(0, 0, 0, 0.02) 99px, rgba(0, 0, 0, 0.02) 100px), repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(0, 0, 0, 0.02) 99px, rgba(0, 0, 0, 0.02) 100px)',
-                _dark: 'repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(64, 209, 219, 0.02) 99px, rgba(64, 209, 219, 0.02) 100px), repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(64, 209, 219, 0.02) 99px, rgba(64, 209, 219, 0.02) 100px)',
-              }}
-              backgroundSize="100px 100px"
-              pointerEvents="none"
-            />
-            <Box position="relative" zIndex={ 1 }>
-              { data.slice(0, txsCount).map(((tx, index) => (
+            <Box>
+              { txs.slice(0, txsCount).map(((tx, index) => (
                 <Box
-                  key={ tx.hash + (isPlaceholderData ? index : '') }
+                  key={ tx.hash + (isTxsPlaceholderData ? index : '') }
                   borderBottom={ index < txsCount - 1 ? '1px solid' : 'none' }
-                  borderColor={{ _light: 'rgba(0, 0, 0, 0.1)', _dark: 'rgba(255, 255, 255, 0.1)' }}
+                  borderColor={ panel.border }
                 >
                   <LatestTxsItem
                     tx={ tx }
-                    isLoading={ isPlaceholderData }
+                    isLoading={ isTxsPlaceholderData }
                   />
                 </Box>
               ))) }
@@ -105,10 +106,10 @@ const LatestTransactions = () => {
           </Box>
         </AddressHighlightProvider>
         <Box
-          mt={ 3 }
-          px={{ base: 4, lg: 6 }}
-          pb={{ base: 4, lg: 5 }}
-          pt={ 2 }
+          mt={ 2 }
+          px={{ base: 4, lg: 4 }}
+          pb={{ base: 4, lg: 4 }}
+          pt={ 1 }
         >
           <Link
             href={ txsUrl }
@@ -116,8 +117,8 @@ const LatestTransactions = () => {
             fontWeight={ 500 }
             letterSpacing="0.08em"
             textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.muted }
+            fontFamily={ fonts.mono }
             width="100%"
             display="block"
             textAlign="center"
@@ -126,7 +127,7 @@ const LatestTransactions = () => {
             _hover={{
               textDecoration: 'none',
               opacity: 0.7,
-              color: { _light: 'rgba(0, 0, 0, 0.6)', _dark: 'rgba(255, 255, 255, 0.6)' },
+              color: text.accent,
             }}
           >
             View all transactions
@@ -139,38 +140,46 @@ const LatestTransactions = () => {
   const statusText = socketAlert || (num ? `${ num.toLocaleString() } new txns` : 'Monitoring...');
 
   return (
-    <Box width="100%">
-      { /* Premium Header Section */ }
+    <Box
+      width="100%"
+      height="100%"
+      border="1px solid"
+      borderColor={ panel.border }
+      borderRadius="8px"
+      bg={ panel.bg }
+      boxShadow={ panel.shadow }
+      backdropFilter="blur(18px)"
+      overflow="hidden"
+    >
       <Flex
         alignItems="center"
         gap={ 2 }
-        px={{ base: 4, lg: 6 }}
-        pt={{ base: 4, lg: 6 }}
-        pb={ 5 }
+        px={{ base: 4, lg: 4 }}
+        pt={{ base: 4, lg: 4 }}
+        pb={ 3 }
+        borderBottom="1px solid"
+        borderColor={ panel.border }
       >
         <Box
           position="relative"
           w="6px"
           h="6px"
           borderRadius="50%"
-          bg="green.500"
-          boxShadow="0 0 6px rgba(34, 197, 94, 0.6)"
-          _dark={{
-            boxShadow: '0 0 8px rgba(34, 197, 94, 0.8)',
-          }}
+          bg={ colors.cyan }
+          boxShadow="0 0 10px rgba(36, 188, 227, 0.8), 0 0 20px rgba(36, 188, 227, 0.4)"
           animation="pulseOpacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
         />
         <Text
-          fontSize="13px"
+          fontSize="11px"
           fontWeight={ 500 }
-          letterSpacing="0.1em"
+          letterSpacing="0.12em"
           textTransform="uppercase"
-          color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
+          color={ text.accent }
+          fontFamily={ fonts.mono }
         >
-          Latest transactions
+          / Latest transactions
         </Text>
-        { (num || socketAlert) && !isPlaceholderData && (
+        { (num || socketAlert) && !isTxsPlaceholderData && (
           <Link
             href={ txsUrl }
             display="inline-flex"
@@ -178,19 +187,18 @@ const LatestTransactions = () => {
             px={ 2.5 }
             py={ 1 }
             borderRadius="full"
-            bg={{ _light: 'rgba(59, 130, 246, 0.1)', _dark: 'rgba(59, 130, 246, 0.2)' }}
+            bg={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.16)' }}
             border="1px solid"
-            borderColor={{ _light: 'rgba(59, 130, 246, 0.2)', _dark: 'rgba(59, 130, 246, 0.3)' }}
+            borderColor={{ _light: 'rgba(36, 188, 227, 0.24)', _dark: 'rgba(80, 201, 233, 0.28)' }}
             fontSize="10px"
             fontWeight={ 500 }
-            color={{ _light: 'rgba(59, 130, 246, 0.9)', _dark: 'rgba(147, 197, 253, 0.9)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.accent }
+            fontFamily={ fonts.mono }
             transition="all 0.2s ease"
             _hover={{
-              bg: { _light: 'rgba(59, 130, 246, 0.15)', _dark: 'rgba(59, 130, 246, 0.25)' },
-              borderColor: { _light: 'rgba(59, 130, 246, 0.3)', _dark: 'rgba(59, 130, 246, 0.4)' },
+              bg: { _light: 'rgba(36, 188, 227, 0.16)', _dark: 'rgba(36, 188, 227, 0.24)' },
+              borderColor: { _light: 'rgba(36, 188, 227, 0.34)', _dark: 'rgba(80, 201, 233, 0.42)' },
               textDecoration: 'none',
-              transform: 'scale(1.05)',
             }}
           >
             { statusText }
diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx
index 59466982e7..2143ce35f6 100644
--- a/ui/home/LatestTxsItem.tsx
+++ b/ui/home/LatestTxsItem.tsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Flex,
-  Grid,
-  GridItem,
-  HStack,
-  Text,
-  VStack,
-} from '@chakra-ui/react';
+import { Box, Flex, HStack, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -14,23 +6,23 @@ import type { Transaction } from 'types/api/transaction';
 import { route } from 'nextjs-routes';
 
 import { SUPPORTED_INFERENCE_ADDRESSES } from 'lib/inferences/address';
-import { Badge } from 'toolkit/chakra/badge';
 import { LinkBox, LinkOverlay, Link } from 'toolkit/chakra/link';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxStatus from 'ui/shared/statusTag/TxStatus';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
-import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
-import TxType from 'ui/txs/TxType';
 
+import { HOME_BRAND } from './brand';
 import useInferenceType from './useInferenceType';
 
+const { colors, fonts, text } = HOME_BRAND;
+
 type Props = {
   tx: Transaction;
   isLoading?: boolean;
 };
 
+const formatHash = (hash: string) => `${ hash.slice(0, 10) }...${ hash.slice(-4) }`;
+
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const hasInference = tx.to?.hash === SUPPORTED_INFERENCE_ADDRESSES.InferenceHub ||
@@ -38,198 +30,131 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const inferenceInfo = useInferenceType(tx, isLoading || false);
   const txUrl = route({ pathname: '/tx/[hash]', query: { hash: tx.hash } });
 
+  const isContractCreation = !tx.to && tx.created_contract;
+  const txKind = (() => {
+    if (isContractCreation) {
+      return 'Deploy';
+    }
+
+    return tx.to?.is_contract ? 'Call' : 'Send';
+  })();
+
   return (
     <LinkBox
-      py={{ base: 4, lg: 5 }}
-      px={{ base: 4, lg: 6 }}
+      py={{ base: 4, lg: 3 }}
+      px={{ base: 4, lg: 4 }}
       width="100%"
-      transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+      display={{ base: 'none', lg: 'block' }}
       position="relative"
+      borderRadius="6px"
+      transition="background-color 0.18s ease"
       _hover={{
-        bg: { _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(64, 209, 219, 0.05)' },
+        bg: { _light: 'rgba(36, 188, 227, 0.04)', _dark: 'rgba(36, 188, 227, 0.05)' },
       }}
-      display={{ base: 'none', lg: 'block' }}
     >
       <LinkOverlay href={ txUrl } noIcon/>
-      <Grid
-        templateColumns={{ base: '1fr', lg: '2.5fr 1.8fr 1.5fr' }}
-        gap={ 6 }
-        alignItems="flex-start"
-      >
-        { /* Transaction Hash & Metadata Column */ }
-        <GridItem>
-          <VStack align="flex-start" gap={ 3 }>
-            { /* Hash Row */ }
-            <Flex
-              alignItems="center"
-              gap={ 3 }
-              flexWrap="wrap"
-              width="100%"
-            >
-              <TxEntity
-                isLoading={ isLoading }
-                hash={ tx.hash }
-                fontWeight={ 500 }
-                fontSize="sm"
-                fontFamily="system-ui, -apple-system, sans-serif"
-                color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                noIcon
-                truncation="constant_long"
-              />
-              <TimeAgoWithTooltip
-                timestamp={ tx.timestamp }
-                enableIncrement
-                isLoading={ isLoading }
-                color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                fontSize="11px"
-                fontWeight={ 400 }
-                fontFamily="system-ui, -apple-system, sans-serif"
-                flexShrink={ 0 }
-              />
-            </Flex>
-            { /* Badges Row */ }
-            <HStack flexWrap="wrap" gap={ 1.5 }>
-              <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
-              { tx.status !== 'error' && (
-                <TxStatus status={ tx.status } isLoading={ isLoading }/>
-              ) }
-              <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
-            </HStack>
-          </VStack>
-        </GridItem>
+      <Flex alignItems="center" gap={ 3 }>
+        <Box
+          flexShrink={ 0 }
+          minW="56px"
+          px={ 2 }
+          py={ 0.5 }
+          borderRadius="6px"
+          textAlign="center"
+          border="1px solid"
+          borderColor={{ _light: 'rgba(36, 188, 227, 0.5)', _dark: 'rgba(36, 188, 227, 0.45)' }}
+          color={ text.accent }
+          fontFamily={ fonts.mono }
+          fontSize="9px"
+          fontWeight={ 500 }
+          letterSpacing="0.10em"
+          textTransform="uppercase"
+        >
+          { txKind }
+        </Box>
 
-        { /* Address Column - Premium Styling */ }
-        <GridItem>
-          <VStack align="flex-start" gap={ 1 }>
-            <Text
-              fontSize="10px"
-              fontWeight={ 500 }
-              letterSpacing="0.08em"
-              textTransform="uppercase"
-              color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
-              mb={ 0.5 }
-            >
-              Addresses
-            </Text>
-            <Box
-              fontSize="12px"
-              fontFamily="system-ui, -apple-system, sans-serif"
-            >
-              <AddressFromTo
-                from={ tx.from }
-                to={ dataTo }
-                isLoading={ isLoading }
-                mode="compact"
-                noCopy
-                noIcon
-              />
-            </Box>
-          </VStack>
-        </GridItem>
+        <Box minW={ 0 } flex="1.4">
+          <Text
+            fontFamily={ fonts.mono }
+            fontSize="13px"
+            fontWeight={ 500 }
+            color={ text.primary }
+            lineHeight="1.2"
+            mb={ 0.5 }
+            truncate
+          >
+            { isLoading ? '0x000000...0000' : formatHash(tx.hash) }
+          </Text>
+          <TimeAgoWithTooltip
+            timestamp={ tx.timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            color={ text.muted }
+            fontSize="10px"
+            fontWeight={ 400 }
+            fontFamily={ fonts.mono }
+          />
+        </Box>
+
+        <Flex flex="2" minW={ 0 } alignItems="center" gap={ 2 } fontFamily={ fonts.mono } fontSize="12px">
+          <Box minW={ 0 } flex={ 1 }>
+            <AddressEntity address={ tx.from } isLoading={ isLoading } noIcon noCopy truncation="constant"/>
+          </Box>
+          <Box flexShrink={ 0 } color={ colors.cyan } opacity={ 0.7 }>
+            <IconSvg name="arrows/east" boxSize={ 3.5 }/>
+          </Box>
+          <Box minW={ 0 } flex={ 1 }>
+            { dataTo ? (
+              <AddressEntity address={ dataTo } isLoading={ isLoading } noIcon noCopy truncation="constant"/>
+            ) : (
+              <Text fontFamily={ fonts.sans } fontSize="11px" color={ text.muted }>-</Text>
+            ) }
+          </Box>
+        </Flex>
 
-        { /* Inference Column - Premium Styling */ }
-        <GridItem>
-          { hasInference ? (
-            <VStack align="flex-start" gap={ 2 }>
-              <Text
-                fontSize="10px"
+        <Box flex="0.9" minW={ 0 }>
+          { hasInference && inferenceInfo && !inferenceInfo.isLoading ? (
+            <HStack gap={ 1.5 } align="center">
+              <Box
+                px={ 2 }
+                py={ 0.5 }
+                borderRadius="999px"
+                bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.15)' }}
+                border="1px solid"
+                borderColor={{ _light: 'rgba(36, 188, 227, 0.35)', _dark: 'rgba(36, 188, 227, 0.4)' }}
+                color={ text.accent }
+                fontFamily={ fonts.mono }
+                fontSize="8px"
                 fontWeight={ 500 }
                 letterSpacing="0.08em"
                 textTransform="uppercase"
-                color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
               >
-                Inference
-              </Text>
-              { /* eslint-disable-next-line no-nested-ternary */ }
-              { inferenceInfo ? (
-                inferenceInfo.isLoading ? (
-                  <Text
-                    fontSize="11px"
-                    color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
-                  >
-                    Loading...
-                  </Text>
-                ) : (
-                  <>
-                    <HStack flexWrap="wrap" gap={ 1.5 }>
-                      <Badge
-                        colorPalette="purple"
-                        loading={ isLoading }
-                        fontSize="10px"
-                        fontWeight={ 500 }
-                        px={ 2 }
-                        py={ 0.5 }
-                        minH="6"
-                        fontFamily="system-ui, -apple-system, sans-serif"
-                        letterSpacing="0.02em"
-                      >
-                        { inferenceInfo.type || 'AI Inference' }
-                      </Badge>
-                    </HStack>
-                    { inferenceInfo.modelCID && (
-                      <Skeleton loading={ isLoading }>
-                        <Text
-                          fontSize="11px"
-                          color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                          fontFamily="system-ui, -apple-system, sans-serif"
-                          lineClamp={ 1 }
-                        >
-                          Model:{ ' ' }
-                          <Link
-                            href={ `https://walruscan.com/mainnet/blob/${ inferenceInfo.modelCID }` }
-                            external
-                            fontSize="11px"
-                            fontWeight={ 500 }
-                            fontFamily="mono"
-                            color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.7)' }}
-                            _hover={{
-                              textDecoration: 'underline',
-                              color: { _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.9)' },
-                            }}
-                          >
-                            { inferenceInfo.modelCID.slice(0, 8) }...
-                          </Link>
-                        </Text>
-                      </Skeleton>
-                    ) }
-                  </>
-                )
-              ) : (
-                <Text
+                { inferenceInfo.type || 'AI' }
+              </Box>
+              { inferenceInfo.modelCID && (
+                <Link
+                  href={ `https://walruscan.com/mainnet/blob/${ inferenceInfo.modelCID }` }
+                  external
+                  fontFamily={ fonts.mono }
                   fontSize="11px"
-                  color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
+                  color={ text.secondary }
+                  _hover={{ color: colors.cyan }}
                 >
-                  —
-                </Text>
+                  { inferenceInfo.modelCID.slice(0, 6) }...
+                </Link>
               ) }
-            </VStack>
+            </HStack>
           ) : (
-            <VStack align="flex-start" gap={ 1 }>
-              <Text
-                fontSize="10px"
-                fontWeight={ 500 }
-                letterSpacing="0.08em"
-                textTransform="uppercase"
-                color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
-              >
-                Inference
-              </Text>
-              <Text
-                fontSize="12px"
-                color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
-              >
-                No inference
-              </Text>
-            </VStack>
+            <Text
+              fontFamily={ fonts.sans }
+              fontSize="11px"
+              color={ text.muted }
+            >
+              -
+            </Text>
           ) }
-        </GridItem>
-      </Grid>
+        </Box>
+      </Flex>
     </LinkBox>
   );
 };
diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx
index 75dc7654fd..cfbf2f01fe 100644
--- a/ui/home/LatestTxsItemMobile.tsx
+++ b/ui/home/LatestTxsItemMobile.tsx
@@ -22,8 +22,11 @@ import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxType from 'ui/txs/TxType';
 
+import { HOME_BRAND } from './brand';
 import useInferenceType from './useInferenceType';
 
+const { fonts, text } = HOME_BRAND;
+
 type Props = {
   tx: Transaction;
   isLoading?: boolean;
@@ -43,14 +46,15 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
       px={ 4 }
       transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
       position="relative"
+      borderRadius="6px"
       _hover={{
-        bg: { _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(64, 209, 219, 0.05)' },
+        bg: { _light: 'rgba(36, 188, 227, 0.05)', _dark: 'rgba(36, 188, 227, 0.06)' },
+        boxShadow: { _light: 'inset 0 0 0 1px rgba(36, 188, 227, 0.18)', _dark: 'inset 0 0 0 1px rgba(36, 188, 227, 0.22)' },
       }}
       display={{ base: 'block', lg: 'none' }}
     >
       <LinkOverlay href={ txUrl } noIcon/>
       <VStack align="stretch" gap={ 3 }>
-        { /* Header: Hash & Time */ }
         <Flex
           alignItems="center"
           width="100%"
@@ -62,8 +66,8 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
             hash={ tx.hash }
             fontWeight={ 500 }
             fontSize="sm"
-            fontFamily="system-ui, -apple-system, sans-serif"
-            color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
+            fontFamily={ fonts.mono }
+            color={ text.primary }
             truncation="dynamic"
             tailLength={ 8 }
             noIcon
@@ -72,15 +76,14 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
             timestamp={ tx.timestamp }
             enableIncrement
             isLoading={ isLoading }
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
+            color={ text.muted }
             fontSize="11px"
             fontWeight={ 400 }
-            fontFamily="system-ui, -apple-system, sans-serif"
+            fontFamily={ fonts.mono }
             flexShrink={ 0 }
           />
         </Flex>
 
-        { /* Badges Row */ }
         <HStack flexWrap="wrap" gap={ 1.5 }>
           <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
           { tx.status !== 'error' && (
@@ -96,8 +99,8 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
                 px={ 2 }
                 py={ 0.5 }
                 minH="6"
-                fontFamily="system-ui, -apple-system, sans-serif"
-                letterSpacing="0.02em"
+                fontFamily={ fonts.mono }
+                letterSpacing="0.08em"
               >
                 { inferenceInfo?.type || 'AI Inference' }
               </Badge>
@@ -110,8 +113,8 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
                   px={ 2 }
                   py={ 0.5 }
                   minH="6"
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  letterSpacing="0.02em"
+                  fontFamily={ fonts.mono }
+                  letterSpacing="0.08em"
                 >
                   { inferenceInfo.mode }
                 </Badge>
@@ -121,22 +124,21 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </HStack>
 
-        { /* Addresses Section */ }
         <Box>
           <Text
             fontSize="10px"
             fontWeight={ 500 }
             letterSpacing="0.08em"
             textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.muted }
+            fontFamily={ fonts.mono }
             mb={ 1.5 }
           >
             Addresses
           </Text>
           <Box
             fontSize="12px"
-            fontFamily="system-ui, -apple-system, sans-serif"
+            fontFamily={ fonts.sans }
           >
             <AddressFromTo
               from={ tx.from }
@@ -148,7 +150,6 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
           </Box>
         </Box>
 
-        { /* Inference Details */ }
         { hasInference && (
           <Box>
             <Text
@@ -156,8 +157,8 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
               fontWeight={ 500 }
               letterSpacing="0.08em"
               textTransform="uppercase"
-              color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
+              color={ text.muted }
+              fontFamily={ fonts.mono }
               mb={ 1.5 }
             >
               AI Inference
@@ -165,17 +166,17 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
             { !inferenceInfo && (
               <Text
                 fontSize="11px"
-                color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                color={ text.muted }
+                fontFamily={ fonts.sans }
               >
-                —
+                -
               </Text>
             ) }
             { inferenceInfo && inferenceInfo.isLoading && (
               <Text
                 fontSize="11px"
-                color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                color={ text.muted }
+                fontFamily={ fonts.sans }
               >
                 Loading...
               </Text>
@@ -184,8 +185,8 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
               <Skeleton loading={ isLoading }>
                 <Flex
                   fontSize="11px"
-                  color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
+                  color={ text.secondary }
+                  fontFamily={ fonts.sans }
                   alignItems="baseline"
                   gap={ 1 }
                 >
@@ -196,10 +197,10 @@ const LatestTxsItemMobile = ({ tx, isLoading }: Props) => {
                     fontSize="11px"
                     fontWeight={ 500 }
                     fontFamily="mono"
-                    color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.7)' }}
+                    color={ text.secondary }
                     _hover={{
                       textDecoration: 'underline',
-                      color: { _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.9)' },
+                      color: text.accent,
                     }}
                     lineClamp={ 1 }
                   >
diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx
index be42756d8b..4c495afcf3 100644
--- a/ui/home/Stats.tsx
+++ b/ui/home/Stats.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { getAllTasks } from 'lib/opengradient/contracts/scheduler';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
@@ -12,15 +11,17 @@ import { LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 
-const isStatsFeatureEnabled = config.features.stats.isEnabled;
+import { HOME_BRAND } from './brand';
+import isStatsMicroserviceEnabled from './utils/isStatsMicroserviceEnabled';
+
+const { fonts, text } = HOME_BRAND;
 
 const Stats = () => {
-  // Fetch stats data
   const statsQuery = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      placeholderData: isStatsFeatureEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
-      enabled: isStatsFeatureEnabled,
+      placeholderData: isStatsMicroserviceEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
+      enabled: isStatsMicroserviceEnabled,
     },
   });
 
@@ -31,19 +32,15 @@ const Stats = () => {
     },
   });
 
-  const isPlaceholderData = statsQuery.isPlaceholderData || apiQuery.isPlaceholderData;
-
-  // Fetch active AI workflows
   const workflowsQuery = useQuery({
     queryKey: [ 'opengradient', 'getAllTasks' ],
     queryFn: getAllTasks,
     refetchOnMount: false,
   });
 
-  // Get total transactions from either microservice or regular API
   const totalTransactions = React.useMemo(() => {
-    const statsData = statsQuery.data;
-    const apiData = apiQuery.data;
+    const statsData = statsQuery.isPlaceholderData ? undefined : statsQuery.data;
+    const apiData = apiQuery.isPlaceholderData ? undefined : apiQuery.data;
 
     if (statsData?.total_transactions?.value) {
       return Number(statsData.total_transactions.value);
@@ -54,19 +51,17 @@ const Stats = () => {
     }
 
     return null;
-  }, [ statsQuery.data, apiQuery.data ]);
+  }, [ statsQuery.data, statsQuery.isPlaceholderData, apiQuery.data, apiQuery.isPlaceholderData ]);
 
-  // Calculate active AI workflows count
   const activeWorkflowsCount = React.useMemo(() => {
     const tasks = workflowsQuery.data ?? [];
     const now = BigInt(Math.floor(Date.now() / 1000));
     return tasks.filter((t) => t.endTime > now).length;
   }, [ workflowsQuery.data ]);
 
-  // Format number with compact notation
   const formatTransactionCount = (count: number | null): string => {
     if (count === null) {
-      return '—';
+      return '-';
     }
 
     if (count >= 1_000_000) {
@@ -90,7 +85,7 @@ const Stats = () => {
     {
       label: 'Transactions',
       value: formatTransactionCount(totalTransactions),
-      isLoading: isPlaceholderData,
+      isLoading: totalTransactions === null && (statsQuery.isPending || apiQuery.isPending),
       href: route({ pathname: '/txs' }),
       external: false,
     },
@@ -128,10 +123,10 @@ const Stats = () => {
               <Text
                 fontSize={{ base: '10px', lg: '11px' }}
                 fontWeight={ 500 }
-                letterSpacing="0.05em"
+                letterSpacing="0.16em"
                 textTransform="uppercase"
-                color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                color={ text.accent }
+                fontFamily={ fonts.mono }
               >
                 { metric.label }
               </Text>
@@ -139,7 +134,7 @@ const Stats = () => {
                 <IconSvg
                   name={ metric.external ? 'link_external' : 'link' }
                   boxSize={ 3 }
-                  color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
+                  color={ text.accent }
                 />
               ) }
             </Flex>
@@ -149,11 +144,11 @@ const Stats = () => {
             >
               <Text
                 fontSize={{ base: '24px', lg: '36px' }}
-                fontWeight={ 300 }
-                letterSpacing="-0.02em"
-                color={{ _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.95)' }}
+                fontWeight={ 500 }
+                letterSpacing="0"
+                color={ text.primary }
                 lineHeight="1.1"
-                fontFamily="system-ui, -apple-system, sans-serif"
+                fontFamily={ fonts.mono }
               >
                 { metric.value }
               </Text>
@@ -165,7 +160,7 @@ const Stats = () => {
           p: { base: 3, lg: 4 },
           borderBottom: { base: !isLastItem ? '1px solid' : 'none', md: !isLastRow ? '1px solid' : 'none' },
           borderRight: { base: 'none', md: isEvenIndex && !isLastItem ? '1px solid' : 'none' },
-          borderColor: { _light: 'rgba(0, 0, 0, 0.06)', _dark: 'rgba(255, 255, 255, 0.08)' },
+          borderColor: { _light: 'rgba(36, 188, 227, 0.15)', _dark: 'rgba(36, 188, 227, 0.10)' },
         };
 
         if (metric.href) {
diff --git a/ui/home/Transactions.tsx b/ui/home/Transactions.tsx
index f5b720b648..d4b3d1f259 100644
--- a/ui/home/Transactions.tsx
+++ b/ui/home/Transactions.tsx
@@ -9,9 +9,11 @@ import LatestTxs from 'ui/home/LatestTxs';
 import LatestWatchlistTxs from 'ui/home/LatestWatchlistTxs';
 import useAuth from 'ui/snippets/auth/useIsAuth';
 
+import { HOME_BRAND } from './brand';
 import LatestArbitrumDeposits from './latestDeposits/LatestArbitrumDeposits';
 
 const rollupFeature = config.features.rollup;
+const { fonts, text } = HOME_BRAND;
 
 const TransactionsHome = () => {
   const isAuth = useAuth();
@@ -19,9 +21,9 @@ const TransactionsHome = () => {
     const tabs = [
       { id: 'txn', title: 'Latest txn', component: <LatestTxs/> },
       rollupFeature.isEnabled && rollupFeature.type === 'optimistic' &&
-        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestOptimisticDeposits/> },
+        { id: 'deposits', title: 'Deposits (L1 -> L2 txn)', component: <LatestOptimisticDeposits/> },
       rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
-        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestArbitrumDeposits/> },
+        { id: 'deposits', title: 'Deposits (L1 -> L2 txn)', component: <LatestArbitrumDeposits/> },
       isAuth && { id: 'watchlist', title: 'Watch list', component: <LatestWatchlistTxs/> },
     ].filter(Boolean);
     return (
@@ -31,7 +33,9 @@ const TransactionsHome = () => {
             level="3"
             fontSize={{ base: 'xl', lg: '2xl' }}
             fontWeight={ 700 }
-            letterSpacing="-0.02em"
+            letterSpacing="0"
+            color={ text.primary }
+            fontFamily={ fonts.sans }
             mb={ 4 }
           >
             Transactions
diff --git a/ui/home/brand.ts b/ui/home/brand.ts
new file mode 100644
index 0000000000..0a11fde6e5
--- /dev/null
+++ b/ui/home/brand.ts
@@ -0,0 +1,30 @@
+export const HOME_BRAND = {
+  fonts: {
+    sans: '"Geist", system-ui, -apple-system, sans-serif',
+    mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  },
+  colors: {
+    cyan: '#24bce3',
+    cyanSoft: '#bdebf7',
+    cyanBright: '#50c9e9',
+    teal: '#0e4b5b',
+    tealMid: '#1d96b6',
+    navy: '#0a0f19',
+    navySoft: '#0f1626',
+    slate: '#314a7d',
+  },
+  panel: {
+    bg: { _light: 'rgba(255, 255, 255, 0.82)', _dark: 'rgba(10, 15, 25, 0.72)' },
+    border: { _light: 'rgba(36, 188, 227, 0.16)', _dark: 'rgba(189, 235, 247, 0.12)' },
+    shadow: {
+      _light: '0 14px 44px rgba(14, 75, 91, 0.08)',
+      _dark: '0 22px 70px rgba(0, 0, 0, 0.28)',
+    },
+  },
+  text: {
+    primary: { _light: '#0e4b5b', _dark: 'rgba(255, 255, 255, 0.94)' },
+    secondary: { _light: '#314a7d', _dark: 'rgba(189, 235, 247, 0.58)' },
+    muted: { _light: 'rgba(14, 75, 91, 0.50)', _dark: 'rgba(189, 235, 247, 0.42)' },
+    accent: { _light: '#1d96b6', _dark: '#50c9e9' },
+  },
+} as const;
diff --git a/ui/home/indicators/ChainIndicatorChartContent.tsx b/ui/home/indicators/ChainIndicatorChartContent.tsx
index 867708a2af..4bfe51a259 100644
--- a/ui/home/indicators/ChainIndicatorChartContent.tsx
+++ b/ui/home/indicators/ChainIndicatorChartContent.tsx
@@ -22,14 +22,13 @@ const CHART_MARGIN = { bottom: 0, left: 0, right: 0, top: 0 };
 const ChainIndicatorChartContent = ({ data, isEmpty = false }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
 
-  // Use subtle colors matching the design system
   const lineColor = useColorModeValue(
-    'rgba(79, 172, 254, 0.5)',
-    'rgba(96, 165, 250, 0.5)',
+    'rgba(29, 150, 182, 0.78)',
+    'rgba(80, 201, 233, 0.78)',
   );
   const areaColor = useColorModeValue(
-    'rgba(79, 172, 254, 0.15)',
-    'rgba(96, 165, 250, 0.15)',
+    'rgba(36, 188, 227, 0.22)',
+    'rgba(36, 188, 227, 0.18)',
   );
 
   const axesConfig = React.useMemo(() => {
@@ -47,7 +46,6 @@ const ChainIndicatorChartContent = ({ data, isEmpty = false }: Props) => {
 
   const hasData = !isEmpty && data[0]?.items.length > 0;
 
-  // For ghost chart, render a flat line at the baseline (0 or middle of domain)
   const ghostLineY = React.useMemo(() => {
     if (!isEmpty) return null;
     const domain = axes.y.scale.domain();
@@ -58,7 +56,6 @@ const ChainIndicatorChartContent = ({ data, isEmpty = false }: Props) => {
   return (
     <svg width="100%" height="100%" ref={ ref } style={{ overflow: 'visible' }}>
       <g transform={ `translate(${ chartMargin.left || 0 },${ chartMargin.top || 0 })` } opacity={ rect ? 1 : 0 }>
-        { /* Always render grid lines and axes (ghost chart) */ }
         <ChartGridLine
           type="horizontal"
           scale={ axes.y.scale }
@@ -79,7 +76,6 @@ const ChainIndicatorChartContent = ({ data, isEmpty = false }: Props) => {
           ticks={ 0 }
           noAnimation
         />
-        { /* Render flat line for ghost chart */ }
         { isEmpty && ghostLineY !== null && (
           <line
             x1={ 0 }
@@ -91,7 +87,6 @@ const ChainIndicatorChartContent = ({ data, isEmpty = false }: Props) => {
             opacity={ 0.5 }
           />
         ) }
-        { /* Only render data visualization if there's actual data */ }
         { hasData && (
           <>
             <ChartArea
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
index 15a782d9f8..48309a2efe 100644
--- a/ui/home/indicators/ChainIndicators.tsx
+++ b/ui/home/indicators/ChainIndicators.tsx
@@ -11,12 +11,14 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import Hint from 'ui/shared/Hint';
 import IconSvg from 'ui/shared/IconSvg';
 
+import { HOME_BRAND } from '../brand';
+import isStatsMicroserviceEnabled from '../utils/isStatsMicroserviceEnabled';
 import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
 import useChartDataQuery from './useChartDataQuery';
 import getIndicatorValues from './utils/getIndicatorValues';
 import INDICATORS from './utils/indicators';
 
-const isStatsFeatureEnabled = config.features.stats.isEnabled;
+const { colors, fonts, panel, text } = HOME_BRAND;
 
 const indicators = INDICATORS
   .filter(({ id }) => config.UI.homepage.charts.includes(id))
@@ -41,7 +43,7 @@ const ChainIndicators = () => {
   const statsMicroserviceQueryResult = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      enabled: isStatsFeatureEnabled,
+      enabled: isStatsMicroserviceEnabled,
       placeholderData: HOMEPAGE_STATS_MICROSERVICE,
     },
   });
@@ -64,16 +66,20 @@ const ChainIndicators = () => {
     return null;
   }
 
-  const isPlaceholderData = (isStatsFeatureEnabled && statsMicroserviceQueryResult.isPlaceholderData) || statsApiQueryResult.isPlaceholderData;
-  const hasData = Boolean(statsApiQueryResult?.data || statsMicroserviceQueryResult?.data);
+  const statsMicroserviceData = isStatsMicroserviceEnabled && !statsMicroserviceQueryResult.isPlaceholderData ?
+    statsMicroserviceQueryResult.data :
+    undefined;
+  const statsApiData = !statsApiQueryResult.isPlaceholderData ? statsApiQueryResult.data : undefined;
+  const isLoading = !statsMicroserviceData && !statsApiData && (statsMicroserviceQueryResult.isPending || statsApiQueryResult.isPending);
+  const hasData = Boolean(statsApiData || statsMicroserviceData);
 
   const { value: indicatorValue, valueDiff: indicatorValueDiff } =
-    getIndicatorValues(selectedIndicatorData as TChainIndicator, statsMicroserviceQueryResult?.data, statsApiQueryResult?.data);
+    getIndicatorValues(selectedIndicatorData as TChainIndicator, statsMicroserviceData, statsApiData);
 
   const title = (() => {
     let title: string | undefined;
-    if (isStatsFeatureEnabled && selectedIndicatorData?.titleMicroservice && statsMicroserviceQueryResult?.data) {
-      title = selectedIndicatorData.titleMicroservice(statsMicroserviceQueryResult.data);
+    if (isStatsMicroserviceEnabled && selectedIndicatorData?.titleMicroservice && statsMicroserviceData) {
+      title = selectedIndicatorData.titleMicroservice(statsMicroserviceData);
     }
 
     return title || selectedIndicatorData?.title;
@@ -81,30 +87,30 @@ const ChainIndicators = () => {
 
   const hint = (() => {
     let hint: string | undefined;
-    if (isStatsFeatureEnabled && selectedIndicatorData?.hintMicroservice && statsMicroserviceQueryResult?.data) {
-      hint = selectedIndicatorData.hintMicroservice(statsMicroserviceQueryResult.data);
+    if (isStatsMicroserviceEnabled && selectedIndicatorData?.hintMicroservice && statsMicroserviceData) {
+      hint = selectedIndicatorData.hintMicroservice(statsMicroserviceData);
     }
 
     return hint || selectedIndicatorData?.hint;
   })();
 
   const valueTitle = (() => {
-    if (isPlaceholderData) {
+    if (isLoading) {
       return <Skeleton loading h={{ base: '18px', lg: '24px' }} w="fit-content"/>;
     }
 
     if (!hasData) {
-      return <Text fontSize={{ base: '18px', lg: '24px' }} fontWeight={ 300 }>—</Text>;
+      return <Text fontSize={{ base: '22px', lg: '30px' }} fontWeight={ 500 } fontFamily={ fonts.mono } color={ text.primary }>-</Text>;
     }
 
     return (
       <Text
-        fontSize={{ base: '18px', lg: '24px' }}
-        fontWeight={ 300 }
-        letterSpacing="-0.02em"
-        color={{ _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.95)' }}
+        fontSize={{ base: '22px', lg: '30px' }}
+        fontWeight={ 500 }
+        letterSpacing="0"
+        color={ text.primary }
         lineHeight="1.1"
-        fontFamily="system-ui, -apple-system, sans-serif"
+        fontFamily={ fonts.mono }
       >
         { indicatorValue }
       </Text>
@@ -117,12 +123,12 @@ const ChainIndicators = () => {
     }
 
     const diffColor = indicatorValueDiff >= 0 ?
-      { _light: 'rgba(34, 197, 94, 0.8)', _dark: 'rgba(74, 222, 128, 0.8)' } :
-      { _light: 'rgba(239, 68, 68, 0.8)', _dark: 'rgba(248, 113, 113, 0.8)' };
+      { _light: '#2e9e66', _dark: '#61d199' } :
+      { _light: '#bf0d0d', _dark: '#f66f6f' };
 
     return (
       <Skeleton
-        loading={ statsApiQueryResult.isPlaceholderData }
+        loading={ isLoading }
         display="flex"
         alignItems="center"
         ml={ 2 }
@@ -138,6 +144,7 @@ const ChainIndicators = () => {
           fontSize="xs"
           fontWeight={ 500 }
           color={ diffColor }
+          fontFamily={ fonts.mono }
         >
           { Math.abs(indicatorValueDiff) }%
         </Text>
@@ -145,9 +152,8 @@ const ChainIndicators = () => {
     );
   })();
 
-  // Create a grid layout similar to Stats.tsx
   const gridItems = indicators.map((indicator) => {
-    const { value, valueDiff: diff } = getIndicatorValues(indicator, statsMicroserviceQueryResult?.data, statsApiQueryResult?.data);
+    const { value, valueDiff: diff } = getIndicatorValues(indicator, statsMicroserviceData, statsApiData);
     const isSelected = selectedIndicator === indicator.id;
 
     return {
@@ -161,40 +167,58 @@ const ChainIndicators = () => {
   });
 
   return (
-    <Box w="100%">
-      { /* Main selected indicator display */ }
+    <Box
+      w="100%"
+      border="1px solid"
+      borderColor={ panel.border }
+      borderRadius="8px"
+      bg={ panel.bg }
+      boxShadow={ panel.shadow }
+      backdropFilter="blur(18px)"
+      overflow="hidden"
+    >
       <Box
-        p={{ base: 3, lg: 4 }}
+        p={{ base: 4, lg: 4 }}
         borderBottom="1px solid"
-        borderColor={{ _light: 'rgba(0, 0, 0, 0.06)', _dark: 'rgba(255, 255, 255, 0.08)' }}
+        borderColor={ panel.border }
+        position="relative"
       >
         <Flex
           alignItems="center"
-          gap={ 1.5 }
+          gap={ 2 }
           mb={{ base: 2, lg: 3 }}
+          position="relative"
+          zIndex={ 1 }
         >
+          <Box
+            w="6px"
+            h="6px"
+            borderRadius="50%"
+            bg={ colors.cyan }
+            boxShadow="0 0 10px rgba(36, 188, 227, 0.65)"
+            flexShrink={ 0 }
+          />
           <Text
             fontSize="11px"
             fontWeight={ 500 }
-            letterSpacing="0.1em"
+            letterSpacing="0.12em"
             textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.accent }
+            fontFamily={ fonts.mono }
           >
-            { title }
+            / { title }
           </Text>
           { hint && <Hint label={ hint }/> }
         </Flex>
-        <Flex mb={{ base: 2, lg: 3 }} alignItems="end">
+        <Flex mb={ 3 } alignItems="end" position="relative" zIndex={ 1 }>
           { valueTitle }
           { valueDiff }
         </Flex>
-        <Box h={{ base: '60px', lg: '80px' }} w="100%">
+        <Box h={{ base: '78px', lg: '92px' }} w="100%" position="relative" zIndex={ 1 }>
           <ChainIndicatorChartContainer { ...queryResult }/>
         </Box>
       </Box>
 
-      { /* Indicator selector grid */ }
       { indicators.length > 1 && (
         <Grid
           gridTemplateColumns={{ base: '1fr', md: `repeat(${ Math.min(indicators.length, 2) }, 1fr)` }}
@@ -211,8 +235,9 @@ const ChainIndicators = () => {
                 return (
                   <Text
                     fontSize="sm"
-                    fontWeight={ 300 }
-                    color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
+                    fontWeight={ 500 }
+                    color={ text.muted }
+                    fontFamily={ fonts.mono }
                   >
                     no data
                   </Text>
@@ -220,11 +245,12 @@ const ChainIndicators = () => {
               }
 
               return (
-                <Skeleton loading={ isPlaceholderData } w="fit-content">
+                <Skeleton loading={ isLoading } w="fit-content">
                   <Text
                     fontSize="sm"
-                    fontWeight={ 300 }
-                    color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.7)' }}
+                    fontWeight={ 500 }
+                    color={ text.secondary }
+                    fontFamily={ fonts.mono }
                   >
                     { item.value }
                   </Text>
@@ -238,11 +264,11 @@ const ChainIndicators = () => {
               }
 
               const diffColor = item.valueDiff >= 0 ?
-                { _light: 'rgba(34, 197, 94, 0.7)', _dark: 'rgba(74, 222, 128, 0.7)' } :
-                { _light: 'rgba(239, 68, 68, 0.7)', _dark: 'rgba(248, 113, 113, 0.7)' };
+                { _light: '#2e9e66', _dark: '#61d199' } :
+                { _light: '#bf0d0d', _dark: '#f66f6f' };
 
               return (
-                <Skeleton loading={ isPlaceholderData } display="flex" alignItems="center" ml={ 1 }>
+                <Skeleton loading={ isLoading } display="flex" alignItems="center" ml={ 1 }>
                   <IconSvg
                     name="arrows/up-head"
                     boxSize={ 2.5 }
@@ -254,6 +280,7 @@ const ChainIndicators = () => {
                     fontSize="xs"
                     fontWeight={ 500 }
                     color={ diffColor }
+                    fontFamily={ fonts.mono }
                   >
                     { Math.abs(item.valueDiff) }%
                   </Text>
@@ -265,15 +292,15 @@ const ChainIndicators = () => {
               <Box
                 key={ item.id }
                 data-indicator-id={ item.id }
-                p={{ base: 3, lg: 4 }}
+                p={ 3 }
                 borderBottom={{ base: !isLastItem ? '1px solid' : 'none', md: !isLastRow ? '1px solid' : 'none' }}
                 borderRight={{ base: 'none', md: isEvenIndex && !isLastItem ? '1px solid' : 'none' }}
-                borderColor={{ _light: 'rgba(0, 0, 0, 0.06)', _dark: 'rgba(255, 255, 255, 0.08)' }}
+                borderColor={ panel.border }
                 cursor="pointer"
-                transition="background-color 0.2s ease"
-                bgColor={ item.isSelected ? { _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(255, 255, 255, 0.03)' } : undefined }
+                transition="background-color 0.2s ease, color 0.2s ease"
+                bgColor={ item.isSelected ? { _light: 'rgba(36, 188, 227, 0.07)', _dark: 'rgba(36, 188, 227, 0.10)' } : undefined }
                 _hover={{
-                  bgColor: { _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(255, 255, 255, 0.03)' },
+                  bgColor: { _light: 'rgba(36, 188, 227, 0.07)', _dark: 'rgba(36, 188, 227, 0.10)' },
                 }}
                 onClick={ handleIndicatorClick }
               >
@@ -284,10 +311,10 @@ const ChainIndicators = () => {
                   <Text
                     fontSize="10px"
                     fontWeight={ 500 }
-                    letterSpacing="0.08em"
+                    letterSpacing="0.10em"
                     textTransform="uppercase"
-                    color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
+                    color={ item.isSelected ? text.accent : text.muted }
+                    fontFamily={ fonts.mono }
                   >
                     { item.label }
                   </Text>
diff --git a/ui/home/indicators/useChartDataQuery.tsx b/ui/home/indicators/useChartDataQuery.tsx
index e30d01126e..32abe762fe 100644
--- a/ui/home/indicators/useChartDataQuery.tsx
+++ b/ui/home/indicators/useChartDataQuery.tsx
@@ -4,6 +4,7 @@ import type { TimeChartData, TimeChartDataItem, TimeChartItemRaw } from 'ui/shar
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 
+import isStatsMicroserviceEnabled from '../utils/isStatsMicroserviceEnabled';
 import prepareChartItems from './utils/prepareChartItems';
 
 const CHART_ITEMS: Record<ChainIndicatorId, Pick<TimeChartDataItem, 'name' | 'valueFormatter'>> = {
@@ -33,8 +34,6 @@ const CHART_ITEMS: Record<ChainIndicatorId, Pick<TimeChartDataItem, 'name' | 'va
   },
 };
 
-const isStatsFeatureEnabled = config.features.stats.isEnabled;
-
 type UseFetchChartDataResult = {
   isError: boolean;
   isPending: boolean;
@@ -53,7 +52,7 @@ export default function useChartDataQuery(indicatorId: ChainIndicatorId): UseFet
   const statsDailyTxsQuery = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      enabled: isStatsFeatureEnabled && indicatorId === 'daily_txs',
+      enabled: isStatsMicroserviceEnabled && indicatorId === 'daily_txs',
       select: (data) => data.daily_new_transactions?.chart.map((item) => ({ date: new Date(item.date), value: Number(item.value) })) || [],
     },
   });
@@ -61,7 +60,7 @@ export default function useChartDataQuery(indicatorId: ChainIndicatorId): UseFet
   const statsDailyOperationalTxsQuery = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      enabled: isStatsFeatureEnabled && indicatorId === 'daily_operational_txs',
+      enabled: isStatsMicroserviceEnabled && indicatorId === 'daily_operational_txs',
       select: (data) => data.daily_new_operational_transactions?.chart.map((item) => ({ date: new Date(item.date), value: Number(item.value) })) || [],
     },
   });
@@ -69,7 +68,7 @@ export default function useChartDataQuery(indicatorId: ChainIndicatorId): UseFet
   const apiDailyTxsQuery = useApiQuery('stats_charts_txs', {
     queryOptions: {
       refetchOnMount: false,
-      enabled: !isStatsFeatureEnabled && indicatorId === 'daily_txs',
+      enabled: indicatorId === 'daily_txs',
       select: (data) => data.chart_data.map((item) => ({ date: new Date(item.date), value: item.transaction_count })),
     },
   });
@@ -126,11 +125,14 @@ export default function useChartDataQuery(indicatorId: ChainIndicatorId): UseFet
 
   switch (indicatorId) {
     case 'daily_txs': {
-      const query = isStatsFeatureEnabled ? statsDailyTxsQuery : apiDailyTxsQuery;
+      const statsMicroserviceData = isStatsMicroserviceEnabled && !statsDailyTxsQuery.isPlaceholderData ?
+        statsDailyTxsQuery.data :
+        undefined;
+      const data = statsMicroserviceData?.length ? statsMicroserviceData : apiDailyTxsQuery.data || [];
       return {
-        data: getChartData(indicatorId, query.data || []),
-        isError: query.isError,
-        isPending: query.isPending,
+        data: getChartData(indicatorId, data),
+        isError: apiDailyTxsQuery.isError && (!isStatsMicroserviceEnabled || statsDailyTxsQuery.isError),
+        isPending: !data.length && (statsDailyTxsQuery.isPending || apiDailyTxsQuery.isPending),
       };
     }
     case 'daily_operational_txs': {
diff --git a/ui/home/utils/isStatsMicroserviceEnabled.ts b/ui/home/utils/isStatsMicroserviceEnabled.ts
new file mode 100644
index 0000000000..dde9a27b88
--- /dev/null
+++ b/ui/home/utils/isStatsMicroserviceEnabled.ts
@@ -0,0 +1,11 @@
+import { getFeaturePayload } from 'configs/app/features/types';
+
+import config from 'configs/app';
+
+const statsFeature = getFeaturePayload(config.features.stats);
+
+const isStatsMicroserviceEnabled = Boolean(
+  statsFeature && (statsFeature.api.endpoint !== config.api.endpoint || statsFeature.api.basePath),
+);
+
+export default isStatsMicroserviceEnabled;
diff --git a/ui/opengradient/brand.ts b/ui/opengradient/brand.ts
new file mode 100644
index 0000000000..abfde6d4ad
--- /dev/null
+++ b/ui/opengradient/brand.ts
@@ -0,0 +1 @@
+export { HOME_BRAND as OPENGRADIENT_BRAND } from 'ui/home/brand';
diff --git a/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx b/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx
index c842641f37..9c3c890fb6 100644
--- a/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx
+++ b/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import dayjs from 'lib/date/dayjs';
 import type { TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
 import { DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerHeader, DrawerRoot, DrawerTitle } from 'toolkit/chakra/drawer';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
@@ -13,19 +14,21 @@ type Props = {
   onClose: () => void;
 };
 
+const { colors, fonts, panel, text } = OPENGRADIENT_BRAND;
+
 const DetailRow = ({ label, children }: { label: string; children: React.ReactNode }) => (
   <Box
     py={ 3 }
     borderBottom="1px solid"
-    borderColor={{ _light: 'rgba(0, 0, 0, 0.04)', _dark: 'rgba(255, 255, 255, 0.04)' }}
+    borderColor={ panel.border }
   >
     <Text
       fontSize="10px"
-      fontWeight={ 600 }
+      fontWeight={ 500 }
       textTransform="uppercase"
       letterSpacing="0.08em"
-      color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-      fontFamily="system-ui, -apple-system, sans-serif"
+      color={ text.muted }
+      fontFamily={ fonts.mono }
       mb={ 1 }
     >
       { label }
@@ -35,15 +38,15 @@ const DetailRow = ({ label, children }: { label: string; children: React.ReactNo
 );
 
 function getStatusBg(isActive: boolean, enabled: boolean) {
-  if (isActive) return 'green.500';
-  if (enabled) return 'orange.400';
-  return 'gray.400';
+  if (isActive) return '#61d199';
+  if (enabled) return '#d6a33d';
+  return '#708195';
 }
 
 function getStatusColor(isActive: boolean, enabled: boolean) {
-  if (isActive) return { _light: 'rgba(22, 163, 74, 0.9)', _dark: 'rgba(34, 197, 94, 0.95)' };
-  if (enabled) return { _light: 'rgba(217, 119, 6, 0.8)', _dark: 'rgba(245, 158, 11, 0.9)' };
-  return { _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' };
+  if (isActive) return { _light: '#23824f', _dark: '#61d199' };
+  if (enabled) return { _light: '#9d6d10', _dark: '#d6a33d' };
+  return text.muted;
 }
 
 function getStatusLabel(isActive: boolean, enabled: boolean) {
@@ -73,7 +76,11 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
   return (
     <DrawerRoot open={ true } onOpenChange={ handleOpenChange } placement="end" size="lg">
       <DrawerBackdrop/>
-      <DrawerContent>
+      <DrawerContent
+        bg={{ _light: '#ffffff', _dark: '#0a0f19' }}
+        borderLeft="1px solid"
+        borderColor={ panel.border }
+      >
         <DrawerCloseTrigger/>
         <DrawerHeader>
           <DrawerTitle>
@@ -82,8 +89,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                 <Text
                   fontSize="lg"
                   fontWeight={ 600 }
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  color={{ _light: 'rgba(0, 0, 0, 0.9)', _dark: 'rgba(255, 255, 255, 0.95)' }}
+                  fontFamily={ fonts.sans }
+                  color={ text.primary }
                 >
                   TEE Node Details
                 </Text>
@@ -100,7 +107,7 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                     fontSize="xs"
                     fontWeight={ 500 }
                     color={ getStatusColor(node.isActive, node.enabled) }
-                    fontFamily="system-ui, -apple-system, sans-serif"
+                    fontFamily={ fonts.mono }
                   >
                     { getStatusLabel(node.isActive, node.enabled) }
                   </Text>
@@ -109,10 +116,10 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                     fontWeight={ 500 }
                     px={ 2 }
                     py={ 0.5 }
-                    borderRadius="sm"
-                    bg={{ _light: 'rgba(124, 58, 237, 0.06)', _dark: 'rgba(139, 92, 246, 0.1)' }}
-                    color={{ _light: 'rgba(124, 58, 237, 0.8)', _dark: 'rgba(139, 92, 246, 0.9)' }}
-                    fontFamily="system-ui, -apple-system, sans-serif"
+                    borderRadius="6px"
+                    bg={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.13)' }}
+                    color={ text.accent }
+                    fontFamily={ fonts.mono }
                   >
                     { typeName }
                   </Text>
@@ -128,8 +135,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <Flex alignItems="center" gap={ 2 }>
                 <Text
                   fontSize="xs"
-                  fontFamily="mono"
-                  color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
+                  fontFamily={ fonts.mono }
+                  color={ text.secondary }
                   wordBreak="break-all"
                 >
                   { node.teeId }
@@ -158,8 +165,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
             <DetailRow label="Endpoint">
               <Text
                 fontSize="sm"
-                fontFamily="mono"
-                color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
+                fontFamily={ fonts.mono }
+                color={ text.secondary }
                 wordBreak="break-all"
               >
                 { node.endpoint || 'N/A' }
@@ -171,8 +178,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <Flex alignItems="center" gap={ 2 }>
                 <Text
                   fontSize="xs"
-                  fontFamily="mono"
-                  color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
+                  fontFamily={ fonts.mono }
+                  color={ text.secondary }
                   wordBreak="break-all"
                 >
                   { node.pcrHash }
@@ -186,8 +193,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <Flex alignItems="center" gap={ 2 }>
                 <Text
                   fontSize="xs"
-                  fontFamily="mono"
-                  color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
+                  fontFamily={ fonts.mono }
+                  color={ text.secondary }
                 >
                   { truncateBytes(node.publicKey, 40) }
                 </Text>
@@ -200,8 +207,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <Flex alignItems="center" gap={ 2 }>
                 <Text
                   fontSize="xs"
-                  fontFamily="mono"
-                  color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
+                  fontFamily={ fonts.mono }
+                  color={ text.secondary }
                 >
                   { truncateBytes(node.tlsCertificate, 40) }
                 </Text>
@@ -213,8 +220,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
             <DetailRow label="Registered">
               <Text
                 fontSize="sm"
-                color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                color={ text.secondary }
+                fontFamily={ fonts.sans }
               >
                 { formatTimestamp(node.registeredAt) }
               </Text>
@@ -224,8 +231,8 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <Flex alignItems="center" gap={ 2 }>
                 <Text
                   fontSize="sm"
-                  color={{ _light: 'rgba(0, 0, 0, 0.7)', _dark: 'rgba(255, 255, 255, 0.75)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
+                  color={ text.secondary }
+                  fontFamily={ fonts.sans }
                 >
                   { formatTimestamp(node.lastHeartbeatAt) }
                 </Text>
@@ -234,7 +241,7 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                     w="6px"
                     h="6px"
                     borderRadius="50%"
-                    bg="green.500"
+                    bgColor={ colors.cyan }
                     boxShadow="0 0 4px rgba(34, 197, 94, 0.5)"
                   />
                 ) }
@@ -245,11 +252,11 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
             <Box mt={ 6 } mb={ 2 }>
               <Text
                 fontSize="10px"
-                fontWeight={ 600 }
+                fontWeight={ 500 }
                 textTransform="uppercase"
                 letterSpacing="0.08em"
-                color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                color={ text.muted }
+                fontFamily={ fonts.mono }
                 mb={ 3 }
               >
                 Chain of Trust
@@ -257,18 +264,19 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
               <VStack
                 align="stretch"
                 gap={ 0 }
-                bg={{ _light: 'rgba(0, 0, 0, 0.01)', _dark: 'rgba(255, 255, 255, 0.01)' }}
+                bg={ panel.bg }
                 border="1px solid"
-                borderColor={{ _light: 'rgba(0, 0, 0, 0.04)', _dark: 'rgba(255, 255, 255, 0.04)' }}
+                borderColor={ panel.border }
+                borderRadius="8px"
                 p={ 4 }
               >
                 { [
-                  { label: 'AWS Nitro Hardware', desc: 'Root of trust', color: 'rgba(124, 58, 237' },
-                  { label: 'Attestation Document', desc: 'Hardware-signed proof', color: 'rgba(6, 182, 212' },
-                  { label: 'PCR Verification', desc: 'Enclave code identity check', color: 'rgba(22, 163, 74' },
-                  { label: 'Key Binding', desc: 'Signing key + TLS cert bound to enclave', color: 'rgba(30, 58, 138' },
-                  { label: 'On-Chain Record', desc: 'Immutable registration', color: 'rgba(217, 119, 6' },
-                  { label: 'Heartbeat Liveness', desc: 'Ongoing cryptographic proof', color: 'rgba(22, 163, 74' },
+                  { label: 'AWS Nitro Hardware', desc: 'Root of trust', color: '#50c9e9' },
+                  { label: 'Attestation Document', desc: 'Hardware-signed proof', color: '#24bce3' },
+                  { label: 'PCR Verification', desc: 'Enclave code identity check', color: '#61d199' },
+                  { label: 'Key Binding', desc: 'Signing key + TLS cert bound to enclave', color: '#1d96b6' },
+                  { label: 'On-Chain Record', desc: 'Immutable registration', color: '#d6a33d' },
+                  { label: 'Heartbeat Liveness', desc: 'Ongoing cryptographic proof', color: '#61d199' },
                 ].map((step, i) => (
                   <Flex key={ i } alignItems="center" gap={ 3 } py={ 2 }>
                     <Flex
@@ -280,15 +288,16 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                         w="8px"
                         h="8px"
                         borderRadius="50%"
-                        bg={{ _light: `${ step.color }, 0.3)`, _dark: `${ step.color }, 0.5)` }}
+                        bg={ step.color }
                         border="1.5px solid"
-                        borderColor={{ _light: `${ step.color }, 0.5)`, _dark: `${ step.color }, 0.7)` }}
+                        borderColor={ step.color }
+                        opacity={ 0.8 }
                       />
                       { i < 5 && (
                         <Box
                           w="1px"
                           h="20px"
-                          bg={{ _light: 'rgba(0, 0, 0, 0.08)', _dark: 'rgba(255, 255, 255, 0.08)' }}
+                          bg={ panel.border }
                         />
                       ) }
                     </Flex>
@@ -296,15 +305,15 @@ const TEENodeDetailDrawer = ({ node, typeName, onClose }: Props) => {
                       <Text
                         fontSize="xs"
                         fontWeight={ 600 }
-                        color={{ _light: `${ step.color }, 0.8)`, _dark: `${ step.color }, 0.9)` }}
-                        fontFamily="system-ui, -apple-system, sans-serif"
+                        color={ text.primary }
+                        fontFamily={ fonts.sans }
                       >
                         { step.label }
                       </Text>
                       <Text
                         fontSize="11px"
-                        color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-                        fontFamily="system-ui, -apple-system, sans-serif"
+                        color={ text.muted }
+                        fontFamily={ fonts.sans }
                       >
                         { step.desc }
                       </Text>
diff --git a/ui/opengradient/teeRegistry/TEENodesTable.tsx b/ui/opengradient/teeRegistry/TEENodesTable.tsx
index dda96848ce..b039cf44fb 100644
--- a/ui/opengradient/teeRegistry/TEENodesTable.tsx
+++ b/ui/opengradient/teeRegistry/TEENodesTable.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import dayjs from 'lib/date/dayjs';
 import type { TEENodeWithStatus, TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
-import { IconButton } from 'toolkit/chakra/icon-button';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableBody, TableCell, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -16,66 +16,70 @@ type Props = {
   onNodeClick: (node: TEENodeWithStatus) => void;
 };
 
-const StatusIndicator = ({ isActive, enabled }: { isActive: boolean; enabled: boolean }) => {
-  if (isActive) {
-    return (
-      <Flex alignItems="center" gap={ 1.5 }>
-        <Box
-          w="6px"
-          h="6px"
-          borderRadius="50%"
-          bg="green.500"
-          boxShadow="0 0 4px rgba(34, 197, 94, 0.5)"
-          animation="pulseOpacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-        />
-        <Text
-          fontSize="xs"
-          fontWeight={ 500 }
-          color={{ _light: 'rgba(22, 163, 74, 0.9)', _dark: 'rgba(34, 197, 94, 0.95)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
-        >
-          Active
-        </Text>
-      </Flex>
-    );
-  }
-
-  if (enabled) {
-    return (
-      <Flex alignItems="center" gap={ 1.5 }>
-        <Box
-          w="6px"
-          h="6px"
-          borderRadius="50%"
-          bg={{ _light: 'rgba(217, 119, 6, 0.7)', _dark: 'rgba(245, 158, 11, 0.8)' }}
-        />
-        <Text
-          fontSize="xs"
-          fontWeight={ 500 }
-          color={{ _light: 'rgba(217, 119, 6, 0.8)', _dark: 'rgba(245, 158, 11, 0.9)' }}
-          fontFamily="system-ui, -apple-system, sans-serif"
-        >
-          Enabled
-        </Text>
-      </Flex>
-    );
-  }
+const { colors, fonts, panel, text } = OPENGRADIENT_BRAND;
+
+const STATUS_STYLE = {
+  active: {
+    label: 'Active',
+    dot: '#61d199',
+    fg: { _light: '#23824f', _dark: '#61d199' },
+    bg: { _light: 'rgba(46, 158, 102, 0.10)', _dark: 'rgba(97, 209, 153, 0.10)' },
+    border: { _light: 'rgba(46, 158, 102, 0.18)', _dark: 'rgba(97, 209, 153, 0.22)' },
+  },
+  enabled: {
+    label: 'Enabled',
+    dot: '#d6a33d',
+    fg: { _light: '#9d6d10', _dark: '#d6a33d' },
+    bg: { _light: 'rgba(214, 163, 61, 0.10)', _dark: 'rgba(214, 163, 61, 0.10)' },
+    border: { _light: 'rgba(214, 163, 61, 0.20)', _dark: 'rgba(214, 163, 61, 0.24)' },
+  },
+  disabled: {
+    label: 'Disabled',
+    dot: '#708195',
+    fg: text.muted,
+    bg: { _light: 'rgba(49, 74, 125, 0.06)', _dark: 'rgba(189, 235, 247, 0.05)' },
+    border: panel.border,
+  },
+};
+
+const getStatus = (node: TEENodeWithStatus) => {
+  if (node.isActive) return STATUS_STYLE.active;
+  if (node.enabled) return STATUS_STYLE.enabled;
+  return STATUS_STYLE.disabled;
+};
+
+const StatusPill = ({ node }: { node: TEENodeWithStatus }) => {
+  const status = getStatus(node);
 
   return (
-    <Flex alignItems="center" gap={ 1.5 }>
+    <Flex
+      alignItems="center"
+      gap={ 1.5 }
+      w="fit-content"
+      px={ 2 }
+      py={ 1 }
+      border="1px solid"
+      borderColor={ status.border }
+      borderRadius="999px"
+      bg={ status.bg }
+    >
       <Box
         w="6px"
         h="6px"
         borderRadius="50%"
-        bg={{ _light: 'rgba(0, 0, 0, 0.15)', _dark: 'rgba(255, 255, 255, 0.15)' }}
+        bg={ status.dot }
+        boxShadow={ node.isActive ? '0 0 8px rgba(97, 209, 153, 0.62)' : 'none' }
+        animation={ node.isActive ? 'pulseOpacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none' }
       />
       <Text
-        fontSize="xs"
+        fontFamily={ fonts.mono }
+        fontSize="10px"
         fontWeight={ 500 }
-        color={{ _light: 'rgba(0, 0, 0, 0.35)', _dark: 'rgba(255, 255, 255, 0.35)' }}
-        fontFamily="system-ui, -apple-system, sans-serif"
+        letterSpacing="0.06em"
+        textTransform="uppercase"
+        color={ status.fg }
       >
-        Disabled
+        { status.label }
       </Text>
     </Flex>
   );
@@ -86,6 +90,30 @@ function formatTimeAgo(timestamp: bigint) {
   return dayjs.unix(Number(timestamp)).fromNow();
 }
 
+const formatHash = (hash: string, head = 8, tail = 4) => {
+  if (!hash) return 'N/A';
+  if (hash.length <= head + tail + 3) return hash;
+  return `${ hash.slice(0, head) }...${ hash.slice(-tail) }`;
+};
+
+const HeaderCell = ({ children, w }: { children?: React.ReactNode; w?: string }) => (
+  <TableColumnHeader
+    w={ w }
+    py={ 3 }
+    px={ 4 }
+    bg={{ _light: 'rgba(233, 248, 252, 0.72)', _dark: 'rgba(15, 22, 38, 0.86)' }}
+    color={ text.secondary }
+    fontFamily={ fonts.mono }
+    fontSize="10px"
+    fontWeight={ 500 }
+    letterSpacing="0.08em"
+    textTransform="uppercase"
+    borderColor={ panel.border }
+  >
+    { children }
+  </TableColumnHeader>
+);
+
 const NodeRow = ({ node, typeNameMap, isLoading, onNodeClick }: {
   node: TEENodeWithStatus;
   typeNameMap: Record<number, string>;
@@ -100,103 +128,117 @@ const NodeRow = ({ node, typeNameMap, isLoading, onNodeClick }: {
     <TableRow
       role="group"
       cursor="pointer"
-      transition="all 0.15s ease"
+      transition="background-color 0.15s ease"
+      borderBottom="1px solid"
+      borderColor={ panel.border }
       _hover={{
-        bg: { _light: 'rgba(124, 58, 237, 0.02)', _dark: 'rgba(139, 92, 246, 0.04)' },
+        bg: { _light: 'rgba(36, 188, 227, 0.04)', _dark: 'rgba(36, 188, 227, 0.06)' },
       }}
       onClick={ handleClick }
     >
-      <TableCell>
-        <Skeleton loading={ isLoading }>
-          <StatusIndicator isActive={ node.isActive } enabled={ node.enabled }/>
+      <TableCell py={ 3 } px={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
+          <StatusPill node={ node }/>
         </Skeleton>
       </TableCell>
-      <TableCell>
+      <TableCell py={ 3 } px={ 4 }>
         <Skeleton loading={ isLoading }>
-          <AddressEntity
-            address={{ hash: node.owner, is_contract: false }}
-            truncation="constant"
-          />
+          <Flex direction="column" gap={ 1 } minW={ 0 }>
+            <AddressEntity
+              address={{ hash: node.owner, is_contract: false }}
+              truncation="constant"
+              noIcon
+              noCopy
+              fontSize="13px"
+              fontWeight={ 500 }
+              color={ text.primary }
+            />
+            <Text
+              fontFamily={ fonts.mono }
+              fontSize="10px"
+              color={ text.muted }
+              truncate
+            >
+              ID { formatHash(node.teeId, 6, 4) }
+            </Text>
+          </Flex>
         </Skeleton>
       </TableCell>
-      <TableCell>
-        <Skeleton loading={ isLoading }>
+      <TableCell py={ 3 } px={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
           <Text
-            fontSize="xs"
+            fontFamily={ fonts.mono }
+            fontSize="11px"
             fontWeight={ 500 }
             px={ 2 }
-            py={ 0.5 }
-            borderRadius="sm"
-            bg={{ _light: 'rgba(124, 58, 237, 0.06)', _dark: 'rgba(139, 92, 246, 0.1)' }}
-            color={{ _light: 'rgba(124, 58, 237, 0.8)', _dark: 'rgba(139, 92, 246, 0.9)' }}
+            py={ 1 }
+            borderRadius="6px"
+            bg={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.13)' }}
+            color={ text.accent }
             w="fit-content"
-            fontFamily="system-ui, -apple-system, sans-serif"
           >
             { typeNameMap[node.teeType] ?? `Type ${ node.teeType }` }
           </Text>
         </Skeleton>
       </TableCell>
-      <TableCell>
-        <Skeleton loading={ isLoading }>
+      <TableCell py={ 3 } px={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
           <Text
-            fontSize="xs"
-            fontFamily="mono"
-            color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
+            fontFamily={ fonts.mono }
+            fontSize="12px"
+            color={ text.secondary }
             title={ node.pcrHash }
           >
-            { node.pcrHash ? `${ node.pcrHash.slice(0, 6) }...${ node.pcrHash.slice(-4) }` : 'N/A' }
+            { formatHash(node.pcrHash, 8, 5) }
           </Text>
         </Skeleton>
       </TableCell>
-      <TableCell>
+      <TableCell py={ 3 } px={ 4 }>
         <Skeleton loading={ isLoading }>
           <Text
-            fontSize="xs"
-            fontFamily="mono"
-            color={{ _light: 'rgba(0, 0, 0, 0.6)', _dark: 'rgba(255, 255, 255, 0.6)' }}
-            maxW="200px"
+            fontFamily={ fonts.mono }
+            fontSize="12px"
+            color={ text.secondary }
+            maxW="250px"
             overflow="hidden"
             textOverflow="ellipsis"
             whiteSpace="nowrap"
+            title={ node.endpoint }
           >
             { node.endpoint || 'N/A' }
           </Text>
         </Skeleton>
       </TableCell>
-      <TableCell>
-        <Skeleton loading={ isLoading }>
+      <TableCell py={ 3 } px={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
           <Text
-            fontSize="xs"
-            color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            fontFamily={ fonts.mono }
+            fontSize="12px"
+            color={ node.isActive ? text.primary : text.muted }
           >
             { formatTimeAgo(node.lastHeartbeatAt) }
           </Text>
         </Skeleton>
       </TableCell>
-      <TableCell>
-        <Skeleton loading={ isLoading }>
-          <Text
-            fontSize="xs"
-            color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
-          >
+      <TableCell py={ 3 } px={ 4 }>
+        <Skeleton loading={ isLoading } w="fit-content">
+          <Text fontFamily={ fonts.mono } fontSize="12px" color={ text.muted }>
             { formatTimeAgo(node.registeredAt) }
           </Text>
         </Skeleton>
       </TableCell>
-      <TableCell>
-        <Skeleton loading={ isLoading }>
-          <IconButton
-            aria-label="Open node details"
-            variant="ghost"
-            size="2xs"
-            borderRadius="full"
-            color={{ _light: 'rgba(0, 0, 0, 0.3)', _dark: 'rgba(255, 255, 255, 0.3)' }}
-            _groupHover={{ color: { _light: 'rgba(124, 58, 237, 0.7)', _dark: 'rgba(139, 92, 246, 0.8)' } }}
-          >
-            <IconSvg name="arrows/east-mini" boxSize={ 5 }/>
-          </IconButton>
+      <TableCell py={ 3 } px={ 4 } textAlign="right">
+        <Skeleton loading={ isLoading } w="fit-content" ml="auto">
+          <IconSvg
+            name="arrows/east"
+            boxSize={ 5 }
+            color={ text.muted }
+            transition="color 0.15s ease, transform 0.15s ease"
+            _groupHover={{
+              color: colors.cyan,
+              transform: 'translateX(2px)',
+            }}
+          />
         </Skeleton>
       </TableCell>
     </TableRow>
@@ -223,31 +265,33 @@ const TEENodesTable = ({ nodes, types, isLoading, onNodeClick }: Props) => {
   [ nodes ]);
 
   return (
-    <TableRoot>
-      <TableHeaderSticky top={ 0 }>
-        <TableRow>
-          <TableColumnHeader w="60px">Status</TableColumnHeader>
-          <TableColumnHeader w="160px">Owner</TableColumnHeader>
-          <TableColumnHeader w="120px">Type</TableColumnHeader>
-          <TableColumnHeader w="120px">PCR Hash</TableColumnHeader>
-          <TableColumnHeader w="200px">Endpoint</TableColumnHeader>
-          <TableColumnHeader w="120px">Last Heartbeat</TableColumnHeader>
-          <TableColumnHeader w="120px">Registered</TableColumnHeader>
-          <TableColumnHeader w="50px"/>
-        </TableRow>
-      </TableHeaderSticky>
-      <TableBody>
-        { sortedNodes.map((node) => (
-          <NodeRow
-            key={ node.teeId }
-            node={ node }
-            typeNameMap={ typeNameMap }
-            isLoading={ isLoading }
-            onNodeClick={ onNodeClick }
-          />
-        )) }
-      </TableBody>
-    </TableRoot>
+    <Box overflowX="auto">
+      <TableRoot minW="1120px" tableLayout="fixed">
+        <TableHeaderSticky top={ 0 }>
+          <TableRow borderBottom="1px solid" borderColor={ panel.border }>
+            <HeaderCell w="132px">Status</HeaderCell>
+            <HeaderCell w="210px">Node / Owner</HeaderCell>
+            <HeaderCell w="150px">Type</HeaderCell>
+            <HeaderCell w="160px">PCR Hash</HeaderCell>
+            <HeaderCell>Endpoint</HeaderCell>
+            <HeaderCell w="140px">Heartbeat</HeaderCell>
+            <HeaderCell w="140px">Registered</HeaderCell>
+            <HeaderCell w="56px"/>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
+          { sortedNodes.map((node) => (
+            <NodeRow
+              key={ node.teeId }
+              node={ node }
+              typeNameMap={ typeNameMap }
+              isLoading={ isLoading }
+              onNodeClick={ onNodeClick }
+            />
+          )) }
+        </TableBody>
+      </TableRoot>
+    </Box>
   );
 };
 
diff --git a/ui/opengradient/teeRegistry/TEETypeCard.tsx b/ui/opengradient/teeRegistry/TEETypeCard.tsx
index 9f5fa6bf20..eb81ace351 100644
--- a/ui/opengradient/teeRegistry/TEETypeCard.tsx
+++ b/ui/opengradient/teeRegistry/TEETypeCard.tsx
@@ -1,8 +1,9 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Grid, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 
 type Props = {
   type: TEETypeSummary;
@@ -11,87 +12,115 @@ type Props = {
   onClick: (typeId: number) => void;
 };
 
-const TEETypeCard = ({ type, isSelected, isLoading, onClick }: Props) => {
+const { colors, fonts, panel, text } = OPENGRADIENT_BRAND;
+
+const Metric = ({ label, value, isLoading }: { label: string; value: string; isLoading?: boolean }) => (
+  <Box minW={ 0 }>
+    <Text
+      fontFamily={ fonts.mono }
+      fontSize="9px"
+      fontWeight={ 500 }
+      letterSpacing="0.08em"
+      textTransform="uppercase"
+      color={ text.muted }
+      mb={ 1 }
+    >
+      { label }
+    </Text>
+    <Skeleton loading={ isLoading } w="fit-content">
+      <Text
+        fontFamily={ fonts.mono }
+        fontSize="14px"
+        fontWeight={ 500 }
+        lineHeight="1"
+        color={ text.primary }
+      >
+        { value }
+      </Text>
+    </Skeleton>
+  </Box>
+);
 
+const TEETypeCard = ({ type, isSelected, isLoading, onClick }: Props) => {
   const handleClick = React.useCallback(() => {
     onClick(type.typeId);
   }, [ onClick, type.typeId ]);
 
+  const activePct = type.totalNodes > 0 ? Math.round((type.activeNodes / type.totalNodes) * 100) : 0;
+
   return (
     <Flex
+      as="button"
+      flexDirection="column"
+      alignItems="stretch"
+      textAlign="left"
+      w="100%"
+      minH="118px"
       px={ 4 }
-      py={ 3 }
-      cursor="pointer"
-      position="relative"
-      overflow="hidden"
-      transition="all 0.2s ease"
+      py={ 3.5 }
       border="1px solid"
       borderColor={ isSelected ?
-        { _light: 'rgba(124, 58, 237, 0.3)', _dark: 'rgba(139, 92, 246, 0.4)' } :
-        { _light: 'rgba(0, 0, 0, 0.06)', _dark: 'rgba(255, 255, 255, 0.06)' }
+        { _light: 'rgba(36, 188, 227, 0.52)', _dark: 'rgba(80, 201, 233, 0.46)' } :
+        panel.border
       }
+      borderRadius="8px"
       bg={ isSelected ?
-        { _light: 'rgba(124, 58, 237, 0.03)', _dark: 'rgba(139, 92, 246, 0.06)' } :
-        { _light: 'rgba(0, 0, 0, 0.01)', _dark: 'rgba(255, 255, 255, 0.01)' }
+        { _light: 'rgba(36, 188, 227, 0.08)', _dark: 'rgba(36, 188, 227, 0.12)' } :
+        panel.bg
       }
+      cursor="pointer"
+      transition="background-color 0.18s ease, border-color 0.18s ease"
       _hover={{
-        borderColor: { _light: 'rgba(124, 58, 237, 0.2)', _dark: 'rgba(139, 92, 246, 0.3)' },
-        bg: { _light: 'rgba(124, 58, 237, 0.02)', _dark: 'rgba(139, 92, 246, 0.04)' },
+        bg: { _light: 'rgba(36, 188, 227, 0.07)', _dark: 'rgba(36, 188, 227, 0.10)' },
+        borderColor: { _light: 'rgba(36, 188, 227, 0.42)', _dark: 'rgba(80, 201, 233, 0.36)' },
       }}
       onClick={ handleClick }
-      role="group"
-      alignItems="center"
-      gap={ 4 }
     >
-      { /* Active indicator bar at top */ }
-      <Box
-        position="absolute"
-        top={ 0 }
-        left={ 0 }
-        right={ 0 }
-        h="2px"
-        bg={ isSelected ?
-          { _light: 'rgba(124, 58, 237, 0.5)', _dark: 'rgba(139, 92, 246, 0.6)' } :
-          'transparent'
-        }
-        transition="all 0.2s ease"
-      />
-
-      { /* Name + Stats */ }
-      <Flex alignItems="baseline" gap={ 3 }>
+      <Flex alignItems="center" justifyContent="space-between" gap={ 3 } mb={ 4 }>
         <Skeleton loading={ isLoading } w="fit-content">
           <Text
-            fontSize="13px"
+            fontFamily={ fonts.sans }
+            fontSize="15px"
             fontWeight={ 600 }
-            color={{ _light: 'rgba(0, 0, 0, 0.85)', _dark: 'rgba(255, 255, 255, 0.9)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
-            letterSpacing="-0.01em"
-            whiteSpace="nowrap"
+            lineHeight="1.2"
+            color={ text.primary }
+            truncate
           >
             { type.name }
           </Text>
         </Skeleton>
-        <Skeleton loading={ isLoading } w="fit-content">
-          <Text
-            fontSize="11px"
-            fontFamily="system-ui, -apple-system, sans-serif"
-            whiteSpace="nowrap"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-          >
-            { type.activeNodes }/{ type.totalNodes } active
-          </Text>
-        </Skeleton>
-        <Skeleton loading={ isLoading } w="fit-content">
-          <Text
-            fontSize="11px"
-            fontFamily="system-ui, -apple-system, sans-serif"
-            whiteSpace="nowrap"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-          >
-            { type.approvedPCRs } approved PCR{ type.approvedPCRs !== 1 ? 's' : '' }
-          </Text>
-        </Skeleton>
+        <Box
+          w="8px"
+          h="8px"
+          borderRadius="50%"
+          bg={ isSelected ? colors.cyan : text.muted }
+          boxShadow={ isSelected ? '0 0 10px rgba(36, 188, 227, 0.72)' : 'none' }
+          opacity={ isSelected ? 1 : 0.42 }
+          flexShrink={ 0 }
+        />
       </Flex>
+
+      <Grid templateColumns="repeat(3, minmax(0, 1fr))" gap={ 3 } mb={ 3 }>
+        <Metric label="Active" value={ `${ type.activeNodes }/${ type.totalNodes }` } isLoading={ isLoading }/>
+        <Metric label="Enabled" value={ type.enabledNodes.toLocaleString() } isLoading={ isLoading }/>
+        <Metric label="PCRs" value={ type.approvedPCRs.toLocaleString() } isLoading={ isLoading }/>
+      </Grid>
+
+      <Box
+        h="3px"
+        borderRadius="2px"
+        bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' }}
+        overflow="hidden"
+      >
+        <Box
+          h="100%"
+          w={ `${ activePct }%` }
+          minW={ activePct > 0 ? '18px' : '0' }
+          bg={ colors.cyan }
+          borderRadius="2px"
+          transition="width 0.2s ease"
+        />
+      </Box>
     </Flex>
   );
 };
diff --git a/ui/pages/Accounts.tsx b/ui/pages/Accounts.tsx
index d86a04f72b..597bc87a57 100644
--- a/ui/pages/Accounts.tsx
+++ b/ui/pages/Accounts.tsx
@@ -9,7 +9,8 @@ import AddressesListItem from 'ui/addresses/AddressesListItem';
 import AddressesTable from 'ui/addresses/AddressesTable';
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageSurface from 'ui/shared/Page/ExplorerPageSurface';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
@@ -33,7 +34,7 @@ const Accounts = () => {
   });
 
   const actionBar = pagination.isVisible && (
-    <ActionBar mt={ -6 }>
+    <ActionBar>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   );
@@ -72,14 +73,23 @@ const Accounts = () => {
 
   return (
     <>
-      <PageTitle title="Top accounts" withTextAd/>
+      <ExplorerPageTitle
+        eyebrow="Accounts"
+        title="Top accounts"
+        description="Ranked accounts by native balance, share of supply, and transaction activity."
+        withTextAd
+      />
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items.length }
         emptyText="There are no accounts."
         actionBar={ actionBar }
       >
-        { content }
+        { content && (
+          <ExplorerPageSurface overflowX="auto">
+            { content }
+          </ExplorerPageSurface>
+        ) }
       </DataListDisplay>
     </>
   );
diff --git a/ui/pages/Blocks.tsx b/ui/pages/Blocks.tsx
index dac25f2f46..5c274d316e 100644
--- a/ui/pages/Blocks.tsx
+++ b/ui/pages/Blocks.tsx
@@ -10,14 +10,14 @@ import { generateListStub } from 'stubs/utils';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import BlocksContent from 'ui/blocks/BlocksContent';
 import BlocksTabSlot from 'ui/blocks/BlocksTabSlot';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  pt: 6,
-  pb: 6,
-  marginTop: -5,
+  pt: 2,
+  pb: 5,
+  marginTop: 0,
 };
 
 const BlocksPageContent = () => {
@@ -77,7 +77,12 @@ const BlocksPageContent = () => {
 
   return (
     <>
-      <PageTitle title="Blocks" withTextAd/>
+      <ExplorerPageTitle
+        eyebrow="Blocks"
+        title="Blocks"
+        description="Block production, forks, uncles, gas usage, and validator activity on OpenGradient."
+        withTextAd
+      />
       <RoutedTabs
         tabs={ tabs }
         listProps={ isMobile ? undefined : TAB_LIST_PROPS }
diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx
index a6bc507333..0e2d8142e7 100644
--- a/ui/pages/GasTracker.tsx
+++ b/ui/pages/GasTracker.tsx
@@ -16,9 +16,10 @@ import GasTrackerChart from 'ui/gasTracker/GasTrackerChart';
 import GasTrackerFaq from 'ui/gasTracker/GasTrackerFaq';
 import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization';
 import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer';
 import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 
 const GasTracker = () => {
   const { data, isPlaceholderData, isError, error, dataUpdatedAt } = useApiQuery('stats', {
@@ -83,12 +84,13 @@ const GasTracker = () => {
 
   return (
     <>
-      <PageTitle
+      <ExplorerPageTitle
+        eyebrow="Fees"
         title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } gas tracker` : 'Gas tracker' }
         secondRow={ titleSecondRow }
         withTextAd
       />
-      <Heading level="2" mt={ 8 } mb={ 4 }>{ `Track ${ config.chain.name } gas fees` }</Heading>
+      <Heading level="2" mt={ 8 } mb={ 4 } color={ OPENGRADIENT_BRAND.text.primary }>Current gas fees</Heading>
       { snippets }
       { config.features.stats.isEnabled && (
         <Box mt={ 12 }>
diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx
index 5fa86baac1..22655b2ad7 100644
--- a/ui/pages/Home.tsx
+++ b/ui/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Container } from '@chakra-ui/react';
+import { Box, Flex, Container, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -31,41 +31,41 @@ const Home = () => {
     <Box
       as="main"
       position="relative"
-      bg={{ _light: '#ffffff', _dark: '#0a0a0a' }}
+      bg={{ _light: '#f4fcfe', _dark: '#0a0f19' }}
       minH="100vh"
     >
       <Box position="relative" zIndex={ 1 }>
         <HeroBanner/>
-        <Container maxW="container.xl" px={{ base: 2, lg: 2 }}>
+        <Container maxW="1600px" px={{ base: 4, lg: 0 }}>
           <AdBanner
-            mt={{ base: 6, lg: 8 }}
+            mt={{ base: 5, lg: 6 }}
             mx="auto"
             display={{ base: 'flex', lg: 'none' }}
             justifyContent="center"
           />
 
           <Flex
-            mt={{ base: 4, lg: 6 }}
+            mt={{ base: 5, lg: 6 }}
             direction={{ base: 'column', lg: 'row' }}
-            columnGap={{ base: 6, lg: 8 }}
-            rowGap={{ base: 6, lg: 8 }}
+            columnGap={{ base: 5, lg: 6, xl: 8 }}
+            rowGap={{ base: 5, lg: 6 }}
+            alignItems={{ base: 'stretch', lg: 'stretch' }}
           >
-            { /* Left Column: Chain Indicators + Latest Blocks */ }
             <Box
-              width={{ base: '100%', lg: '320px' }}
+              width={{ base: '100%', lg: '360px' }}
               flexShrink={ 0 }
-              height="fit-content"
             >
-              <Box mb={{ base: 5, lg: 6 }}>
+              <VStack align="stretch" gap={{ base: 5, lg: 6 }}>
                 <ChainIndicators/>
-              </Box>
-              { leftWidget }
+                { leftWidget }
+              </VStack>
             </Box>
 
-            { /* Right Column: Transactions */ }
             <Box
               flexGrow={ 1 }
               position="relative"
+              display="flex"
+              minW={ 0 }
             >
               <Transactions/>
             </Box>
diff --git a/ui/pages/InternalTxs.tsx b/ui/pages/InternalTxs.tsx
index 89468c2a0e..62e144bcb6 100644
--- a/ui/pages/InternalTxs.tsx
+++ b/ui/pages/InternalTxs.tsx
@@ -8,7 +8,8 @@ import InternalTxsList from 'ui/internalTxs/InternalTxsList';
 import InternalTxsTable from 'ui/internalTxs/InternalTxsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageSurface from 'ui/shared/Page/ExplorerPageSurface';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
@@ -35,7 +36,7 @@ const InternalTxs = () => {
   });
 
   const actionBar = (!isMobile || pagination.isVisible) ? (
-    <ActionBar mt={ -6 }>
+    <ActionBar>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   ) : null;
@@ -53,8 +54,10 @@ const InternalTxs = () => {
 
   return (
     <>
-      <PageTitle
+      <ExplorerPageTitle
+        eyebrow="Execution traces"
         title="Internal transactions"
+        description="Contract-level calls and value movement generated inside indexed transactions."
         withTextAd
       />
       <DataListDisplay
@@ -63,7 +66,11 @@ const InternalTxs = () => {
         emptyText="There are no internal transactions."
         actionBar={ actionBar }
       >
-        { content }
+        { content && (
+          <ExplorerPageSurface overflowX="auto">
+            { content }
+          </ExplorerPageSurface>
+        ) }
       </DataListDisplay>
     </>
   );
diff --git a/ui/pages/Transactions.tsx b/ui/pages/Transactions.tsx
index b1a8820799..7b8abf0a6f 100644
--- a/ui/pages/Transactions.tsx
+++ b/ui/pages/Transactions.tsx
@@ -17,7 +17,7 @@ import { generateListStub } from 'stubs/utils';
 import { Link } from 'toolkit/chakra/link';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import IconSvg from 'ui/shared/IconSvg';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
@@ -27,11 +27,11 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  pt: 6,
-  pb: 6,
-  marginTop: -5,
+  pt: 2,
+  pb: 5,
+  marginTop: 0,
 };
-const TABS_HEIGHT = 88;
+const TABS_HEIGHT = 68;
 
 const Transactions = () => {
   const verifiedTitle = capitalize(getNetworkValidationActionText());
@@ -181,8 +181,10 @@ const Transactions = () => {
 
   return (
     <>
-      <PageTitle
+      <ExplorerPageTitle
+        eyebrow="Transactions"
         title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } transactions` : 'Transactions' }
+        description="Validated, pending, blob, and watchlist transactions across the OpenGradient network."
         withTextAd
       />
       <TxsStats/>
diff --git a/ui/pages/VerifiedContracts.tsx b/ui/pages/VerifiedContracts.tsx
index e8f2f6241c..763cca842b 100644
--- a/ui/pages/VerifiedContracts.tsx
+++ b/ui/pages/VerifiedContracts.tsx
@@ -15,7 +15,8 @@ import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import FilterInput from 'ui/shared/filters/FilterInput';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import ExplorerPageSurface from 'ui/shared/Page/ExplorerPageSurface';
+import ExplorerPageTitle from 'ui/shared/Page/ExplorerPageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
@@ -117,7 +118,7 @@ const VerifiedContracts = () => {
         { filterInput }
       </HStack>
       { (!isMobile || pagination.isVisible) && (
-        <ActionBar mt={ -6 }>
+        <ActionBar>
           <HStack gap={ 3 } display={{ base: 'none', lg: 'flex' }}>
             { typeFilter }
             { filterInput }
@@ -141,8 +142,10 @@ const VerifiedContracts = () => {
 
   return (
     <Box>
-      <PageTitle
+      <ExplorerPageTitle
+        eyebrow="Contracts"
         title={ config.meta.seo.enhancedDataEnabled ? `Verified ${ config.chain.name } contracts` : 'Verified contracts' }
+        description="Verified source code, compiler metadata, balances, and recent contract activity."
         withTextAd
       />
       <VerifiedContractsCounters/>
@@ -156,7 +159,11 @@ const VerifiedContracts = () => {
         }}
         actionBar={ actionBar }
       >
-        { content }
+        { content && (
+          <ExplorerPageSurface overflowX="auto">
+            { content }
+          </ExplorerPageSurface>
+        ) }
       </DataListDisplay>
     </Box>
   );
diff --git a/ui/pages/opengradient/TEERegistry.tsx b/ui/pages/opengradient/TEERegistry.tsx
index 42edfdd466..6539a44107 100644
--- a/ui/pages/opengradient/TEERegistry.tsx
+++ b/ui/pages/opengradient/TEERegistry.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Grid, Text, VStack } from '@chakra-ui/react';
+import { Box, Flex, Grid, HStack, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -7,13 +7,13 @@ import { route } from 'nextjs-routes';
 import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS } from 'lib/opengradient/contracts/teeRegistry';
 import type { TEERegistryStats, TEETypeSummary, TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
 import { Checkbox } from 'toolkit/chakra/checkbox';
-import { Heading } from 'toolkit/chakra/heading';
-import { Link, LinkBox } from 'toolkit/chakra/link';
+import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import TEENodeDetailDrawer from 'ui/opengradient/teeRegistry/TEENodeDetailDrawer';
 import TEENodesTable from 'ui/opengradient/teeRegistry/TEENodesTable';
 import TEETypeCard from 'ui/opengradient/teeRegistry/TEETypeCard';
-import IconSvg from 'ui/shared/IconSvg';
+import IconSvg, { type IconName } from 'ui/shared/IconSvg';
 
 const PLACEHOLDER_STATS: TEERegistryStats = {
   totalTypes: 3,
@@ -29,6 +29,85 @@ const PLACEHOLDER_TYPES: Array<TEETypeSummary> = [
   { typeId: 2, name: 'Model Training', totalNodes: 3, enabledNodes: 3, activeNodes: 2, approvedPCRs: 1, addedAt: BigInt(0) },
 ];
 
+const { colors, fonts, panel, text } = OPENGRADIENT_BRAND;
+
+type MetricCardProps = {
+  label: string;
+  value: number;
+  iconName: IconName;
+  helper: string;
+  loading?: boolean;
+};
+
+const SectionLabel = ({ children }: { children: React.ReactNode }) => (
+  <HStack gap={ 2 }>
+    <Box
+      w="6px"
+      h="6px"
+      borderRadius="50%"
+      bg={ colors.cyan }
+      boxShadow="0 0 10px rgba(36, 188, 227, 0.65)"
+      flexShrink={ 0 }
+    />
+    <Text
+      fontFamily={ fonts.mono }
+      fontSize="11px"
+      fontWeight={ 500 }
+      letterSpacing="0.12em"
+      textTransform="uppercase"
+      color={ text.accent }
+    >
+      { children }
+    </Text>
+  </HStack>
+);
+
+const MetricCard = ({ label, value, iconName, helper, loading }: MetricCardProps) => (
+  <Box
+    border="1px solid"
+    borderColor={ panel.border }
+    borderRadius="8px"
+    bg={ panel.bg }
+    px={ 4 }
+    py={ 3.5 }
+    minH="112px"
+  >
+    <Flex alignItems="center" justifyContent="space-between" gap={ 3 } mb={ 3 }>
+      <Text
+        fontFamily={ fonts.mono }
+        fontSize="10px"
+        fontWeight={ 500 }
+        letterSpacing="0.08em"
+        textTransform="uppercase"
+        color={ text.secondary }
+      >
+        { label }
+      </Text>
+      <IconSvg name={ iconName } boxSize={ 3.5 } color={ text.accent }/>
+    </Flex>
+    <Skeleton loading={ loading } w="fit-content">
+      <Text
+        fontFamily={ fonts.mono }
+        fontSize={{ base: '24px', lg: '30px' }}
+        fontWeight={ 500 }
+        lineHeight="1"
+        color={ text.primary }
+      >
+        { value.toLocaleString() }
+      </Text>
+    </Skeleton>
+    <Text
+      mt={ 2 }
+      fontFamily={ fonts.sans }
+      fontSize="12px"
+      lineHeight="1.35"
+      color={ text.muted }
+    >
+      { helper }
+    </Text>
+  </Box>
+);
+
 const TEERegistry = () => {
   const [ selectedNode, setSelectedNode ] = React.useState<TEENodeWithStatus | null>(null);
   const [ selectedType, setSelectedType ] = React.useState<number | null>(null);
@@ -46,23 +125,21 @@ const TEERegistry = () => {
   const stats = query.data?.stats ?? PLACEHOLDER_STATS;
   const types = query.data?.types ?? PLACEHOLDER_TYPES;
 
-  // All nodes flat list for the table
   const allNodes = React.useMemo(() => {
-    const nbt = query.data?.nodesByType ?? {};
+    const nodesByType = query.data?.nodesByType ?? {};
     if (selectedType !== null) {
-      return nbt[selectedType] ?? [];
+      return nodesByType[selectedType] ?? [];
     }
-    return Object.values(nbt).flat();
+    return Object.values(nodesByType).flat();
   }, [ query.data?.nodesByType, selectedType ]);
 
   const hasNonDisabledNodes = React.useMemo(
-    () => allNodes.some((n) => n.isActive || n.enabled),
+    () => allNodes.some((node) => node.isActive || node.enabled),
     [ allNodes ],
   );
 
   const [ showDisabled, setShowDisabled ] = React.useState<boolean | null>(null);
 
-  // Reset when allNodes changes (e.g. type filter changed)
   React.useEffect(() => {
     setShowDisabled(null);
   }, [ selectedType ]);
@@ -70,10 +147,23 @@ const TEERegistry = () => {
   const resolvedShowDisabled = showDisabled ?? !hasNonDisabledNodes;
 
   const filteredNodes = React.useMemo(
-    () => resolvedShowDisabled ? allNodes : allNodes.filter((n) => n.isActive || n.enabled),
+    () => resolvedShowDisabled ? allNodes : allNodes.filter((node) => node.isActive || node.enabled),
     [ allNodes, resolvedShowDisabled ],
   );
 
+  const tableTitle = selectedType !== null ?
+    `${ types.find((type) => type.typeId === selectedType)?.name ?? 'Selected' } nodes` :
+    'All nodes';
+
+  const tableSubtitle = resolvedShowDisabled ?
+    'Showing active, enabled, and disabled registry records.' :
+    'Showing active and enabled registry records.';
+
+  const activeVisibleCount = React.useMemo(
+    () => filteredNodes.filter((node) => node.isActive).length,
+    [ filteredNodes ],
+  );
+
   const handleToggleShowDisabled = React.useCallback(() => {
     setShowDisabled((prev) => {
       const current = prev ?? !hasNonDisabledNodes;
@@ -98,314 +188,137 @@ const TEERegistry = () => {
   }, []);
 
   return (
-    <>
-      <Heading
-        as="h1"
-        fontSize={{ base: '22px', md: '26px', lg: '28px' }}
-        fontWeight={ 300 }
-        letterSpacing="-0.03em"
-        lineHeight="1.15"
-        color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-        fontFamily="system-ui, -apple-system, sans-serif"
-        mb={ 4 }
-        mt={{ base: 1, lg: 2 }}
-      >
-        TEE Registry
-      </Heading>
-
-      { /* Description */ }
-      <Box
+    <Box>
+      <Flex
+        alignItems={{ base: 'stretch', lg: 'flex-end' }}
+        justifyContent="space-between"
+        gap={ 5 }
+        flexDirection={{ base: 'column', lg: 'row' }}
         mb={ 6 }
-        p={{ base: 4, lg: 5 }}
-        bg={{ _light: 'rgba(0, 0, 0, 0.01)', _dark: 'rgba(255, 255, 255, 0.01)' }}
-        borderTop="1px solid"
-        borderBottom="1px solid"
-        borderColor={{ _light: 'rgba(0, 0, 0, 0.04)', _dark: 'rgba(255, 255, 255, 0.04)' }}
       >
-        <Flex
-          gap={ 3 }
-          alignItems="flex-start"
-          flexDirection={{ base: 'column', lg: 'row' }}
-        >
-          <Box
-            p={ 2 }
-            bg={{ _light: 'rgba(0, 0, 0, 0.02)', _dark: 'rgba(255, 255, 255, 0.02)' }}
-            flexShrink={ 0 }
-          >
-            <IconSvg
-              name="nft_shield"
-              boxSize={ 5 }
-              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            />
-          </Box>
-          <Box flex={ 1 }>
-            <Text
-              fontSize={{ base: '12px', md: '13px' }}
-              lineHeight="1.6"
-              color={{ _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
-            >
-              Hardware-rooted chain of trust from AWS Nitro enclaves to on-chain verification.
-              Each TEE node is cryptographically attested, with its signing key and TLS certificate
-              bound to verified enclave code. Heartbeat liveness proofs ensure nodes are actively running
-              approved software. Click on a node to inspect its attestation details.
-            </Text>
-            <Link
-              href={ route({ pathname: '/address/[hash]', query: { hash: TEE_REGISTRY_ADDRESS } }) }
-              fontSize={{ base: '11px', md: '12px' }}
-              fontWeight={ 500 }
-              fontFamily="system-ui, -apple-system, sans-serif"
-              color="blue.500"
-              mt={ 2 }
-              display="inline-flex"
-              alignItems="center"
-              gap={ 1 }
-            >
-              View Registry Contract
-              <IconSvg name="arrows/east-mini" boxSize={ 3.5 }/>
-            </Link>
-          </Box>
-        </Flex>
-      </Box>
-
-      { /* Hero Stats Section */ }
-      <Box
-        position="relative"
-        mb={ 8 }
-        w="100%"
-        overflow="hidden"
-      >
-        <VStack
-          align="stretch"
-          gap={ 0 }
-        >
-          { /* Metrics Grid */ }
-          <Grid
-            templateColumns={{ base: '1fr 1fr', lg: 'repeat(4, 1fr)' }}
-            gap={ 0 }
-            overflow="hidden"
-          >
-            { /* TEE Types */ }
-            <LinkBox
-              p={ 5 }
-              position="relative"
-              bgGradient={{
-                _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-              }}
-              transition="all 0.2s ease"
-              _hover={{
-                bgGradient: {
-                  _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                  _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                },
-              }}
-            >
-              <Flex alignItems="center" gap={ 1.5 } mb={ 2 }>
-                <Text
-                  fontSize="10px"
-                  fontWeight={ 600 }
-                  letterSpacing="0.08em"
-                  textTransform="uppercase"
-                  color={{ _light: 'rgba(30, 58, 138, 0.7)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                >
-                  TEE Types
-                </Text>
-                <IconSvg
-                  name="apps"
-                  boxSize={ 3 }
-                  color={{ _light: 'rgba(30, 58, 138, 0.75)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                />
-              </Flex>
-              <Skeleton loading={ query.isPlaceholderData } w="fit-content">
-                <Text
-                  fontSize="26px"
-                  fontWeight={ 200 }
-                  letterSpacing="-0.02em"
-                  color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  lineHeight="1"
-                >
-                  { stats.totalTypes.toLocaleString() }
-                </Text>
-              </Skeleton>
-            </LinkBox>
-
-            { /* Approved PCRs */ }
-            <LinkBox
-              p={ 5 }
-              position="relative"
-              bgGradient={{
-                _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-              }}
-              transition="all 0.2s ease"
-              _hover={{
-                bgGradient: {
-                  _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                  _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                },
-              }}
-            >
-              <Flex alignItems="center" gap={ 1.5 } mb={ 2 }>
-                <Text
-                  fontSize="10px"
-                  fontWeight={ 600 }
-                  letterSpacing="0.08em"
-                  textTransform="uppercase"
-                  color={{ _light: 'rgba(30, 58, 138, 0.7)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                >
-                  Approved PCRs
-                </Text>
-                <IconSvg
-                  name="nft_shield"
-                  boxSize={ 3 }
-                  color={{ _light: 'rgba(30, 58, 138, 0.75)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                />
-              </Flex>
-              <Skeleton loading={ query.isPlaceholderData } w="fit-content">
-                <Text
-                  fontSize="26px"
-                  fontWeight={ 200 }
-                  letterSpacing="-0.02em"
-                  color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  lineHeight="1"
-                >
-                  { stats.approvedPCRs.toLocaleString() }
-                </Text>
-              </Skeleton>
-            </LinkBox>
-
-            { /* Active Nodes */ }
-            <LinkBox
-              p={ 5 }
-              position="relative"
-              bgGradient={{
-                _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-              }}
-              transition="all 0.2s ease"
-              _hover={{
-                bgGradient: {
-                  _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                  _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                },
-              }}
-            >
-              <Flex alignItems="center" gap={ 1.5 } mb={ 2 }>
-                <Text
-                  fontSize="10px"
-                  fontWeight={ 600 }
-                  letterSpacing="0.08em"
-                  textTransform="uppercase"
-                  color={{ _light: 'rgba(30, 58, 138, 0.7)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                >
-                  Active Nodes
-                </Text>
-                <IconSvg
-                  name="check"
-                  boxSize={ 3 }
-                  color={{ _light: 'rgba(30, 58, 138, 0.75)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                />
-              </Flex>
-              <Skeleton loading={ query.isPlaceholderData } w="fit-content">
-                <Text
-                  fontSize="26px"
-                  fontWeight={ 200 }
-                  letterSpacing="-0.02em"
-                  color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  lineHeight="1"
-                >
-                  { stats.activeNodes.toLocaleString() }
-                </Text>
-              </Skeleton>
-            </LinkBox>
-
-            { /* Enabled Nodes */ }
-            <LinkBox
-              p={ 5 }
-              position="relative"
-              bgGradient={{
-                _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.04) 0%, rgba(51, 65, 85, 0.05) 100%)',
-                _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(51, 65, 85, 0.1) 100%)',
-              }}
-              transition="all 0.2s ease"
-              _hover={{
-                bgGradient: {
-                  _light: 'linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%)',
-                  _dark: 'linear-gradient(135deg, rgba(30, 58, 138, 0.12) 0%, rgba(51, 65, 85, 0.15) 100%)',
-                },
-              }}
-            >
-              <Flex alignItems="center" gap={ 1.5 } mb={ 2 }>
-                <Text
-                  fontSize="10px"
-                  fontWeight={ 600 }
-                  letterSpacing="0.08em"
-                  textTransform="uppercase"
-                  color={{ _light: 'rgba(30, 58, 138, 0.7)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                >
-                  Registered Nodes
-                </Text>
-                <IconSvg
-                  name="certified"
-                  boxSize={ 3 }
-                  color={{ _light: 'rgba(30, 58, 138, 0.75)', _dark: 'rgba(255, 255, 255, 0.5)' }}
-                />
-              </Flex>
-              <Skeleton loading={ query.isPlaceholderData } w="fit-content">
-                <Text
-                  fontSize="26px"
-                  fontWeight={ 200 }
-                  letterSpacing="-0.02em"
-                  color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                  fontFamily="system-ui, -apple-system, sans-serif"
-                  lineHeight="1"
-                >
-                  { stats.enabledNodes.toLocaleString() }
-                </Text>
-              </Skeleton>
-            </LinkBox>
-
-          </Grid>
-        </VStack>
-      </Box>
-
-      { /* TEE Types Grid */ }
-      <Box mb={ 8 }>
-        <Flex alignItems="center" gap={ 2 } mb={ 4 }>
+        <Box maxW="780px">
           <Text
+            fontFamily={ fonts.mono }
             fontSize="11px"
             fontWeight={ 500 }
-            letterSpacing="0.1em"
+            letterSpacing="0.12em"
             textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+            color={ text.accent }
+            mb={ 2 }
           >
-            TEE Types
+            / Trusted execution registry
           </Text>
+          <Text
+            as="h1"
+            fontFamily={ fonts.sans }
+            fontSize={{ base: '28px', md: '36px', lg: '42px' }}
+            fontWeight={ 500 }
+            letterSpacing="0"
+            lineHeight="1.08"
+            color={ text.primary }
+          >
+            TEE Registry
+          </Text>
+          <Text
+            mt={ 3 }
+            fontFamily={ fonts.sans }
+            fontSize={{ base: '14px', md: '15px' }}
+            lineHeight="1.6"
+            color={ text.secondary }
+          >
+            Monitor attested OpenGradient TEE operators, approved PCR identities, endpoints, and heartbeat liveness from the on-chain registry.
+          </Text>
+        </Box>
+
+        <Link
+          href={ route({ pathname: '/address/[hash]', query: { hash: TEE_REGISTRY_ADDRESS } }) }
+          display="inline-flex"
+          alignItems="center"
+          justifyContent="center"
+          gap={ 2 }
+          px={ 3 }
+          py={ 2 }
+          border="1px solid"
+          borderColor={ panel.border }
+          borderRadius="8px"
+          bg={ panel.bg }
+          color={ text.secondary }
+          fontFamily={ fonts.mono }
+          fontSize="11px"
+          fontWeight={ 500 }
+          letterSpacing="0.08em"
+          textTransform="uppercase"
+          whiteSpace="nowrap"
+          _hover={{
+            textDecoration: 'none',
+            color: text.accent,
+            borderColor: { _light: 'rgba(36, 188, 227, 0.38)', _dark: 'rgba(80, 201, 233, 0.32)' },
+          }}
+        >
+          Registry contract
+          <IconSvg name="arrows/east" boxSize={ 4 }/>
+        </Link>
+      </Flex>
+
+      <Grid
+        templateColumns={{ base: '1fr', md: 'repeat(2, minmax(0, 1fr))', xl: 'repeat(4, minmax(0, 1fr))' }}
+        gap={ 3 }
+        mb={ 7 }
+      >
+        <MetricCard
+          label="TEE Types"
+          value={ stats.totalTypes }
+          iconName="apps"
+          helper="Registered execution classes"
+          loading={ query.isPlaceholderData }
+        />
+        <MetricCard
+          label="Approved PCRs"
+          value={ stats.approvedPCRs }
+          iconName="nft_shield"
+          helper="Allowed enclave identities"
+          loading={ query.isPlaceholderData }
+        />
+        <MetricCard
+          label="Active Nodes"
+          value={ stats.activeNodes }
+          iconName="check"
+          helper="Heartbeat within liveness window"
+          loading={ query.isPlaceholderData }
+        />
+        <MetricCard
+          label="Enabled Nodes"
+          value={ stats.enabledNodes }
+          iconName="certified"
+          helper="Enabled registry operators"
+          loading={ query.isPlaceholderData }
+        />
+      </Grid>
+
+      <Box mb={ 7 }>
+        <Flex alignItems="center" justifyContent="space-between" gap={ 3 } mb={ 3 }>
+          <SectionLabel>TEE types</SectionLabel>
           { selectedType !== null && (
             <Text
-              fontSize="11px"
+              as="button"
+              fontFamily={ fonts.mono }
+              fontSize="10px"
               fontWeight={ 500 }
+              letterSpacing="0.08em"
+              textTransform="uppercase"
+              color={ text.muted }
               cursor="pointer"
-              color="blue.500"
               onClick={ handleClearFilter }
-              fontFamily="system-ui, -apple-system, sans-serif"
+              _hover={{ color: text.accent }}
             >
               Clear filter
             </Text>
           ) }
         </Flex>
         <Grid
-          templateColumns="1fr"
-          gap={ 2 }
+          templateColumns={{ base: '1fr', md: 'repeat(auto-fit, minmax(240px, 320px))' }}
+          gap={ 3 }
+          alignItems="stretch"
         >
           { types.map((type) => (
             <TEETypeCard
@@ -419,75 +332,87 @@ const TEERegistry = () => {
         </Grid>
       </Box>
 
-      { /* Nodes Table */ }
-      <Box>
-        <Flex alignItems="center" justifyContent="space-between" mb={ 4 }>
-          <Flex alignItems="center" gap={ 2 }>
-            <Text
-              fontSize="11px"
-              fontWeight={ 500 }
-              letterSpacing="0.1em"
-              textTransform="uppercase"
-              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
-            >
-              { selectedType !== null ?
-                `${ types.find((t) => t.typeId === selectedType)?.name ?? '' } Nodes` :
-                'All Nodes' }
-            </Text>
-            <Text
-              fontSize="11px"
-              fontWeight={ 400 }
-              color={{ _light: 'rgba(0, 0, 0, 0.3)', _dark: 'rgba(255, 255, 255, 0.3)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
-            >
-              { filteredNodes.length > 0 ? `(${ filteredNodes.length })` : '' }
+      <Box
+        border="1px solid"
+        borderColor={ panel.border }
+        borderRadius="8px"
+        bg={ panel.bg }
+        overflow="hidden"
+      >
+        <Flex
+          alignItems={{ base: 'stretch', md: 'center' }}
+          justifyContent="space-between"
+          gap={ 4 }
+          flexDirection={{ base: 'column', md: 'row' }}
+          px={ 4 }
+          py={ 3.5 }
+          borderBottom="1px solid"
+          borderColor={ panel.border }
+        >
+          <Box>
+            <Flex alignItems="center" gap={ 3 } mb={ 1 }>
+              <SectionLabel>{ tableTitle }</SectionLabel>
+              <Text
+                fontFamily={ fonts.mono }
+                fontSize="11px"
+                color={ text.muted }
+              >
+                { filteredNodes.length } shown / { allNodes.length } total
+              </Text>
+            </Flex>
+            <Text fontFamily={ fonts.sans } fontSize="12px" color={ text.muted }>
+              { tableSubtitle } { activeVisibleCount > 0 ? `${ activeVisibleCount } currently active.` : '' }
             </Text>
-          </Flex>
+          </Box>
+
           <Checkbox
             size="sm"
             checked={ resolvedShowDisabled }
             onCheckedChange={ handleToggleShowDisabled }
           >
             <Text
+              fontFamily={ fonts.mono }
               fontSize="11px"
-              fontWeight={ 400 }
-              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-              fontFamily="system-ui, -apple-system, sans-serif"
+              fontWeight={ 500 }
+              letterSpacing="0.04em"
+              color={ text.secondary }
             >
               Show disabled
             </Text>
           </Checkbox>
         </Flex>
+
         <TEENodesTable
           nodes={ filteredNodes }
           types={ types }
           isLoading={ query.isPlaceholderData }
           onNodeClick={ handleNodeClick }
         />
+
         { !query.isPlaceholderData && filteredNodes.length === 0 && (
           <Flex
             justifyContent="center"
             alignItems="center"
             py={ 12 }
-            color={{ _light: 'rgba(0, 0, 0, 0.3)', _dark: 'rgba(255, 255, 255, 0.3)' }}
+            color={ text.muted }
+            borderTop="1px solid"
+            borderColor={ panel.border }
           >
-            <Text fontSize="sm" fontFamily="system-ui, -apple-system, sans-serif">
-              No TEE nodes registered yet.
+            <Text fontSize="sm" fontFamily={ fonts.sans }>
+              No TEE nodes match the current filter.
             </Text>
           </Flex>
         ) }
       </Box>
 
-      { /* Node Detail Drawer */ }
       { selectedNode && (
         <TEENodeDetailDrawer
           node={ selectedNode }
-          typeName={ types.find((t) => t.typeId === selectedNode.teeType)?.name ?? `Type ${ selectedNode.teeType }` }
+          typeName={ types.find((type) => type.typeId === selectedNode.teeType)?.name ?? `Type ${ selectedNode.teeType }` }
           onClose={ handleCloseDrawer }
         />
       ) }
-    </>
+    </Box>
   );
 };
 
diff --git a/ui/shared/ActionBar.tsx b/ui/shared/ActionBar.tsx
index 46f2f2ff24..43a9da0802 100644
--- a/ui/shared/ActionBar.tsx
+++ b/ui/shared/ActionBar.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsSticky from 'lib/hooks/useIsSticky';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 
 type Props = {
   children: React.ReactNode;
@@ -27,7 +28,10 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
   return (
     <Flex
       className={ className }
-      backgroundColor={{ _light: 'white', _dark: '#0a0a0a' }}
+      backgroundColor={{ _light: 'rgba(244, 252, 254, 0.94)', _dark: 'rgba(10, 15, 25, 0.94)' }}
+      backdropFilter="blur(16px)"
+      borderBottomWidth={ isSticky ? '1px' : '0' }
+      borderColor={ OPENGRADIENT_BRAND.panel.border }
       pt={ 6 }
       pb={{ base: 6, lg: 3 }}
       mx={{ base: -3, lg: 0 }}
diff --git a/ui/shared/Page/ExplorerPageSurface.tsx b/ui/shared/Page/ExplorerPageSurface.tsx
new file mode 100644
index 0000000000..94a1d1a9a5
--- /dev/null
+++ b/ui/shared/Page/ExplorerPageSurface.tsx
@@ -0,0 +1,26 @@
+import { Box, type BoxProps } from '@chakra-ui/react';
+import React from 'react';
+
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
+
+type Props = BoxProps & {
+  children: React.ReactNode;
+};
+
+const ExplorerPageSurface = ({ children, ...props }: Props) => {
+  return (
+    <Box
+      bg={ OPENGRADIENT_BRAND.panel.bg }
+      borderWidth="1px"
+      borderColor={ OPENGRADIENT_BRAND.panel.border }
+      borderRadius="8px"
+      boxShadow={ OPENGRADIENT_BRAND.panel.shadow }
+      overflow="hidden"
+      { ...props }
+    >
+      { children }
+    </Box>
+  );
+};
+
+export default ExplorerPageSurface;
diff --git a/ui/shared/Page/ExplorerPageTitle.tsx b/ui/shared/Page/ExplorerPageTitle.tsx
new file mode 100644
index 0000000000..dbf686c41c
--- /dev/null
+++ b/ui/shared/Page/ExplorerPageTitle.tsx
@@ -0,0 +1,62 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
+
+import PageTitle from './PageTitle';
+
+type Props = {
+  title: string;
+  eyebrow?: string;
+  description?: React.ReactNode;
+  secondRow?: React.ReactNode;
+  withTextAd?: boolean;
+};
+
+const ExplorerPageTitle = ({ title, eyebrow, description, secondRow, withTextAd }: Props) => {
+  const composedSecondRow = description || secondRow ? (
+    <Flex
+      flexDir="column"
+      gap={ secondRow && description ? 3 : 0 }
+      maxW="100%"
+      w="100%"
+    >
+      { description && (
+        <Text
+          color={ OPENGRADIENT_BRAND.text.secondary }
+          fontSize={{ base: 'sm', lg: 'md' }}
+          lineHeight="1.65"
+          maxW="760px"
+        >
+          { description }
+        </Text>
+      ) }
+      { secondRow }
+    </Flex>
+  ) : undefined;
+
+  return (
+    <Box>
+      { eyebrow && (
+        <Text
+          color={ OPENGRADIENT_BRAND.text.accent }
+          fontFamily={ OPENGRADIENT_BRAND.fonts.mono }
+          fontSize="xs"
+          fontWeight={ 700 }
+          lineHeight="1"
+          mb={ 3 }
+          textTransform="uppercase"
+        >
+          / { eyebrow }
+        </Text>
+      ) }
+      <PageTitle
+        title={ title }
+        secondRow={ composedSecondRow }
+        withTextAd={ withTextAd }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ExplorerPageTitle);
diff --git a/ui/shared/Page/PageTitle.tsx b/ui/shared/Page/PageTitle.tsx
index 590039eb3b..66d7ae483c 100644
--- a/ui/shared/Page/PageTitle.tsx
+++ b/ui/shared/Page/PageTitle.tsx
@@ -7,6 +7,7 @@ import { Heading } from 'toolkit/chakra/heading';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import TextAd from 'ui/shared/ad/TextAd';
 import ButtonBackTo from 'ui/shared/buttons/ButtonBackTo';
 
@@ -113,7 +114,6 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
                 ref={ headingRef }
                 level="1"
                 whiteSpace="normal"
-                wordBreak="break-all"
                 style={{
                   WebkitLineClamp: TEXT_MAX_LINES,
                   WebkitBoxOrient: 'vertical',
@@ -124,12 +124,14 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
                 onMouseEnter={ tooltip.onOpen }
                 onMouseLeave={ tooltip.onClose }
                 onClick={ isMobile ? tooltip.onToggle : undefined }
-                fontSize={{ base: '30px', md: '40px', lg: '44px', xl: '46px' }}
-                fontWeight={ 200 }
-                letterSpacing="-0.04em"
-                lineHeight="1.15"
-                color={{ _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' }}
-                fontFamily="system-ui, -apple-system, sans-serif"
+                fontSize={{ base: '28px', md: '34px', lg: '38px' }}
+                fontWeight={ 600 }
+                letterSpacing="0"
+                lineHeight="1.14"
+                color={ OPENGRADIENT_BRAND.text.primary }
+                fontFamily={ OPENGRADIENT_BRAND.fonts.sans }
+                wordBreak="normal"
+                overflowWrap="anywhere"
               >
                 <span ref={ textRef }>
                   { title }
diff --git a/ui/shared/chart/ChartArea.tsx b/ui/shared/chart/ChartArea.tsx
index f3171ebb5b..22bca2abf2 100644
--- a/ui/shared/chart/ChartArea.tsx
+++ b/ui/shared/chart/ChartArea.tsx
@@ -18,7 +18,8 @@ interface Props extends React.SVGProps<SVGPathElement> {
 const ChartArea = ({ id, xScale, yScale, color, data, noAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
 
-  const gradientColorId = `${ id || 'gradient' }-${ color }-color`;
+  const gradientColorKey = color?.replace(/[^\w-]/g, '') || 'custom';
+  const gradientColorId = `${ id || 'gradient' }-${ gradientColorKey }-color`;
   const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
   const defaultGradient = {
     startColor: useToken('colors', useColorModeValue('blue.100', 'blue.400')),
diff --git a/ui/shared/chart/ChartWatermarkIcon.tsx b/ui/shared/chart/ChartWatermarkIcon.tsx
index 0cf7fd990c..a8b6ae6e57 100644
--- a/ui/shared/chart/ChartWatermarkIcon.tsx
+++ b/ui/shared/chart/ChartWatermarkIcon.tsx
@@ -1,23 +1,20 @@
-import type { IconProps } from '@chakra-ui/react';
-import { Icon } from '@chakra-ui/react';
+import { chakra, type BoxProps } from '@chakra-ui/react';
 import React from 'react';
 
-// eslint-disable-next-line no-restricted-imports
-import logoIcon from 'icons/networks/logo-placeholder.svg';
-
-const ChartWatermarkIcon = (props: IconProps) => {
+const ChartWatermarkIcon = (props: BoxProps) => {
   return (
-    <Icon
+    <chakra.img
+      src="/static/opengradient/opengradient-logo-dark.svg"
+      alt=""
+      aria-hidden
       { ...props }
-      as={ logoIcon }
       position="absolute"
-      opacity={ 0.1 }
+      opacity={{ _light: 0.08, _dark: 0.1 }}
       top="50%"
       left="50%"
       transform="translate(-50%, -50%)"
       pointerEvents="none"
-      viewBox="0 0 114 20"
-      color={{ _light: 'link', _dark: 'white' }}
+      objectFit="contain"
     />
   );
 };
diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx
index 95df9b7816..ba038be2d9 100644
--- a/ui/shared/chart/ChartWidget.tsx
+++ b/ui/shared/chart/ChartWidget.tsx
@@ -10,6 +10,7 @@ import { IconButton } from 'toolkit/chakra/icon-button';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ChartMenu from './ChartMenu';
@@ -95,9 +96,12 @@ const ChartWidget = ({
       ref={ ref }
       flexDir="column"
       padding={{ base: 3, lg: 4 }}
-      borderRadius="lg"
+      bg={ OPENGRADIENT_BRAND.panel.bg }
+      backdropFilter="blur(10px)"
+      borderRadius="8px"
       borderWidth="1px"
-      borderColor={{ _light: 'gray.200', _dark: 'gray.600' }}
+      borderColor={ OPENGRADIENT_BRAND.panel.border }
+      boxShadow={ OPENGRADIENT_BRAND.panel.shadow }
       className={ className }
     >
       <Flex columnGap={ 6 } mb={ 2 } alignItems="flex-start">
diff --git a/ui/shared/layout/LayoutApp.tsx b/ui/shared/layout/LayoutApp.tsx
index f3e72502cd..ab211db4ab 100644
--- a/ui/shared/layout/LayoutApp.tsx
+++ b/ui/shared/layout/LayoutApp.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
@@ -22,6 +23,7 @@ const LayoutDefault = ({ children }: Props) => {
           paddingBottom={ 0 }
           paddingX={{ base: 4, lg: 6 }}
         >
+          <HeaderDesktop hideSearchBar/>
           <AppErrorBoundary>
             <Layout.Content pt={{ base: 0, lg: 2 }} flexGrow={ 1 }>
               { children }
diff --git a/ui/shared/layout/LayoutHome.tsx b/ui/shared/layout/LayoutHome.tsx
index 3d549551ba..e20a9313c8 100644
--- a/ui/shared/layout/LayoutHome.tsx
+++ b/ui/shared/layout/LayoutHome.tsx
@@ -4,6 +4,7 @@ import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
@@ -19,6 +20,7 @@ const LayoutHome = ({ children }: Props) => {
           paddingTop={{ base: 3, lg: 6 }}
         >
           <HeaderAlert/>
+          <HeaderDesktop hideSearchBar/>
           <AppErrorBoundary>
             { children }
           </AppErrorBoundary>
diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx
index 11d7f5f5da..cf3400e117 100644
--- a/ui/shared/layout/components/Container.tsx
+++ b/ui/shared/layout/components/Container.tsx
@@ -10,9 +10,10 @@ const Container = ({ children, className }: Props) => {
   return (
     <Box
       className={ className }
-      minWidth={{ base: '100vw', lg: 'fit-content' }}
+      minWidth="100vw"
+      w="100%"
       m="0 auto"
-      bgColor={{ _light: 'white', _dark: '#0a0a0a' }}
+      bgColor={{ _light: '#f4fcfe', _dark: '#0a0f19' }}
     >
       { children }
     </Box>
diff --git a/ui/shared/stats/StatsWidget.tsx b/ui/shared/stats/StatsWidget.tsx
index ee326b5e70..1c081f85e4 100644
--- a/ui/shared/stats/StatsWidget.tsx
+++ b/ui/shared/stats/StatsWidget.tsx
@@ -6,6 +6,7 @@ import { route } from 'nextjs-routes';
 
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import Hint from 'ui/shared/Hint';
 import IconSvg, { type IconName } from 'ui/shared/IconSvg';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -58,36 +59,37 @@ const StatsWidget = ({
       <Flex
         className={ className }
         alignItems="center"
-        bgColor={ isLoading ? { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } : { _light: 'rgba(255, 255, 255, 0.6)', _dark: 'rgba(255, 255, 255, 0.05)' } }
+        bgColor={ isLoading ? { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } : OPENGRADIENT_BRAND.panel.bg }
         backdropFilter={ isLoading ? 'none' : 'blur(10px)' }
         p={ 4 }
         border="1px solid"
-        borderColor={{ _light: 'rgba(102, 126, 234, 0.15)', _dark: 'rgba(255, 255, 255, 0.1)' }}
+        borderColor={ OPENGRADIENT_BRAND.panel.border }
+        borderRadius="8px"
+        boxShadow={ isLoading ? 'none' : OPENGRADIENT_BRAND.panel.shadow }
         justifyContent="space-between"
         columnGap={ 3 }
         w="100%"
-        transition="all 0.2s ease"
+        transition="border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease"
         _hover={{
-          borderColor: { _light: 'rgba(102, 126, 234, 0.3)', _dark: 'rgba(255, 255, 255, 0.2)' },
-          transform: 'translateY(-2px)',
-          boxShadow: { _light: '0 4px 12px rgba(102, 126, 234, 0.1)', _dark: '0 4px 12px rgba(0, 0, 0, 0.3)' },
+          borderColor: { _light: 'rgba(36, 188, 227, 0.34)', _dark: 'rgba(80, 201, 233, 0.28)' },
         }}
         cursor={ href ? 'pointer' : 'default' }
       >
         { icon && (
           <Box
             p={ 2.5 }
-            bg={{ _light: 'rgba(102, 126, 234, 0.1)', _dark: 'rgba(66, 153, 225, 0.15)' }}
+            bg={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(80, 201, 233, 0.12)' }}
             display={{ base: 'none', lg: 'flex' }}
             flexShrink={ 0 }
             alignItems="center"
             justifyContent="center"
+            borderRadius="8px"
           >
             <IconSvg
               name={ icon }
               boxSize="24px"
               isLoading={ isLoading }
-              color={{ _light: 'blue.600', _dark: 'blue.400' }}
+              color={ OPENGRADIENT_BRAND.text.accent }
             />
           </Box>
         ) }
@@ -127,7 +129,7 @@ const StatsWidget = ({
         </Box>
         { typeof hint === 'string' ? (
           <Skeleton loading={ isLoading } alignSelf="center" borderRadius="none">
-            <Hint label={ hint } boxSize={ 6 } color={{ _light: 'gray.600', _dark: 'gray.400' }}/>
+            <Hint label={ hint } boxSize={ 6 } color={ OPENGRADIENT_BRAND.text.secondary }/>
           </Skeleton>
         ) : hint }
       </Flex>
diff --git a/ui/snippets/colorMode/ColorModeToggle.tsx b/ui/snippets/colorMode/ColorModeToggle.tsx
new file mode 100644
index 0000000000..ce5bda8b1b
--- /dev/null
+++ b/ui/snippets/colorMode/ColorModeToggle.tsx
@@ -0,0 +1,101 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import * as cookies from 'lib/cookies';
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
+import { Button } from 'toolkit/chakra/button';
+import { useColorMode } from 'toolkit/chakra/color-mode';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  variant?: 'icon' | 'full';
+};
+
+const getTheme = (mode: 'light' | 'dark') => {
+  if (mode === 'light') {
+    return COLOR_THEMES.find((theme) => theme.id === 'light') ?? COLOR_THEMES[0];
+  }
+
+  return COLOR_THEMES.find((theme) => theme.id === 'dark') ?? COLOR_THEMES.filter((theme) => theme.colorMode === 'dark').slice(-1)[0];
+};
+
+const persistColorMode = (mode: 'light' | 'dark') => {
+  const theme = getTheme(mode);
+  const varName = theme.colorMode === 'light' ? '--chakra-colors-white' : '--chakra-colors-black';
+
+  window.document.documentElement.style.setProperty(varName, theme.hex);
+  cookies.set(cookies.NAMES.COLOR_MODE_HEX, theme.hex);
+  cookies.set(cookies.NAMES.COLOR_MODE, theme.colorMode);
+  window.localStorage.setItem(cookies.NAMES.COLOR_MODE, theme.colorMode);
+};
+
+const ColorModeToggle = ({ variant = 'icon' }: Props) => {
+  const { colorMode, setColorMode } = useColorMode();
+  const nextMode = colorMode === 'light' ? 'dark' : 'light';
+  const label = colorMode === 'light' ? 'Dark mode' : 'Light mode';
+  const iconName = colorMode === 'light' ? 'moon' : 'sun';
+
+  const handleClick = React.useCallback(() => {
+    setColorMode(nextMode);
+    persistColorMode(nextMode);
+  }, [ nextMode, setColorMode ]);
+
+  if (variant === 'full') {
+    return (
+      <Button
+        type="button"
+        variant="plain"
+        size="sm"
+        w="100%"
+        justifyContent="flex-start"
+        gap={ 3 }
+        px={ 3 }
+        py={ 2.5 }
+        h="auto"
+        borderRadius="8px"
+        color={{ _light: '#0e4b5b', _dark: '#bdebf7' }}
+        bg={{ _light: 'rgba(36, 188, 227, 0.07)', _dark: 'rgba(36, 188, 227, 0.08)' }}
+        _hover={{
+          bg: { _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.14)' },
+        }}
+        onClick={ handleClick }
+      >
+        <IconSvg name={ iconName } boxSize={ 4 }/>
+        <Text
+          fontSize="11px"
+          fontWeight={ 500 }
+          letterSpacing="0.08em"
+          textTransform="uppercase"
+        >
+          { label }
+        </Text>
+      </Button>
+    );
+  }
+
+  return (
+    <Tooltip content={ label }>
+      <IconButton
+        aria-label={ label }
+        onClick={ handleClick }
+        variant="header"
+        size="md"
+        boxSize={ 10 }
+        borderRadius="8px"
+        color={{ _light: '#0e4b5b', _dark: '#bdebf7' }}
+        borderColor={{ _light: 'rgba(36, 188, 227, 0.22)', _dark: 'rgba(189, 235, 247, 0.18)' }}
+        bg={{ _light: 'rgba(255, 255, 255, 0.72)', _dark: 'rgba(15, 22, 38, 0.62)' }}
+        _hover={{
+          bg: { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.12)' },
+          borderColor: { _light: 'rgba(36, 188, 227, 0.36)', _dark: 'rgba(80, 201, 233, 0.34)' },
+        }}
+      >
+        <IconSvg name={ iconName } boxSize={ 4 }/>
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default React.memo(ColorModeToggle);
diff --git a/ui/snippets/header/HeaderDesktop.tsx b/ui/snippets/header/HeaderDesktop.tsx
index 29f301e237..53d4580a09 100644
--- a/ui/snippets/header/HeaderDesktop.tsx
+++ b/ui/snippets/header/HeaderDesktop.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import RewardsButton from 'ui/rewards/RewardsButton';
+import ColorModeToggle from 'ui/snippets/colorMode/ColorModeToggle';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
@@ -21,8 +22,9 @@ const HeaderDesktop = ({ hideSearchBar, renderSearchBar }: Props) => {
       as="header"
       display={{ base: 'none', lg: 'flex' }}
       width="100%"
+      minH="50px"
       alignItems="center"
-      justifyContent="center"
+      justifyContent={ hideSearchBar ? 'flex-end' : 'center' }
       gap={ 6 }
     >
       { !hideSearchBar && (
@@ -30,15 +32,14 @@ const HeaderDesktop = ({ hideSearchBar, renderSearchBar }: Props) => {
           { searchBar }
         </Box>
       ) }
-      { config.UI.navigation.layout === 'vertical' && (
-        <Box display="flex" gap={ 2 } flexShrink={ 0 }>
-          { config.features.rewards.isEnabled && <RewardsButton/> }
-          {
-            (config.features.account.isEnabled && <UserProfileDesktop/>) ||
-            (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop/>)
-          }
-        </Box>
-      ) }
+      <Box display="flex" gap={ 2 } flexShrink={ 0 }>
+        <ColorModeToggle/>
+        { config.features.rewards.isEnabled && <RewardsButton/> }
+        {
+          (config.features.account.isEnabled && <UserProfileDesktop/>) ||
+          (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop/>)
+        }
+      </Box>
     </HStack>
   );
 };
diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
index 4db200e123..1f4652cba3 100644
--- a/ui/snippets/header/HeaderMobile.tsx
+++ b/ui/snippets/header/HeaderMobile.tsx
@@ -5,6 +5,7 @@ import { useInView } from 'react-intersection-observer';
 import config from 'configs/app';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import RewardsButton from 'ui/rewards/RewardsButton';
+import ColorModeToggle from 'ui/snippets/colorMode/ColorModeToggle';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import UserProfileMobile from 'ui/snippets/user/profile/UserProfileMobile';
@@ -49,6 +50,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
+          <ColorModeToggle/>
           { config.features.rewards.isEnabled && <RewardsButton/> }
           {
             (config.features.account.isEnabled && <UserProfileMobile/>) ||
diff --git a/ui/snippets/navigation/useNavLinkStyleProps.tsx b/ui/snippets/navigation/useNavLinkStyleProps.tsx
index d1d4d4e410..f33f618ebc 100644
--- a/ui/snippets/navigation/useNavLinkStyleProps.tsx
+++ b/ui/snippets/navigation/useNavLinkStyleProps.tsx
@@ -22,8 +22,8 @@ export default function useNavLinkStyleProps({ isActive }: Props) {
       fontWeight: isActive ? 500 : 400,
       lineHeight: '1.3',
       opacity: 1,
-      fontFamily: 'system-ui, -apple-system, sans-serif',
-      letterSpacing: '0.02em',
+      fontFamily: '"Geist Mono", ui-monospace, monospace',
+      letterSpacing: '0.08em',
       textTransform: 'uppercase',
     },
   };
diff --git a/ui/snippets/navigation/vertical/NavLink.tsx b/ui/snippets/navigation/vertical/NavLink.tsx
index 3abcc86ca7..bb4c0df1eb 100644
--- a/ui/snippets/navigation/vertical/NavLink.tsx
+++ b/ui/snippets/navigation/vertical/NavLink.tsx
@@ -37,16 +37,24 @@ const NavLink = ({ item, onClick, isDisabled }: Props) => {
         aria-label={ `${ item.text } link` }
         whiteSpace="nowrap"
         onClick={ onClick }
-        bgColor="transparent"
+        bgColor={ isInternalLink && item.isActive ?
+          { _light: 'rgba(36, 188, 227, 0.09)', _dark: 'rgba(36, 188, 227, 0.12)' } :
+          'transparent'
+        }
+        borderRadius="8px"
         color={ isInternalLink && item.isActive ?
-          { _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' } :
-          { _light: 'rgba(0, 0, 0, 0.65)', _dark: 'rgba(255, 255, 255, 0.75)' }
+          { _light: '#0e4b5b', _dark: '#bdebf7' } :
+          { _light: 'rgba(14, 75, 91, 0.65)', _dark: 'rgba(189, 235, 247, 0.55)' }
         }
         transition="all 0.15s ease-out"
         _hover={{
           color: isDisabled ? undefined : {
-            _light: 'rgba(0, 0, 0, 0.9)',
-            _dark: 'rgba(255, 255, 255, 0.95)',
+            _light: '#1d96b6',
+            _dark: '#50c9e9',
+          },
+          bgColor: isDisabled ? undefined : {
+            _light: 'rgba(36, 188, 227, 0.07)',
+            _dark: 'rgba(36, 188, 227, 0.10)',
           },
         }}
       >
@@ -75,7 +83,8 @@ const NavLink = ({ item, onClick, isDisabled }: Props) => {
               w="6px"
               h="6px"
               borderRadius="50%"
-              bg={{ _light: 'cyan.600', _dark: 'cyan.300' }}
+              bg="#24bce3"
+              boxShadow="0 0 8px rgba(36, 188, 227, 0.7)"
               ml={ 2 }
               flexShrink={ 0 }
             />
diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
index 1f6b8d6d16..1bbab9bf79 100644
--- a/ui/snippets/navigation/vertical/NavLinkGroup.tsx
+++ b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
@@ -26,19 +26,20 @@ const NavLinkGroup = ({ item }: Props) => {
     <Box
       width="260px"
       border="1px solid"
-      borderColor={{ _light: 'rgba(0, 0, 0, 0.12)', _dark: 'rgba(255, 255, 255, 0.18)' }}
+      borderColor={{ _light: 'rgba(36, 188, 227, 0.18)', _dark: 'rgba(189, 235, 247, 0.14)' }}
       bgColor={{
-        _light: 'linear-gradient(180deg, #ffffff 0%, #fafbfc 100%)',
-        _dark: 'linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%)',
+        _light: '#ffffff',
+        _dark: '#0f1626',
       }}
       backgroundImage={{
-        _light: 'linear-gradient(180deg, #ffffff 0%, #fafbfc 100%)',
-        _dark: 'linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%)',
+        _light: 'linear-gradient(180deg, #ffffff 0%, #f4fcfe 100%)',
+        _dark: 'linear-gradient(180deg, #0f1626 0%, #0a0f19 100%)',
       }}
       p={ 2 }
+      borderRadius="8px"
       boxShadow={{
-        _light: '0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)',
-        _dark: '0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3)',
+        _light: '0 16px 44px rgba(14, 75, 91, 0.12)',
+        _dark: '0 18px 50px rgba(0, 0, 0, 0.42)',
       }}
     >
       <VStack gap={ 0 } alignItems="stretch" as="ul">
@@ -51,7 +52,7 @@ const NavLinkGroup = ({ item }: Props) => {
               mb: 2,
               pb: 2,
               borderBottomWidth: '1px',
-              borderColor: { _light: 'rgba(0, 0, 0, 0.08)', _dark: 'rgba(255, 255, 255, 0.12)' },
+              borderColor: { _light: 'rgba(36, 188, 227, 0.14)', _dark: 'rgba(189, 235, 247, 0.10)' },
             }}
           >
             { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
@@ -79,8 +80,8 @@ const NavLinkGroup = ({ item }: Props) => {
         contentProps={{
           p: 0,
           boxShadow: {
-            _light: '0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1)',
-            _dark: '0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4)',
+            _light: '0 18px 50px rgba(14, 75, 91, 0.14)',
+            _dark: '0 18px 52px rgba(0, 0, 0, 0.46)',
           },
         }}
       >
@@ -89,10 +90,14 @@ const NavLinkGroup = ({ item }: Props) => {
           aria-label={ `${ item.text } link group` }
           position="relative"
           cursor="pointer"
-          bgColor="transparent"
+          bgColor={ item.isActive ?
+            { _light: 'rgba(36, 188, 227, 0.09)', _dark: 'rgba(36, 188, 227, 0.12)' } :
+            'transparent'
+          }
+          borderRadius="8px"
           color={ item.isActive ?
-            { _light: 'rgba(0, 0, 0, 0.95)', _dark: 'rgba(255, 255, 255, 0.98)' } :
-            { _light: 'rgba(0, 0, 0, 0.65)', _dark: 'rgba(255, 255, 255, 0.75)' }
+            { _light: '#0e4b5b', _dark: '#bdebf7' } :
+            { _light: 'rgba(14, 75, 91, 0.65)', _dark: 'rgba(189, 235, 247, 0.55)' }
           }
           transition="all 0.15s ease-out"
           py={ 3 }
@@ -101,8 +106,12 @@ const NavLinkGroup = ({ item }: Props) => {
           { ...(item.isActive ? { 'data-selected': true } : {}) }
           _hover={{
             color: {
-              _light: 'rgba(0, 0, 0, 0.9)',
-              _dark: 'rgba(255, 255, 255, 0.95)',
+              _light: '#1d96b6',
+              _dark: '#50c9e9',
+            },
+            bgColor: {
+              _light: 'rgba(36, 188, 227, 0.07)',
+              _dark: 'rgba(36, 188, 227, 0.10)',
             },
           }}
         >
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
index 91876c113a..ba91c511df 100644
--- a/ui/snippets/navigation/vertical/NavigationDesktop.tsx
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -22,14 +22,13 @@ const NavigationDesktop = () => {
       position="relative"
       flexDirection="column"
       alignItems="stretch"
-      bgColor={{
-        _light: 'linear-gradient(180deg, #ffffff 0%, #fafbfc 100%)',
-        _dark: '#0a0a0a',
-      }}
+      bgColor={{ _light: '#fcfdfe', _dark: '#0a0f19' }}
       backgroundImage={{
-        _light: 'linear-gradient(180deg, #ffffff 0%, #fafbfc 100%)',
-        _dark: '#0a0a0a',
+        _light: 'linear-gradient(180deg, #fcfdfe 0%, #f4fcfe 100%)',
+        _dark: 'linear-gradient(180deg, #0a0f19 0%, #0f1626 100%)',
       }}
+      borderRight="1px solid"
+      borderColor={{ _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.10)' }}
       px={ 6 }
       py={ 10 }
       width="260px"
@@ -47,7 +46,7 @@ const NavigationDesktop = () => {
         mb={ 10 }
         pb={ 8 }
         borderBottom="1px solid"
-        borderColor={{ _light: 'rgba(0, 0, 0, 0.08)', _dark: 'rgba(255, 255, 255, 0.12)' }}
+        borderColor={{ _light: 'rgba(36, 188, 227, 0.14)', _dark: 'rgba(189, 235, 247, 0.12)' }}
         position="relative"
         _after={{
           content: '""',
@@ -57,8 +56,8 @@ const NavigationDesktop = () => {
           right: 0,
           height: '1px',
           background: {
-            _light: 'linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%)',
-            _dark: 'linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%)',
+            _light: 'linear-gradient(90deg, transparent 0%, rgba(36, 188, 227, 0.28) 50%, transparent 100%)',
+            _dark: 'linear-gradient(90deg, transparent 0%, rgba(80, 201, 233, 0.24) 50%, transparent 100%)',
           },
         }}
       >
@@ -96,7 +95,7 @@ const NavigationDesktop = () => {
         <Box
           as="nav"
           borderTop="1px solid"
-          borderColor={{ _light: 'rgba(0, 0, 0, 0.08)', _dark: 'rgba(255, 255, 255, 0.12)' }}
+          borderColor={{ _light: 'rgba(36, 188, 227, 0.14)', _dark: 'rgba(189, 235, 247, 0.12)' }}
           w="100%"
           mt={ 8 }
           pt={ 8 }
@@ -109,8 +108,8 @@ const NavigationDesktop = () => {
             right: 0,
             height: '1px',
             background: {
-              _light: 'linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%)',
-              _dark: 'linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%)',
+              _light: 'linear-gradient(90deg, transparent 0%, rgba(36, 188, 227, 0.28) 50%, transparent 100%)',
+              _dark: 'linear-gradient(90deg, transparent 0%, rgba(80, 201, 233, 0.24) 50%, transparent 100%)',
             },
           }}
         >
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index ca8644b2e6..d2e4327066 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -20,7 +20,7 @@ interface Props extends Omit<HTMLChakraProps<'form'>, 'onChange'> {
   onClear: () => void;
   isHomepage?: boolean;
   isSuggestOpen?: boolean;
-  value: string;
+  value?: string;
 }
 
 const SearchBarInput = (
@@ -141,39 +141,45 @@ const SearchBarInput = (
       return { _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' };
     }
     if (isFocused) {
-      return { _light: 'rgba(64, 209, 219, 0.8)', _dark: 'rgba(64, 209, 219, 0.9)' };
+      return { _light: 'rgba(36, 188, 227, 0.75)', _dark: 'rgba(80, 201, 233, 0.82)' };
     }
-    return { _light: 'rgba(0, 0, 0, 0.1)', _dark: 'rgba(255, 255, 255, 0.15)' };
+    return { _light: 'rgba(36, 188, 227, 0.20)', _dark: 'rgba(189, 235, 247, 0.16)' };
   };
 
   const getInputBoxShadow = () => {
     if (!isHomepage) {
       return undefined;
     }
-    return 'none';
+    return isFocused ?
+      { _light: '0 0 0 3px rgba(36, 188, 227, 0.12)', _dark: '0 0 0 3px rgba(80, 201, 233, 0.14)' } :
+      { _light: '0 10px 26px rgba(14, 75, 91, 0.06)', _dark: '0 12px 30px rgba(0, 0, 0, 0.20)' };
   };
 
   const inputBorderColor = getInputBorderColor();
   const inputBoxShadow = getInputBoxShadow();
+  const safeValue = value ?? '';
 
   const startElement = undefined;
 
   const endElement = (
     <>
-      <ClearButton onClick={ onClear } isVisible={ value.length > 0 } mx={ isHomepage ? { base: 3, md: 4 } : 2 }/>
+      <ClearButton onClick={ onClear } isVisible={ safeValue.length > 0 } mx={ isHomepage ? { base: 3, md: 4 } : 2 }/>
       <IconButton
         aria-label="Search"
         onClick={ handleSearchButtonClick }
         type="submit"
         variant="plain"
-        color={{ _light: 'rgba(64, 209, 219, 1)', _dark: 'rgba(64, 209, 219, 1)' }}
+        borderRadius="8px"
+        color={{ _light: '#0e4b5b', _dark: '#bdebf7' }}
+        bg={ isHomepage ? { _light: 'rgba(36, 188, 227, 0.10)', _dark: 'rgba(36, 188, 227, 0.14)' } : undefined }
         _hover={{
-          color: { _light: 'rgba(64, 209, 219, 0.8)', _dark: 'rgba(64, 209, 219, 0.8)' },
+          color: { _light: '#167188', _dark: '#ffffff' },
+          bg: isHomepage ? { _light: 'rgba(36, 188, 227, 0.18)', _dark: 'rgba(36, 188, 227, 0.22)' } : undefined,
         }}
         mr={ isHomepage ? { base: 3, md: 4 } : 2 }
-        boxSize={ isHomepage ? { base: 6, md: 7 } : 6 }
+        boxSize={ isHomepage ? { base: 8, md: 9 } : 6 }
       >
-        <IconSvg name="search" boxSize={ isHomepage ? { base: 5, md: 6 } : 5 }/>
+        <IconSvg name="search" boxSize={ isHomepage ? { base: 4, md: '18px' } : 5 }/>
       </IconButton>
     </>
   );
@@ -206,57 +212,52 @@ const SearchBarInput = (
       >
         <Input
           size={ isHomepage ? 'md' : 'md' }
-          placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
-          value={ value }
+          placeholder={ isMobile ? 'Search by address / ...' : 'Search by address / txn hash / block / token...' }
+          value={ safeValue }
           onChange={ handleChange }
           onFocus={ handleInputFocus }
           onBlur={ handleInputBlur }
           border={ isHomepage ? '1px solid' : '2px solid' }
-          borderColor={ isHomepage ?
-            { _light: 'rgba(0, 0, 0, 0.15)', _dark: 'rgba(255, 255, 255, 0.18)' } :
-            inputBorderColor
-          }
-          color={{ _light: 'black', _dark: 'white' }}
+          borderColor={ inputBorderColor }
+          color={{ _light: '#0e4b5b', _dark: 'rgba(255, 255, 255, 0.94)' }}
           bg={ isHomepage ?
-            { _light: '#ffffff', _dark: '#0a0a0a' } :
+            { _light: 'rgba(255, 255, 255, 0.88)', _dark: 'rgba(10, 15, 25, 0.82)' } :
             undefined
           }
-          backdropFilter="none"
+          backdropFilter={ isHomepage ? 'blur(18px)' : 'none' }
           _focus={{
             outline: 'none',
             bg: isHomepage ? {
-              _light: '#ffffff',
-              _dark: '#0a0a0a',
-            } : undefined,
-            backdropFilter: 'none',
-            borderColor: isHomepage ? {
-              _light: 'rgba(0, 0, 0, 0.2)',
-              _dark: 'rgba(255, 255, 255, 0.25)',
+              _light: 'rgba(255, 255, 255, 0.94)',
+              _dark: 'rgba(10, 15, 25, 0.90)',
             } : undefined,
+            backdropFilter: isHomepage ? 'blur(18px)' : 'none',
+            borderColor: isHomepage ? inputBorderColor : undefined,
           }}
+          fontFamily={ isHomepage ? '"Geist", system-ui, -apple-system, sans-serif' : undefined }
           fontSize={{ base: 'xs', md: 'sm', lg: isHomepage ? 'sm' : 'sm' }}
-          h={ isHomepage ? { base: '50px', md: '56px' } : '50px' }
-          py={ isHomepage ? { base: 4, md: 4.5 } : { base: 3, md: 3.5 } }
+          h={ isHomepage ? { base: '46px', md: '50px' } : '50px' }
+          py={ isHomepage ? { base: 3, md: 3.5 } : { base: 3, md: 3.5 } }
           px={ isHomepage ? { base: 4, md: 5 } : undefined }
-          borderRadius={ isHomepage ? '12px' : undefined }
+          borderRadius={ isHomepage ? '8px' : undefined }
           boxShadow={ inputBoxShadow }
           _hover={ isHomepage && !isFocused ? {
-            borderColor: { _light: 'rgba(0, 0, 0, 0.18)', _dark: 'rgba(255, 255, 255, 0.2)' },
+            borderColor: { _light: 'rgba(36, 188, 227, 0.36)', _dark: 'rgba(80, 201, 233, 0.32)' },
             boxShadow: {
-              _light: '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1)',
-              _dark: '0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.45)',
+              _light: '0 12px 30px rgba(14, 75, 91, 0.08)',
+              _dark: '0 14px 34px rgba(0, 0, 0, 0.24)',
             },
           } : {} }
           _focusVisible={{
             outline: 'none',
           }}
           _autofill={{
-            borderColor: isHomepage ? { _light: 'rgba(0, 0, 0, 0.18)', _dark: 'rgba(255, 255, 255, 0.2)' } : undefined,
+            borderColor: isHomepage ? { _light: 'rgba(36, 188, 227, 0.28)', _dark: 'rgba(80, 201, 233, 0.26)' } : undefined,
             boxShadow: isHomepage ? 'none' : undefined,
           }}
           transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
           _placeholder={{
-            color: isHomepage ? { _light: 'rgba(0, 0, 0, 0.5)', _dark: 'rgba(255, 255, 255, 0.5)' } : undefined,
+            color: isHomepage ? { _light: 'rgba(14, 75, 91, 0.48)', _dark: 'rgba(189, 235, 247, 0.46)' } : undefined,
             opacity: isHomepage ? 1 : undefined,
             fontSize: isHomepage ? { base: 'sm', md: 'sm' } : undefined,
             fontWeight: isHomepage ? 400 : undefined,
diff --git a/ui/txs/TxsContent.tsx b/ui/txs/TxsContent.tsx
index eb7e2ce7fe..5ed70f635d 100644
--- a/ui/txs/TxsContent.tsx
+++ b/ui/txs/TxsContent.tsx
@@ -8,6 +8,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import ExplorerPageSurface from 'ui/shared/Page/ExplorerPageSurface';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 
@@ -23,7 +24,6 @@ const SORT_SEQUENCE: Record<TransactionsSortingField, Array<TransactionsSortingV
 };
 
 type Props = {
-  // eslint-disable-next-line max-len
   query: QueryWithPagesResult<'txs_validated' | 'txs_pending'> | QueryWithPagesResult<'txs_watchlist'> | QueryWithPagesResult<'block_txs'> | QueryWithPagesResult<'zkevm_l2_txn_batch_txs'>;
   showBlockInfo?: boolean;
   showSocketInfo?: boolean;
@@ -101,7 +101,6 @@ const TxsContent = ({
 
   const actionBar = isMobile ? (
     <TxsHeaderMobile
-      mt={ -6 }
       sorting={ sort }
       setSorting={ setSorting }
       paginationProps={ query.pagination }
@@ -125,7 +124,11 @@ const TxsContent = ({
       emptyText="There are no transactions."
       actionBar={ actionBar }
     >
-      { content }
+      { content && (
+        <ExplorerPageSurface overflowX="auto">
+          { content }
+        </ExplorerPageSurface>
+      ) }
     </DataListDisplay>
   );
 };

From 3a38e37fda7e9deec20575233f26dcf1e22a5187 Mon Sep 17 00:00:00 2001
From: Advait Jayant <advaitjk@gmail.com>
Date: Thu, 14 May 2026 19:19:47 +0100
Subject: [PATCH 2/3] Polish explorer responsive layout

---
 ui/pages/VerifiedContracts.tsx             | 4 +++-
 ui/shared/layout/components/MainColumn.tsx | 1 +
 ui/snippets/networkMenu/NetworkLogo.tsx    | 8 ++++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/pages/VerifiedContracts.tsx b/ui/pages/VerifiedContracts.tsx
index 763cca842b..638973b848 100644
--- a/ui/pages/VerifiedContracts.tsx
+++ b/ui/pages/VerifiedContracts.tsx
@@ -92,7 +92,9 @@ const VerifiedContracts = () => {
 
   const filterInput = (
     <FilterInput
-      w={{ base: '100%', lg: '350px' }}
+      flex={{ base: 1, lg: 'unset' }}
+      minW={ 0 }
+      w={{ base: 'auto', lg: '350px' }}
       size="sm"
       onChange={ handleSearchTermChange }
       placeholder="Search by contract name or address"
diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx
index 75133c9651..bad65859ba 100644
--- a/ui/shared/layout/components/MainColumn.tsx
+++ b/ui/shared/layout/components/MainColumn.tsx
@@ -14,6 +14,7 @@ const MainColumn = ({ children, className }: Props) => {
       className={ className }
       flexDir="column"
       flexGrow={ 1 }
+      minW={ 0 }
       w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
       paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
       paddingRight={{ '2xl': 6 }}
diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
index 82449d2756..f5cd467bae 100644
--- a/ui/snippets/networkMenu/NetworkLogo.tsx
+++ b/ui/snippets/networkMenu/NetworkLogo.tsx
@@ -47,12 +47,16 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
     <chakra.a
       className={ className }
       href={ route({ pathname: '/' }) }
-      width={{ base: '180px', lg: isCollapsed === false ? '180px' : '30px', xl: isCollapsed ? '30px' : '180px' }}
+      width={{
+        base: 'clamp(96px, calc(100vw - 220px), 180px)',
+        lg: isCollapsed === false ? '180px' : '30px',
+        xl: isCollapsed ? '30px' : '180px',
+      }}
       height={{ base: '36px', lg: isCollapsed === false ? '36px' : '30px', xl: isCollapsed ? '30px' : '36px' }}
       display="inline-flex"
       overflow="hidden"
       onClick={ onClick }
-      flexShrink={ 0 }
+      flexShrink={{ base: 1, lg: 0 }}
       aria-label="Link to main page"
       transition="transform 0.2s ease, opacity 0.2s ease"
       _hover={{

From c4a3c56c0b787d09b298a443468ab4a6e86f9a02 Mon Sep 17 00:00:00 2001
From: Advait Jayant <advaitjk@gmail.com>
Date: Fri, 15 May 2026 14:49:33 +0100
Subject: [PATCH 3/3] Orient homepage around AI execution

---
 configs/app/ui.ts                           |   2 +-
 ui/home/HeroBanner.tsx                      |  46 +--
 ui/home/TrustedExecution.tsx                | 335 ++++++++++++++++++++
 ui/opengradient/teeRegistry/placeholders.ts |  15 +
 ui/pages/Home.tsx                           |   3 +
 ui/pages/opengradient/TEERegistry.tsx       |  25 +-
 6 files changed, 384 insertions(+), 42 deletions(-)
 create mode 100644 ui/home/TrustedExecution.tsx
 create mode 100644 ui/opengradient/teeRegistry/placeholders.ts

diff --git a/configs/app/ui.ts b/configs/app/ui.ts
index b2eba474e3..5873aa85de 100644
--- a/configs/app/ui.ts
+++ b/configs/app/ui.ts
@@ -49,7 +49,7 @@ const highlightedRoutes = (() => {
 
 const defaultColorTheme = (() => {
   const envValue = getEnvValue('NEXT_PUBLIC_COLOR_THEME_DEFAULT') as ColorThemeId | undefined;
-  return COLOR_THEMES.find((theme) => theme.id === envValue) ?? COLOR_THEMES.find((theme) => theme.id === 'light');
+  return COLOR_THEMES.find((theme) => theme.id === envValue) ?? COLOR_THEMES.find((theme) => theme.id === 'dark');
 })();
 
 const UI = Object.freeze({
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
index 899a1a3cf4..a19b97ce17 100644
--- a/ui/home/HeroBanner.tsx
+++ b/ui/home/HeroBanner.tsx
@@ -1,12 +1,15 @@
 import { Box, Flex, VStack, Text, Grid } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY } from 'lib/opengradient/contracts/teeRegistry';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
 import { LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { PLACEHOLDER_TEE_REGISTRY_STATS, PLACEHOLDER_TEE_TYPES } from 'ui/opengradient/teeRegistry/placeholders';
 import IconSvg, { type IconName } from 'ui/shared/IconSvg';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 
@@ -95,6 +98,16 @@ const HeroBanner = () => {
     },
   });
 
+  const teeRegistryQuery = useQuery({
+    queryKey: TEE_REGISTRY_QUERY_KEY,
+    queryFn: getTEERegistryOverview,
+    placeholderData: {
+      types: PLACEHOLDER_TEE_TYPES,
+      stats: PLACEHOLDER_TEE_REGISTRY_STATS,
+      nodesByType: {},
+    },
+  });
+
   const settlementContractAddress = '0xAa3bB22c5Ef24fe3837134A25A4D801308E2516d';
   const settlementContractAddressV2 = '0xf1dc0d5Dcf2A01924faC78185B9227CF3EC839A5';
   const settlementQuery = useApiQuery('address_counters', {
@@ -122,18 +135,6 @@ const HeroBanner = () => {
     return null;
   }, [ statsQuery.data, statsQuery.isPlaceholderData, apiQuery.data, apiQuery.isPlaceholderData ]);
 
-  const totalBlocks = React.useMemo(() => {
-    const statsData = statsQuery.isPlaceholderData ? undefined : statsQuery.data;
-    const apiData = apiQuery.isPlaceholderData ? undefined : apiQuery.data;
-    if (statsData?.total_blocks?.value) {
-      return Number(statsData.total_blocks.value);
-    }
-    if (apiData?.total_blocks) {
-      return Number(apiData.total_blocks);
-    }
-    return null;
-  }, [ statsQuery.data, statsQuery.isPlaceholderData, apiQuery.data, apiQuery.isPlaceholderData ]);
-
   const llmBatchSettlementsCount = React.useMemo(() => {
     const countersData = settlementQuery.data;
     const countersDataV2 = settlementQueryV2.data;
@@ -145,6 +146,7 @@ const HeroBanner = () => {
     return v1Count + v2Count;
   }, [ settlementQuery.data, settlementQueryV2.data ]);
   const isSettlementCountLoading = llmBatchSettlementsCount === null && (settlementQuery.isPending || settlementQueryV2.isPending);
+  const teeStats = teeRegistryQuery.data?.stats ?? PLACEHOLDER_TEE_REGISTRY_STATS;
 
   const formatNumber = (num: number | null, decimals: number = 2): string => {
     if (num === null) return '-';
@@ -213,7 +215,7 @@ const HeroBanner = () => {
                 fontFamily={ fonts.mono }
                 mb={ 3 }
               >
-                / OpenGradient Network Explorer
+                / AI Execution Network Explorer
               </Text>
 
               <Text
@@ -228,7 +230,7 @@ const HeroBanner = () => {
                   as="span"
                   color={ text.primary }
                 >
-                  OpenGradient
+                  OpenGradient AI
                 </Box>
                 <Box
                   as="span"
@@ -247,7 +249,7 @@ const HeroBanner = () => {
                 mt={ 3 }
                 maxW="620px"
               >
-                Trace transactions, settlement batches, addresses, models, and AI workflows across the OpenGradient network.
+                Trace model inference, x402 settlements, TEE attestations, and AI workflow activity across the OpenGradient network.
               </Text>
             </Box>
 
@@ -313,22 +315,22 @@ const HeroBanner = () => {
                   value="4,500+"
                 />
                 <MetricCard
-                  href={ route({ pathname: '/blocks' }) }
-                  label="Total Blocks"
-                  iconName="block_slim"
-                  loading={ totalBlocks === null && (statsQuery.isPending || apiQuery.isPending) }
-                  value={ formatNumber(totalBlocks, 1) }
+                  href={ route({ pathname: '/tee-registry' }) }
+                  label="TEE Operators"
+                  iconName="nft_shield"
+                  loading={ teeRegistryQuery.isPlaceholderData }
+                  value={ `${ teeStats.activeNodes }/${ teeStats.enabledNodes }` }
                 />
                 <MetricCard
                   href={ route({ pathname: '/address/[hash]', query: { hash: settlementContractAddress } }) }
-                  label="x402 Txns"
+                  label="AI Settlements"
                   iconName="transactions_slim"
                   loading={ isSettlementCountLoading }
                   value={ formatNumber(llmBatchSettlementsCount) }
                 />
                 <MetricCard
                   href={ route({ pathname: '/txs' }) }
-                  label="Transactions"
+                  label="Network Txns"
                   iconName="transactions_slim"
                   loading={ totalTransactions === null && (statsQuery.isPending || apiQuery.isPending) }
                   value={ formatNumber(totalTransactions) }
diff --git a/ui/home/TrustedExecution.tsx b/ui/home/TrustedExecution.tsx
new file mode 100644
index 0000000000..34ca1a026e
--- /dev/null
+++ b/ui/home/TrustedExecution.tsx
@@ -0,0 +1,335 @@
+import { Box, Flex, Grid, HStack, Text, VStack } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import dayjs from 'lib/date/dayjs';
+import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS, type TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { PLACEHOLDER_TEE_REGISTRY_STATS, PLACEHOLDER_TEE_TYPES } from 'ui/opengradient/teeRegistry/placeholders';
+import IconSvg from 'ui/shared/IconSvg';
+
+import { HOME_BRAND } from './brand';
+
+const { colors, fonts, panel, text } = HOME_BRAND;
+
+const formatHash = (hash: string, head = 6, tail = 4) => {
+  if (!hash) return 'N/A';
+  if (hash.length <= head + tail + 3) return hash;
+  return `${ hash.slice(0, head) }...${ hash.slice(-tail) }`;
+};
+
+const formatTimeAgo = (timestamp: bigint) => {
+  if (timestamp === BigInt(0)) return 'Never';
+  return dayjs.unix(Number(timestamp)).fromNow();
+};
+
+const SectionLabel = ({ children }: { children: React.ReactNode }) => (
+  <HStack gap={ 2 }>
+    <Box
+      w="6px"
+      h="6px"
+      borderRadius="50%"
+      bg={ colors.cyan }
+      boxShadow="0 0 10px rgba(36, 188, 227, 0.65)"
+      flexShrink={ 0 }
+    />
+    <Text
+      fontFamily={ fonts.mono }
+      fontSize="11px"
+      fontWeight={ 500 }
+      letterSpacing="0.12em"
+      textTransform="uppercase"
+      color={ text.accent }
+    >
+      { children }
+    </Text>
+  </HStack>
+);
+
+const RegistryMetric = ({ label, value, helper, loading }: { label: string; value: React.ReactNode; helper: string; loading?: boolean }) => (
+  <Box
+    border="1px solid"
+    borderColor={ panel.border }
+    borderRadius="8px"
+    bg={{ _light: 'rgba(255, 255, 255, 0.62)', _dark: 'rgba(15, 22, 38, 0.62)' }}
+    px={ 4 }
+    py={ 3.5 }
+  >
+    <Text
+      fontFamily={ fonts.mono }
+      fontSize="10px"
+      fontWeight={ 500 }
+      letterSpacing="0.08em"
+      textTransform="uppercase"
+      color={ text.secondary }
+      mb={ 2 }
+    >
+      { label }
+    </Text>
+    <Skeleton loading={ loading } w="fit-content">
+      <Text
+        fontFamily={ fonts.mono }
+        fontSize={{ base: '24px', lg: '30px' }}
+        fontWeight={ 500 }
+        lineHeight="1"
+        color={ text.primary }
+      >
+        { value }
+      </Text>
+    </Skeleton>
+    <Text mt={ 2 } fontSize="12px" lineHeight="1.4" color={ text.muted }>
+      { helper }
+    </Text>
+  </Box>
+);
+
+const NodePreview = ({ node, loading }: { node: TEENodeWithStatus; loading?: boolean }) => (
+  <Flex
+    alignItems="center"
+    justifyContent="space-between"
+    gap={ 4 }
+    py={ 3 }
+    borderBottom="1px solid"
+    borderColor={ panel.border }
+    _last={{ borderBottom: 'none' }}
+  >
+    <Skeleton loading={ loading } flex={ 1 } minW={ 0 }>
+      <Box minW={ 0 }>
+        <Flex alignItems="center" gap={ 2 } mb={ 1 }>
+          <Box
+            w="6px"
+            h="6px"
+            borderRadius="50%"
+            bg={ node.isActive ? '#61d199' : '#d6a33d' }
+            boxShadow={ node.isActive ? '0 0 8px rgba(97, 209, 153, 0.62)' : 'none' }
+          />
+          <Text fontFamily={ fonts.mono } fontSize="12px" color={ text.primary } truncate>
+            { formatHash(node.teeId, 8, 4) }
+          </Text>
+        </Flex>
+        <Text fontSize="12px" color={ text.muted } truncate>
+          { node.endpoint || 'No endpoint published' }
+        </Text>
+      </Box>
+    </Skeleton>
+    <Skeleton loading={ loading } w="fit-content">
+      <Text fontFamily={ fonts.mono } fontSize="11px" color={ node.isActive ? text.accent : text.muted } whiteSpace="nowrap">
+        { formatTimeAgo(node.lastHeartbeatAt) }
+      </Text>
+    </Skeleton>
+  </Flex>
+);
+
+const TrustedExecution = () => {
+  const query = useQuery({
+    queryKey: TEE_REGISTRY_QUERY_KEY,
+    queryFn: getTEERegistryOverview,
+    placeholderData: {
+      types: PLACEHOLDER_TEE_TYPES,
+      stats: PLACEHOLDER_TEE_REGISTRY_STATS,
+      nodesByType: {},
+    },
+  });
+
+  const stats = query.data?.stats ?? PLACEHOLDER_TEE_REGISTRY_STATS;
+  const types = query.data?.types ?? PLACEHOLDER_TEE_TYPES;
+  const nodes = React.useMemo(() => {
+    const nodesByType = query.data?.nodesByType ?? {};
+    return Object.values(nodesByType).flat().sort((a, b) => Number(b.lastHeartbeatAt - a.lastHeartbeatAt));
+  }, [ query.data?.nodesByType ]);
+  const primaryType = types[0] ?? PLACEHOLDER_TEE_TYPES[0];
+  const visibleNodes = nodes.slice(0, 3);
+  const isLoading = query.isPlaceholderData;
+
+  return (
+    <Box
+      mt={{ base: 5, lg: 6 }}
+      border="1px solid"
+      borderColor={ panel.border }
+      borderRadius="8px"
+      bg={ panel.bg }
+      boxShadow={ panel.shadow }
+      overflow="hidden"
+    >
+      <Grid
+        templateColumns={{ base: '1fr', xl: '0.92fr 1.08fr' }}
+        gap={ 0 }
+      >
+        <Box
+          p={{ base: 4, md: 5, lg: 6 }}
+          borderRight={{ base: 'none', xl: '1px solid' }}
+          borderBottom={{ base: '1px solid', xl: 'none' }}
+          borderColor={ panel.border }
+          bg={{
+            _light: 'linear-gradient(135deg, rgba(36, 188, 227, 0.08), rgba(255, 255, 255, 0.34))',
+            _dark: 'linear-gradient(135deg, rgba(36, 188, 227, 0.10), rgba(10, 15, 25, 0.20))',
+          }}
+        >
+          <SectionLabel>Trusted AI execution</SectionLabel>
+          <Text
+            as="h2"
+            mt={ 4 }
+            fontFamily={ fonts.sans }
+            fontSize={{ base: '26px', md: '32px', lg: '36px' }}
+            fontWeight={ 500 }
+            lineHeight="1.08"
+            color={ text.primary }
+          >
+            Attested TEE operators for model inference
+          </Text>
+          <Text
+            mt={ 3 }
+            fontSize={{ base: '14px', md: '15px' }}
+            lineHeight="1.65"
+            color={ text.secondary }
+            maxW="640px"
+          >
+            OpenGradient routes AI workloads through registered enclaves with approved PCR identities, live heartbeats, and on-chain operator records.
+          </Text>
+
+          <Flex mt={ 5 } gap={ 3 } flexWrap="wrap">
+            <Link
+              href={ route({ pathname: '/tee-registry' }) }
+              display="inline-flex"
+              alignItems="center"
+              gap={ 2 }
+              px={ 3.5 }
+              py={ 2.5 }
+              borderRadius="8px"
+              bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.14)' }}
+              color={ text.accent }
+              fontFamily={ fonts.mono }
+              fontSize="11px"
+              fontWeight={ 500 }
+              letterSpacing="0.08em"
+              textTransform="uppercase"
+              _hover={{ textDecoration: 'none', bg: { _light: 'rgba(36, 188, 227, 0.18)', _dark: 'rgba(36, 188, 227, 0.20)' } }}
+            >
+              Open registry
+              <IconSvg name="arrows/east" boxSize={ 4 }/>
+            </Link>
+            <Link
+              href={ route({ pathname: '/address/[hash]', query: { hash: TEE_REGISTRY_ADDRESS } }) }
+              display="inline-flex"
+              alignItems="center"
+              gap={ 2 }
+              px={ 3.5 }
+              py={ 2.5 }
+              border="1px solid"
+              borderColor={ panel.border }
+              borderRadius="8px"
+              color={ text.secondary }
+              fontFamily={ fonts.mono }
+              fontSize="11px"
+              fontWeight={ 500 }
+              letterSpacing="0.08em"
+              textTransform="uppercase"
+              _hover={{ textDecoration: 'none', color: text.accent }}
+            >
+              Contract
+              <IconSvg name="arrows/east" boxSize={ 4 }/>
+            </Link>
+          </Flex>
+        </Box>
+
+        <Box p={{ base: 4, md: 5, lg: 6 }}>
+          <Grid templateColumns={{ base: '1fr', md: 'repeat(3, minmax(0, 1fr))' }} gap={ 3 } mb={ 4 }>
+            <RegistryMetric
+              label="Active TEEs"
+              value={ `${ stats.activeNodes }/${ stats.enabledNodes }` }
+              helper="Heartbeat-valid operators"
+              loading={ isLoading }
+            />
+            <RegistryMetric
+              label="Execution type"
+              value={ primaryType.name }
+              helper="Registered AI workload class"
+              loading={ isLoading }
+            />
+            <RegistryMetric
+              label="Approved PCRs"
+              value={ stats.approvedPCRs.toLocaleString() }
+              helper="Allowed enclave identities"
+              loading={ isLoading }
+            />
+          </Grid>
+
+          <Grid templateColumns={{ base: '1fr', lg: 'minmax(0, 0.86fr) minmax(0, 1.14fr)' }} gap={ 4 }>
+            <Box
+              border="1px solid"
+              borderColor={ panel.border }
+              borderRadius="8px"
+              bg={{ _light: 'rgba(255, 255, 255, 0.52)', _dark: 'rgba(15, 22, 38, 0.52)' }}
+              p={ 4 }
+            >
+              <Text fontFamily={ fonts.mono } fontSize="10px" fontWeight={ 500 } letterSpacing="0.08em" textTransform="uppercase" color={ text.secondary }>
+                Primary registry type
+              </Text>
+              <Skeleton loading={ isLoading } w="fit-content">
+                <Text mt={ 3 } fontFamily={ fonts.sans } fontSize="18px" fontWeight={ 600 } color={ text.primary }>
+                  { primaryType.name }
+                </Text>
+              </Skeleton>
+              <Grid templateColumns="repeat(3, minmax(0, 1fr))" gap={ 3 } mt={ 4 }>
+                <Box>
+                  <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">Active</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.activeNodes }/{ primaryType.totalNodes }</Text>
+                </Box>
+                <Box>
+                  <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">Enabled</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.enabledNodes }</Text>
+                </Box>
+                <Box>
+                  <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">PCRs</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.approvedPCRs }</Text>
+                </Box>
+              </Grid>
+              <Box mt={ 4 } h="3px" borderRadius="2px" bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' }} overflow="hidden">
+                <Box
+                  h="100%"
+                  w={ primaryType.totalNodes > 0 ? `${ Math.round((primaryType.activeNodes / primaryType.totalNodes) * 100) }%` : '0' }
+                  minW={ primaryType.activeNodes > 0 ? '18px' : '0' }
+                  bg={ colors.cyan }
+                  borderRadius="2px"
+                />
+              </Box>
+            </Box>
+
+            <Box
+              border="1px solid"
+              borderColor={ panel.border }
+              borderRadius="8px"
+              bg={{ _light: 'rgba(255, 255, 255, 0.52)', _dark: 'rgba(15, 22, 38, 0.52)' }}
+              px={ 4 }
+              py={ 3 }
+              minW={ 0 }
+            >
+              <Flex alignItems="center" justifyContent="space-between" gap={ 3 } mb={ 1 }>
+                <Text fontFamily={ fonts.mono } fontSize="10px" fontWeight={ 500 } letterSpacing="0.08em" textTransform="uppercase" color={ text.secondary }>
+                  Live operators
+                </Text>
+                <Text fontFamily={ fonts.mono } fontSize="10px" color={ text.muted }>
+                  { stats.activeNodes } active
+                </Text>
+              </Flex>
+              <VStack align="stretch" gap={ 0 }>
+                { visibleNodes.length > 0 ? visibleNodes.map((node) => (
+                  <NodePreview key={ node.teeId } node={ node } loading={ isLoading }/>
+                )) : (
+                  <Text py={ 5 } fontSize="13px" color={ text.muted }>
+                    Registry nodes will appear here as they are indexed.
+                  </Text>
+                ) }
+              </VStack>
+            </Box>
+          </Grid>
+        </Box>
+      </Grid>
+    </Box>
+  );
+};
+
+export default React.memo(TrustedExecution);
diff --git a/ui/opengradient/teeRegistry/placeholders.ts b/ui/opengradient/teeRegistry/placeholders.ts
new file mode 100644
index 0000000000..cdc706079b
--- /dev/null
+++ b/ui/opengradient/teeRegistry/placeholders.ts
@@ -0,0 +1,15 @@
+import type { TEERegistryStats, TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
+
+export const PLACEHOLDER_TEE_REGISTRY_STATS: TEERegistryStats = {
+  totalTypes: 3,
+  totalNodes: 12,
+  activeNodes: 8,
+  enabledNodes: 10,
+  approvedPCRs: 5,
+};
+
+export const PLACEHOLDER_TEE_TYPES: Array<TEETypeSummary> = [
+  { typeId: 0, name: 'LLM Inference', totalNodes: 5, enabledNodes: 4, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
+  { typeId: 1, name: 'Agent Execution', totalNodes: 4, enabledNodes: 3, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
+  { typeId: 2, name: 'Model Training', totalNodes: 3, enabledNodes: 3, activeNodes: 2, approvedPCRs: 1, addedAt: BigInt(0) },
+];
diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx
index 22655b2ad7..a102530562 100644
--- a/ui/pages/Home.tsx
+++ b/ui/pages/Home.tsx
@@ -8,6 +8,7 @@ import LatestArbitrumL2Batches from 'ui/home/latestBatches/LatestArbitrumL2Batch
 import LatestZkEvmL2Batches from 'ui/home/latestBatches/LatestZkEvmL2Batches';
 import LatestBlocks from 'ui/home/LatestBlocks';
 import Transactions from 'ui/home/Transactions';
+import TrustedExecution from 'ui/home/TrustedExecution';
 import AdBanner from 'ui/shared/ad/AdBanner';
 
 const rollupFeature = config.features.rollup;
@@ -44,6 +45,8 @@ const Home = () => {
             justifyContent="center"
           />
 
+          <TrustedExecution/>
+
           <Flex
             mt={{ base: 5, lg: 6 }}
             direction={{ base: 'column', lg: 'row' }}
diff --git a/ui/pages/opengradient/TEERegistry.tsx b/ui/pages/opengradient/TEERegistry.tsx
index 6539a44107..9da00426d3 100644
--- a/ui/pages/opengradient/TEERegistry.tsx
+++ b/ui/pages/opengradient/TEERegistry.tsx
@@ -5,30 +5,17 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS } from 'lib/opengradient/contracts/teeRegistry';
-import type { TEERegistryStats, TEETypeSummary, TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
+import type { TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
 import { Checkbox } from 'toolkit/chakra/checkbox';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
+import { PLACEHOLDER_TEE_REGISTRY_STATS, PLACEHOLDER_TEE_TYPES } from 'ui/opengradient/teeRegistry/placeholders';
 import TEENodeDetailDrawer from 'ui/opengradient/teeRegistry/TEENodeDetailDrawer';
 import TEENodesTable from 'ui/opengradient/teeRegistry/TEENodesTable';
 import TEETypeCard from 'ui/opengradient/teeRegistry/TEETypeCard';
 import IconSvg, { type IconName } from 'ui/shared/IconSvg';
 
-const PLACEHOLDER_STATS: TEERegistryStats = {
-  totalTypes: 3,
-  totalNodes: 12,
-  activeNodes: 8,
-  enabledNodes: 10,
-  approvedPCRs: 5,
-};
-
-const PLACEHOLDER_TYPES: Array<TEETypeSummary> = [
-  { typeId: 0, name: 'LLM Inference', totalNodes: 5, enabledNodes: 4, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
-  { typeId: 1, name: 'Agent Execution', totalNodes: 4, enabledNodes: 3, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
-  { typeId: 2, name: 'Model Training', totalNodes: 3, enabledNodes: 3, activeNodes: 2, approvedPCRs: 1, addedAt: BigInt(0) },
-];
-
 const { colors, fonts, panel, text } = OPENGRADIENT_BRAND;
 
 type MetricCardProps = {
@@ -116,14 +103,14 @@ const TEERegistry = () => {
     queryKey: TEE_REGISTRY_QUERY_KEY,
     queryFn: getTEERegistryOverview,
     placeholderData: {
-      types: PLACEHOLDER_TYPES,
-      stats: PLACEHOLDER_STATS,
+      types: PLACEHOLDER_TEE_TYPES,
+      stats: PLACEHOLDER_TEE_REGISTRY_STATS,
       nodesByType: {},
     },
   });
 
-  const stats = query.data?.stats ?? PLACEHOLDER_STATS;
-  const types = query.data?.types ?? PLACEHOLDER_TYPES;
+  const stats = query.data?.stats ?? PLACEHOLDER_TEE_REGISTRY_STATS;
+  const types = query.data?.types ?? PLACEHOLDER_TEE_TYPES;
 
   const allNodes = React.useMemo(() => {
     const nodesByType = query.data?.nodesByType ?? {};