diff --git a/app/app.nix b/app/app.nix
index 656cb2f0fd..f9655fef27 100644
--- a/app/app.nix
+++ b/app/app.nix
@@ -19,7 +19,7 @@ _: {
     {
       packages = {
         app = jsPkgs.buildNpmPackage {
-          npmDepsHash = "sha256-WjabrGBsnp+AbkpCEPyseEH0RJU3SjntS1SBum5gMXM=";
+          npmDepsHash = "sha256-AQv8y9nIDlMwlDX7D1R8iR+5RSkSJHx+s9By4tr87kU=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [
diff --git a/app/package-lock.json b/app/package-lock.json
index 6f40bbb790..e80f7db915 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -14,6 +14,7 @@
         "@cosmjs/proto-signing": "^0.33.0",
         "@cosmjs/stargate": "0.33.0",
         "@cosmjs/tendermint-rpc": "^0.33.0",
+        "@number-flow/svelte": "^0.3.3",
         "@tanstack/match-sorter-utils": "^8.19.4",
         "@tanstack/query-core": "5.61.5",
         "@tanstack/svelte-query": "5.61.5",
@@ -1861,6 +1862,19 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@number-flow/svelte": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@number-flow/svelte/-/svelte-0.3.3.tgz",
+      "integrity": "sha512-wo5tiU1qKc74k61sNx8GwvnmZ7yKdbfj1onjzaAa67HRXFClRcrfLlXXatBSQ/uK2XTz9156ILs3VmpuSG1sFA==",
+      "license": "MIT",
+      "dependencies": {
+        "esm-env": "^1.1.4",
+        "number-flow": "0.5.3"
+      },
+      "peerDependencies": {
+        "svelte": "^4 || ^5"
+      }
+    },
     "node_modules/@paulmillr/qr": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@paulmillr/qr/-/qr-0.2.1.tgz",
@@ -5221,7 +5235,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
       "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/estree-walker": {
@@ -7045,6 +7058,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/number-flow": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/number-flow/-/number-flow-0.5.3.tgz",
+      "integrity": "sha512-iLKyssImNWQmJ41rza9K7P5lHRZTyishi/9FarWPLQHYY2Ydtl6eiXINEjZ1fa8dHeY0O7+YOD+Py3ZsJddYkg==",
+      "license": "MIT",
+      "dependencies": {
+        "esm-env": "^1.1.4"
+      }
+    },
     "node_modules/obj-multiplex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/obj-multiplex/-/obj-multiplex-1.0.0.tgz",
diff --git a/app/package.json b/app/package.json
index 32250729ae..685ce740a1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,14 +15,12 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "temporal-polyfill": "^0.2.5",
-    "mode-watcher": "0.5.0",
-    "svelte-sonner": "^0.3.27",
     "@cosmjs/amino": "^0.33.0",
     "@cosmjs/cosmwasm-stargate": "0.33.0",
     "@cosmjs/proto-signing": "^0.33.0",
     "@cosmjs/stargate": "0.33.0",
     "@cosmjs/tendermint-rpc": "^0.33.0",
+    "@number-flow/svelte": "^0.3.3",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/query-core": "5.61.5",
     "@tanstack/svelte-query": "5.61.5",
@@ -35,8 +33,11 @@
     "cmdk-sv": "^0.0.18",
     "gql.tada": "1.8.10",
     "graphql-request": "7.1.2",
+    "mode-watcher": "0.5.0",
     "svelte-persisted-store": "^0.11.0",
     "svelte-radix": "^1.1.1",
+    "svelte-sonner": "^0.3.27",
+    "temporal-polyfill": "^0.2.5",
     "three": "0.170.0",
     "valibot": "0.42.1",
     "vaul-svelte": "^0.3.2",
diff --git a/app/src/lib/components/DegenTrace.svelte b/app/src/lib/components/DegenTrace.svelte
index 73bfa93ef4..9c0cf9648a 100644
--- a/app/src/lib/components/DegenTrace.svelte
+++ b/app/src/lib/components/DegenTrace.svelte
@@ -59,9 +59,9 @@ $: statusText = {
 }
 
 const statusTitle = {
-  transferring: "TRANSFER IN PROGRESS",
-  transferred: "TRANSFER COMPLETE",
-  acknowledged: "TRANSFER CONFIRMED"
+  transferring: "Transfer in progress",
+  transferred: "Transfer complete",
+  acknowledged: "Transfer confirmed"
 }
 
 $: progress = progressMap[transferStatus]
@@ -94,12 +94,12 @@ $: delayAck = medianAck ? Math.max(0, elapsed - medianAck) : 0
 </script>
 
 {#if !$stats.isError}
-  <div class="border border-2 p-4 space-y-4 w-full">
+  <div class="border rounded p-4 space-y-4 w-full">
     <h2 class="text-lg font-bold">{title}</h2>
 
     <!-- PROGRESS LINE -->
     <div class="w-full">
-      <div class="relative h-4 bg-gray-200 overflow-hidden border border-2 border-black">
+      <div class="relative h-4 bg-neutral-800 overflow-hidden border-2  border-black">
         <!-- Vertical markers at 33% and 66% -->
         <div class="absolute left-[33%] top-0 h-full w-[2px] bg-black"></div>
         <div class="absolute left-[66%] top-0 h-full w-[2px] bg-black"></div>
diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index b1c2401797..e58895893e 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -54,7 +54,7 @@ $: if ($navigating) sheetOpen = false
       builders={[builder]}
       class={cn(
         $connectedWallets === 1 ? "w-[75px]" : "w-[50px]",
-        "space-x-1.5 lg:w-[180px] text-md bg-accent text-black ml-auto",
+        "space-x-1.5 lg:w-[160px] text-md bg-white text-black ml-auto",
         "hover:bg-cyan-300/90",
         $sepoliaStore.connectionStatus === "connected" &&
           $cosmosStore.connectionStatus === "connected",
@@ -62,8 +62,8 @@ $: if ($navigating) sheetOpen = false
       on:click={() => (sheetOpen = !sheetOpen)}
       size="sm"
     >
-      <WalletIcon class="size-6 text-black" />
-      <span class="font-supermolot font-bold uppercase lg:block hidden">
+      <!--<WalletIcon class="size-6 text-black" />!-->
+      <span class="font-bold lg:block hidden">
         {buttonText}
       </span>
       <span class={cn($connectedWallets === 1 ? "font-supermolot font-bold uppercase" : "hidden")}>
diff --git a/app/src/lib/components/footer.svelte b/app/src/lib/components/footer.svelte
index 457802162d..41ae3254e4 100644
--- a/app/src/lib/components/footer.svelte
+++ b/app/src/lib/components/footer.svelte
@@ -23,7 +23,7 @@ let buttons = [
 
 <footer
   class={cn(
-    'uppercase font-supermolot font-bold text-xl',
+    'font-bold text-xl',
     'border-t bg-card',
     'grid md:hidden grid-cols-4 place-content-center items-center',
     // styling children
diff --git a/app/src/lib/components/header/header.svelte b/app/src/lib/components/header/header.svelte
index bcb56a263b..99d84d6505 100644
--- a/app/src/lib/components/header/header.svelte
+++ b/app/src/lib/components/header/header.svelte
@@ -43,7 +43,7 @@ import { routes } from "$lib/components/navigation/index.ts"
             : [
                 "h-9",
                 currentRoute
-                  ? "bg-foreground text-primary-foreground !hover:bg-foreground !hover:text-primary-foreground"
+                  ? " !hover:bg-foreground !hover:text-primary-foreground"
                   : "",
               ],
         )}
diff --git a/app/src/lib/components/packet-path.svelte b/app/src/lib/components/packet-path.svelte
index 61d7ab3128..283a0811a5 100644
--- a/app/src/lib/components/packet-path.svelte
+++ b/app/src/lib/components/packet-path.svelte
@@ -18,7 +18,7 @@ export let packet: {
 <section class="flex flex-col sm:flex-row">
   <div class="flex-1 lex-col text-muted-foreground">
     <h2
-      class="font-supermolot uppercase md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap"
+      class="capitalize md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap"
     >
       <ChainDetails highlightEnabled={false} {chains} chainId={packet.source_chain_id}/>
     </h2>
@@ -53,7 +53,7 @@ export let packet: {
   </div>
   <div class="flex-1 sm:text-right flex-col text-muted-foreground">
     <h2
-      class="font-supermolot uppercase md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap"
+      class="capitalize md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap"
     >
       <ChainDetails highlightEnabled={false} {chains} chainId={packet.destination_chain_id}/>
     </h2>
diff --git a/app/src/lib/components/search/search-bar.svelte b/app/src/lib/components/search/search-bar.svelte
index 703709cf1d..3896ed2082 100644
--- a/app/src/lib/components/search/search-bar.svelte
+++ b/app/src/lib/components/search/search-bar.svelte
@@ -10,7 +10,7 @@ export let onInputChange: ((event: InputEvent) => void) | undefined = undefined
 export let windowWidth = window.innerWidth
 </script>
 
-<div class="flex justify-end">
+<div class="flex justify-end rounded">
     <Button size="icon" variant="outline" class="sm:hidden" on:click={onInputClick}>
         <SearchIcon class="size-5 text-muted-foreground"/>
     </Button>
@@ -34,10 +34,10 @@ export let windowWidth = window.innerWidth
       ? 'Search for address or tx hash...'
       : 'Search...'}
                 class={cn(
-      'h-10 cursor-pointer',
+      'h-10 cursor-pointer rounded',
       'dark:hover:bg-muted hover:bg-secondary',
       'shadow-sm transition-colors placeholder:text-muted-foreground',
-      'w-full bg-background pl-8 self-stretch lowercase border-[1px] border-input',
+      'w-full bg-background pl-8 self-stretch border border-input',
       'focus-visible:border-secondary focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
     )}
         />
@@ -46,7 +46,7 @@ export let windowWidth = window.innerWidth
       'h-7 gap-0.5 px-1.5',
       'text-white dark:text-black',
       'absolute select-none pointer-events-none',
-      'right-1.5 top-1.5 items-center border bg-primary font-mono text-xs font-medium opacity-100 hidden md:inline-flex',
+      'right-1.5 top-1.5 items-center rounded bg-primary font-mono text-xs font-medium opacity-100 hidden md:inline-flex',
     )}
         >
             <span class="text-sm mb-1"><span class="text-lg mr-0.25">⌘</span>K</span>
diff --git a/app/src/lib/components/spinning-outline-logo-three.svelte b/app/src/lib/components/spinning-outline-logo-three.svelte
index 0069ead20a..711be4c7c9 100644
--- a/app/src/lib/components/spinning-outline-logo-three.svelte
+++ b/app/src/lib/components/spinning-outline-logo-three.svelte
@@ -15,7 +15,7 @@ let cubeCount = 16
 let logoWidth = cubeWidth * cubeCount + gap * (cubeCount - 1)
 let cubesY = cubeWidth * 2 + gap
 $: cubeDelta = (20 - cubeWidth) / 2
-let strokeWidth = 2.5
+let strokeWidth = 1
 
 let threeContainer: HTMLElement
 let threeCanvas: HTMLCanvasElement
diff --git a/app/src/lib/components/stats-bar-stat.svelte b/app/src/lib/components/stats-bar-stat.svelte
index 5d651dd7fb..83fa094d2f 100644
--- a/app/src/lib/components/stats-bar-stat.svelte
+++ b/app/src/lib/components/stats-bar-stat.svelte
@@ -2,6 +2,7 @@
 import { deviceWidth } from "$lib/utilities/device.ts"
 import { cn } from "$lib/utilities/shadcn.ts"
 import LoadingDots from "$lib/components/loading-dots.svelte"
+import NumberFlow from "@number-flow/svelte"
 
 export let label: string
 export let value: number | string
@@ -13,35 +14,27 @@ function formatValue(value: number | string): string {
   }
   return value
 }
+
+let valueAnimated = 0
+
+$: if (!Number.isNaN(+value)) {
+  valueAnimated = +value
+}
 </script>
 
-<div class={cn("uppercase  flex px-6 py-4 border-none", $deviceWidth >= 888 ? "w-fit" : "w-full")}>
-  <div class="text-xl pt-2 font-bold divide-y" on:copy={(event) => {
+<div class={cn("capitalize  flex px-6 py-4 border-none", $deviceWidth >= 888 ? "w-fit" : "w-full")}>
+  <div class="text-xl font-bold" on:copy={(event) => {
       event?.clipboardData?.setData('text/plain', value.toString());
       event.preventDefault();
     }}>
-    <h3 class="text-sm pb-2">{label}</h3>
+    <h3 class="text-xs pt-2 text-muted-foreground">{label}</h3>
     {#if !value}
       <div class="flex justify-start">
         <LoadingDots class="size-6"/>
       </div>
     {:else }
-      {#key value}
-        <p class="text-xl pt-2 font-bold" class:blink={blink}>{formatValue(value)}</p>
-      {/key}
+      <p class="text-xl font-bold"><NumberFlow value={valueAnimated}/></p>
     {/if}
   </div>
   <slot/>
 </div>
-
-<style lang="postcss">
-    .blink {
-        animation: blink-animation 0.5s;
-    }
-
-    @keyframes blink-animation {
-        0% { @apply text-accent; }
-        100% { @apply text-primary; }
-    }
-</style>
-
diff --git a/app/src/lib/components/trace.svelte b/app/src/lib/components/trace.svelte
index 775aa96bd9..2e0979e782 100644
--- a/app/src/lib/components/trace.svelte
+++ b/app/src/lib/components/trace.svelte
@@ -98,19 +98,19 @@ $: console.log(pTraces)
 
 <DegenTrace {sourceChainId} {destinationChainId} {transferStatus} {sentTimestamp}/>
 
-<ol class="max-w-full w-full -my-4"> <!-- offset padding surplus !-->
+<ol class="max-w-full w-full -mb-2 mt-2"> <!-- offset padding surplus !-->
 {#each pTraces as trace, index}
   <li class="flex gap-4 w-full">
     <div class="flex flex-col items-center">
       <!-- top trace connector !-->
       <div class={cn(
-          "w-1 flex-1",
-          index !== 0 ?  "dark:bg-neutral-500 bg-black" : "",
+          "w-[2px] flex-1",
+          index !== 0 ?  "dark:bg-neutral-800 bg-black" : "",
           )}></div>
       <div class={cn(
-        "size-12 border-4 dark:border-neutral-500 relative transition-all duration-300",
-        trace.status === "PENDING" ? "bg-white dark:bg-neutral-700" :
-        trace.status === "IN_PROGRESS" ? "bg-white dark:bg-neutral-700" :
+        "size-10 border-2 rounded dark:border-neutral-800 relative transition-all duration-300",
+        trace.status === "PENDING" ? "bg-white dark:bg-neutral-900" :
+        trace.status === "IN_PROGRESS" ? "bg-white dark:bg-neutral-900" :
         trace.status === "COMPLETED" ? "bg-accent" :
         trace.status === "ERROR" ? "bg-black" :
         trace.status === "WARNING" ? "bg-yellow-300" : ""
@@ -130,14 +130,14 @@ $: console.log(pTraces)
         {/if}
       </div>
       <!-- bottom trace connector !-->
-      <div class={cn("w-1 flex-1",
-      index === pTraces.length - 1 ? "bg-transparent" : "dark:bg-neutral-500 bg-black",
+      <div class={cn("w-[2px] flex-1",
+      index === pTraces.length - 1 ? "bg-transparent" : "dark:bg-neutral-800 bg-black",
       index !== pTraces.length - 1  &&
       trace.status !== "ERROR" &&
       trace.status !== "WARNING" ?  "bg-black" : "")
       }></div>
     </div>
-    <div class="font-bold py-4 flex flex-col min-h-[80px] max-w-[calc(100%-80px)] break-words justify-center">
+    <div class="font-bold flex flex-col min-h-[60px] max-w-[calc(100%-80px)] break-words justify-center">
       {#if trace.timestamp}
         <p class="text-xs -mb-1 text-muted-foreground">{toIsoString(new Date(trace.timestamp)).split('T')[1]} on {toDisplayName(trace.chain?.chain_id, chains)} at {#if trace.block_url}<a class="underline" target="_blank" href={trace.block_url}>{trace.height}</a>{:else}{trace.height}{/if}</p>
       {/if}
diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
index bcfb2948c2..007f0a340e 100644
--- a/app/src/lib/components/transfer-details.svelte
+++ b/app/src/lib/components/transfer-details.svelte
@@ -85,7 +85,7 @@ let processedTransfers = derived(
         ?.explorers?.at(0)}
       {#if transfer.source_chain_id !== null && transfer.destination_chain_id !== null}
         <Card.Root
-          class="flex flex-col w-full lg:w-auto max-w-full overflow-y-hidden overflow-x-auto justify-self-center dark:bg-muted"
+          class="flex flex-col w-full lg:w-auto max-w-full overflow-y-hidden overflow-x-auto justify-self-center"
         >
           <Card.Header
             class="font-bold text-md text-center break-words text-muted-foreground flex flex-row gap-2 justify-center"
diff --git a/app/src/lib/components/ui/badge/index.ts b/app/src/lib/components/ui/badge/index.ts
index 20ca01358b..7ab902c23f 100644
--- a/app/src/lib/components/ui/badge/index.ts
+++ b/app/src/lib/components/ui/badge/index.ts
@@ -2,7 +2,7 @@ import { type VariantProps, tv } from "tailwind-variants"
 export { default as Badge } from "./badge.svelte"
 
 export const badgeVariants = tv({
-  base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  base: "inline-flex font-bold select-none items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   variants: {
     variant: {
       default:
diff --git a/app/src/lib/components/ui/button/index.ts b/app/src/lib/components/ui/button/index.ts
index 7a9af9a4d7..89072d2d7f 100644
--- a/app/src/lib/components/ui/button/index.ts
+++ b/app/src/lib/components/ui/button/index.ts
@@ -3,16 +3,16 @@ import type { Button as ButtonPrimitive } from "bits-ui"
 import Root from "./button.svelte"
 
 const buttonVariants = tv({
-  base: "inline-flex items-center justify-center whitespace-nowrap text-sm font-supermolot font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  base: "rounded inline-flex items-center justify-center whitespace-nowrap text-sm  font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
-      default: "bg-primary text-primary-foreground hover:bg-primary/90 uppercase font-semibold",
-      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      default: "bg-primary capitalize text-primary-foreground hover:bg-primary/90  font-semibold",
+      destructive: "bg-destructive capitalize text-destructive-foreground hover:bg-destructive/90",
       outline:
-        "border border-muted-foreground bg-background hover:bg-accent hover:text-accent-foreground dark:hover:text-black",
-      secondary: "bg-secondary text-secondary-foreground uppercase hover:bg-secondary/80",
-      ghost: "hover:bg-accent hover:text-accent-foreground font-sans ",
-      link: "text-primary no-underline hover:no-underline font-supermolot font-bold text-md decoration-transparent uppercase rounded-none border-solid"
+        "border capitalize border-muted-foreground bg-background hover:bg-accent hover:text-accent-foreground dark:hover:text-black",
+      secondary: "bg-secondary capitalize text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent capitalize hover:text-accent-foreground font-sans ",
+      link: "text-primary no-underline capitalize hover:no-underline  font-bold text-md decoration-transparent rounded-none border-solid"
     },
     size: {
       default: "h-10 px-4 py-2",
diff --git a/app/src/lib/components/ui/card/card.svelte b/app/src/lib/components/ui/card/card.svelte
index 8e9530a874..be2babd508 100644
--- a/app/src/lib/components/ui/card/card.svelte
+++ b/app/src/lib/components/ui/card/card.svelte
@@ -9,7 +9,7 @@ export { className as class }
 </script>
 
 <div
-  class={cn('border bg-card text-card-foreground shadow-sm dark:bg-muted', className)}
+  class={cn('border rounded bg-card text-card-foreground shadow-sm', className)}
   {...$$restProps}
 >
   <slot />
diff --git a/app/src/lib/components/ui/table/table-cell.svelte b/app/src/lib/components/ui/table/table-cell.svelte
index 6af9fe242c..b255c06725 100644
--- a/app/src/lib/components/ui/table/table-cell.svelte
+++ b/app/src/lib/components/ui/table/table-cell.svelte
@@ -9,7 +9,7 @@ export { className as class }
 </script>
 
 <td
-  class={cn('px-2 py-1 align-middle [&:has([role=checkbox])]:pr-0', className)}
+  class={cn('px-[16px] py-[6px] align-middle [&:has([role=checkbox])]:pr-0', className)}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/app/src/lib/components/ui/table/table-head.svelte b/app/src/lib/components/ui/table/table-head.svelte
index d73accdfa1..ac10170c13 100644
--- a/app/src/lib/components/ui/table/table-head.svelte
+++ b/app/src/lib/components/ui/table/table-head.svelte
@@ -10,7 +10,7 @@ export { className as class }
 
 <th
   class={cn(
-    'h-12 px-2 text-left align-middle font-bold uppercase [&:has([role=checkbox])]:pr-0',
+    'px-[16px] h-12 text-left text-sm align-middle font-normal text-muted-foreground capitalize [&:has([role=checkbox])]:pr-0',
     className,
   )}
   {...$$restProps}
diff --git a/app/src/lib/components/ui/table/table.svelte b/app/src/lib/components/ui/table/table.svelte
index 94ed7a6617..8545ddccc6 100644
--- a/app/src/lib/components/ui/table/table.svelte
+++ b/app/src/lib/components/ui/table/table.svelte
@@ -9,7 +9,7 @@ export { className as class }
 </script>
 
 <div class="relative w-full overflow-auto">
-  <table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
+  <table class={cn('w-full caption-bottom ', className)} {...$$restProps}>
     <slot />
   </table>
 </div>
diff --git a/app/src/lib/components/ui/tooltip/tooltip-content.svelte b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
index 1ef8ae35d4..020e0c5772 100644
--- a/app/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -19,7 +19,7 @@ export { className as class }
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-40 overflow-hidden border bg-popover bg-black px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		"z-40 overflow-hidden border bg-popover dark:bg-background rounded px-3 py-1.5 text-sm text-popover-foreground shadow-md",
 		className
 	)}
 	{...$$restProps}
diff --git a/app/src/lib/queries/stats.ts b/app/src/lib/queries/stats.ts
index b69e54c2c8..76f3593cfb 100644
--- a/app/src/lib/queries/stats.ts
+++ b/app/src/lib/queries/stats.ts
@@ -24,7 +24,7 @@ export const statsQuery = (): Readable<QueryObserverResult<Array<Statistic>, Err
       return response.v1_ibc_union_statistics
     },
     enabled: true,
-    refetchInterval: 12_000,
+    refetchInterval: 1_000,
     refetchOnWindowFocus: false
   })
 
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 0b1adc24a9..e1d36f8b62 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -62,7 +62,7 @@ $: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
   <Toaster position="bottom-right" expand />
 
   <Header />
-  <div class="flex flex-1 overflow-y-auto bg-background">
+  <div class="flex flex-1 overflow-y-auto bg-muted">
     <!-- <DeprecationNotice /> -->
     <slot />
   </div>
diff --git a/app/src/routes/explorer/(components)/menu.svelte b/app/src/routes/explorer/(components)/menu.svelte
index f3a9e613d5..0be990d377 100644
--- a/app/src/routes/explorer/(components)/menu.svelte
+++ b/app/src/routes/explorer/(components)/menu.svelte
@@ -13,25 +13,23 @@ let alwaysCollapsedWidth = 580
 </script>
 
 <nav
-  class="rounded-none flex flex-col items-start h-full dark:bg-background"
+  class="rounded-none p-4 flex flex-col items-start h-full"
 >
   {#each tableRoutes as { route, icon }}
     <Button
       id={route}
       title={route}
       variant="link"
+      size="sm"
       href={`/explorer/${route}`}
       class={cn(
-        "mb-2 w-full flex justify-start gap-x-1",
+        "rounded mb-2 w-full flex justify-start gap-x-1",
         $selectedTable === route
           ? "bg-foreground text-primary-foreground"
           : "bg-transparent"
       )}
     >
-      <span>[</span>
-      <svelte:component this={icon} class={"size-3.5"} />
       <div>{route.replaceAll("-", " ")}</div>
-      <span>]</span>
     </Button>
   {/each}
 </nav>
diff --git a/app/src/routes/explorer/(components)/stats-bar.svelte b/app/src/routes/explorer/(components)/stats-bar.svelte
index e16295559d..3fc10f08de 100644
--- a/app/src/routes/explorer/(components)/stats-bar.svelte
+++ b/app/src/routes/explorer/(components)/stats-bar.svelte
@@ -25,7 +25,7 @@ onMount(() => {
 })
 </script>
 
-<div class="bg-muted dark:bg-background border-b flex">
+<div class=" border-b flex">
   <div class="w-full flex flex-1">
     {#if $deviceWidth > 888 || show === 0}
       <StatsBarStat blink={true} label={"Total Transfers"} value={$statsData?.data?.[1].value || 0}/>
diff --git a/app/src/routes/explorer/(components)/table.svelte b/app/src/routes/explorer/(components)/table.svelte
index 3ebbdbd1fc..2047f80476 100644
--- a/app/src/routes/explorer/(components)/table.svelte
+++ b/app/src/routes/explorer/(components)/table.svelte
@@ -71,7 +71,7 @@ function hasInfoProperty(assets: Object) {
 onDestroy(unsubscribe)
 </script>
 
-<Card.Root class="dark:bg-muted">
+<Card.Root>
   <div bind:this={virtualListElement}>
     <Table.Root>
       <Table.Header>
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index 3439f1e003..0144be4b47 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -38,13 +38,13 @@ onMount(() => {
 <div class="flex flex-row sm:divide-x overflow-x-none max-w-full w-full">
   <nav
     class={cn(
-      "sm:bg-muted h-full overflow-y-auto",
+      "h-full overflow-y-auto",
       explorerRoute === null
         ? "flex-1 sm:flex-none"
         : "hidden sm:block sm:w-[174px]"
     )}
   >
-    <h2 class="sm:hidden ml-3 mt-6 mb-3 text-2xl font-bold font-supermolot">
+    <h2 class="sm:hidden ml-3 mt-6 mb-3 text-2xl font-bold">
       Explorer
     </h2>
     <Menu tableRoutes={data.tables} />
@@ -69,12 +69,11 @@ onMount(() => {
           class={cn($page.route.id?.split("/").length === 3 ? "" : "hidden")}
         >
           <h2
-            class="text-2xl sm:text-4xl font-extrabold font-expanded sm:!font-extra-expanded uppercase font-supermolot pt-4 sm:pt-0"
+            class="text-2xl sm:text-4xl font-bold capitalize pt-4 sm:pt-0"
           >
             {explorerRoute?.replaceAll("-", " ")}
           </h2>
           <p class="pb-4 -mt-1 text-muted-foreground">
-            {">"}
             {explorerPageDescription}
           </p>
         </div>
diff --git a/app/src/routes/explorer/client-heights/client-heights.svelte b/app/src/routes/explorer/client-heights/client-heights.svelte
index 276294debb..337bb96ec8 100644
--- a/app/src/routes/explorer/client-heights/client-heights.svelte
+++ b/app/src/routes/explorer/client-heights/client-heights.svelte
@@ -70,7 +70,7 @@ function getClient(clients, counterpartyChainId) {
               {@const counterpartyChain = getCounterpartyChain($tableChains, counterpartyChainId)}
               {@const client = getClient(values, counterpartyChainId)}
               <td class="py-[3px] px-[3px]">
-                <div class="px-2 pb-1 pt-[6px] bg-muted">
+                <div class="px-2 pb-1 pt-[6px] font-mono bg-card rounded">
                   <div class="text-xs text-union-accent-950 font-bold dark:text-union-accent ">Client {client.client_id}</div>
                   <div class="text-nowrap"><span class="text-muted-foreground italic">Δ</span> {counterpartyChain.index_status.height - client.max_counterparty_height}</div>
                   <div class="text-nowrap"><span class="text-muted-foreground italic">C</span> {client.max_counterparty_height}</div>
diff --git a/app/src/styles/fonts.css b/app/src/styles/fonts.css
index 1f929645a8..b8cd019746 100644
--- a/app/src/styles/fonts.css
+++ b/app/src/styles/fonts.css
@@ -3,6 +3,15 @@
   font-display: swap;
   src: url("/fonts/tt-supermolot-neue/TT-Supermolot-Neue-Variable.ttf") format("truetype");
 }
+
+@font-face {
+  font-family: "inter";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
+}
+
 @font-face {
   font-family: "jetbrains-mono";
   font-style: normal;
diff --git a/app/src/styles/tailwind.css b/app/src/styles/tailwind.css
index 55dffd1db2..4b784c451d 100644
--- a/app/src/styles/tailwind.css
+++ b/app/src/styles/tailwind.css
@@ -91,19 +91,19 @@
   }
 
   .dark {
-    --background: 240 3.7% 15%;
+    --background: 240 3.7% 7%;
     --foreground: 0 0% 98%;
 
-    --muted: 240 3.7% 10%;
+    --muted: 240 3.7% 5%;
     --muted-foreground: 240 5% 64.9%;
 
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
 
-    --card: 240 10% 3.9%;
+    --card: 240 3.7% 8%;
     --card-foreground: 0 0% 98%;
 
-    --border: 240 3.7% 30%;
+    --border: 240 3.7% 20%;
     --input: 240 3.7% 15.9%;
 
     --primary: 0 0% 98%;
diff --git a/app/static/fonts/inter/InterVariable.woff2 b/app/static/fonts/inter/InterVariable.woff2
new file mode 100644
index 0000000000..e511e5e3ba
--- /dev/null
+++ b/app/static/fonts/inter/InterVariable.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3
+size 352240
diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
index 2c3b8bfaeb..c18cad4b1d 100644
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -142,9 +142,9 @@ export default (<Config>{
         "9xl": "96rem"
       }),
       fontFamily: _ => ({
-        gunship: ["gunship", ...defaultTheme.fontFamily.sans],
+        // gunship: ["gunship", ...defaultTheme.fontFamily.sans],
         supermolot: ["tt-supermolot-neue", ...defaultTheme.fontFamily.sans],
-        sans: ["jetbrains-mono", ...defaultTheme.fontFamily.sans],
+        sans: ["inter", ...defaultTheme.fontFamily.sans],
         mono: ["jetbrains-mono", ...defaultTheme.fontFamily.mono]
       }),
       animation: _ => ({