diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index e1631ed..63f4771 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -127,6 +127,16 @@
   --color-tracker-badge-bg: #2a233a;
   --color-tracker-active: #836ef9;
 
+  /* Block time tracker colors - new design */
+  --color-block-exec-bar: #38bdf8;
+  --color-tx-exec-bar: #6e54ff;
+  --color-text-secondary-new: #a8a3b8;
+  --color-text-muted-new: #52525e;
+  --color-bg-primary: #0e100f;
+  --color-bg-secondary: #18181b;
+  --color-border-primary: #27272a;
+  --color-border-active: #e5e5e5;
+
   /* Block state colors */
   --color-block-proposed: #342b6f;
   --color-block-voted: #6e54ff;
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index f606ddc..98455c5 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -9,18 +9,21 @@ import { SwapTransferTracker } from '@/components/swap-transfer-tracker'
 export default function Home() {
   return (
     <div className="min-h-screen text-white font-sans">
-      <main className="py-6 px-4 max-w-7xl mx-auto sm:py-8 sm:px-6 md:py-12 flex flex-col gap-8 md:gap-12">
+      <main className="py-6 px-4 max-w-7xl mx-auto sm:py-8 sm:px-6 md:py-12 flex flex-col">
         <PageHeader />
 
-        <NetworkActivityTracker />
+        {/* Sections container with continuous left/right borders */}
+        <div className="flex flex-col border-x border-zinc-800">
+          <NetworkActivityTracker />
 
-        <BlockStateTracker />
+          <BlockStateTracker />
 
-        <BlockTimeExecutionTracker />
+          <BlockTimeExecutionTracker />
 
-        <SwapTransferTracker />
+          <SwapTransferTracker />
+        </div>
 
-        <section className="flex flex-col md:flex-row gap-8 md:gap-4">
+        <section className="flex flex-col md:flex-row gap-8 md:gap-4 mt-8 md:mt-12">
           <HotAccountsBubbleMap />
           <HotSlotsBubbleMap />
         </section>
diff --git a/frontend/components/block-state-tracker/index.tsx b/frontend/components/block-state-tracker/index.tsx
index 6a5d08f..3abfa1c 100644
--- a/frontend/components/block-state-tracker/index.tsx
+++ b/frontend/components/block-state-tracker/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 
-import { Info, Pause, Play } from 'lucide-react'
+import { Pointer } from 'lucide-react'
 import { ExternalLink } from '@/components/ui/external-link'
 import { SectionHeader } from '@/components/ui/section-header'
+import { Switch } from '@/components/ui/switch'
 import { BLOCK_STATE_LEGEND } from '@/constants/block-state'
 import { useBlockStateTracker } from '@/hooks/use-block-state-tracker'
 import { useMouseHover } from '@/hooks/use-mouse-hover'
 import { cn } from '@/lib/utils'
 import { Blockchain } from './blockchain'
-import { SlowMotionControl } from './slow-motion-control'
 
 /**
  * Visualizes the blockchain with blocks progressing through states:
@@ -18,7 +18,6 @@ export function BlockStateTracker() {
   const {
     blocks,
     isSlowMotion,
-    remainingSeconds,
     startSlowMotion,
     stopSlowMotion,
     isFollowingChain,
@@ -29,78 +28,80 @@ export function BlockStateTracker() {
   const isPaused = !isFollowingChain || isHovering
 
   return (
-    <div className="w-full flex flex-col gap-4 sm:gap-6">
+    <div className="w-full flex flex-col">
       <SectionHeader
-        title="Monad Blocks - Speculative Finality"
+        title="Block Confirmation Progress"
         description={
           <>
-            Blocks advancing through speculative finality states according to
-            Monad BFT. More information{' '}
+            Shows how Monad blocks progress toward final confirmation.{' '}
             <ExternalLink
               href="https://docs.monad.xyz/monad-arch/consensus/block-states"
               className="text-text-secondary hover:text-white transition-colors underline"
             >
-              here
+              Learn more
             </ExternalLink>
             .
           </>
         }
-      >
-        <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
+      />
+
+      {/* Main container - no rounded corners */}
+      <div className="w-full flex flex-col border-b border-zinc-800 bg-[#0E100F]">
+        {/* Legend bar with slow mode toggle */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 px-6 sm:px-10 py-4 border-b border-zinc-800">
+          <div className="flex items-center gap-4 sm:gap-6">
+            {BLOCK_STATE_LEGEND.map((item) => (
+              <div key={item.label} className="flex items-center gap-2">
+                <div
+                  className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                />
+                <span className="text-base text-white">{item.label}</span>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="text-base text-white">Slow mode</span>
+            <Switch
+              checked={isSlowMotion}
+              onCheckedChange={(checked) =>
+                checked ? startSlowMotion() : stopSlowMotion()
+              }
+            />
+          </div>
+        </div>
+
+        {/* Blockchain visualization */}
+        <div className="relative" {...hoverProps}>
+          {/* Left fade gradient - only on sm and above */}
+          <div className="hidden sm:block absolute left-0 top-0 bottom-0 w-[18.75rem] z-10 pointer-events-none bg-gradient-to-r from-[#0E100F] to-transparent" />
+          <Blockchain blocks={blocks} isFollowingChain={!isPaused} />
+        </div>
+
+        {/* Footer with hover pause info (desktop) and pause button (mobile) */}
+        <div className="flex items-center gap-4 px-6 sm:px-10 py-2.5 border-t border-zinc-800">
+          {/* Mobile pause/resume button */}
           <button
             type="button"
             onClick={() => setIsFollowingChain(!isFollowingChain)}
             className={cn(
-              'flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium cursor-pointer transition-all duration-200',
+              'md:hidden h-9 px-4 py-2 rounded-md font-mono text-sm text-white uppercase cursor-pointer transition-all duration-200',
               isFollowingChain
-                ? 'bg-zinc-800 border-zinc-700 text-white hover:bg-zinc-700'
-                : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800 hover:text-white',
+                ? 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(23,23,23,0.2)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A] shadow-[0_0_0_1px_rgba(0,0,0,0.8)]'
+                : 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(110,84,255,0)_0%,rgba(255,255,255,0.12)_100%),#6E54FF] shadow-[0_0_0_1px_rgba(79,71,235,0.9)]',
             )}
           >
-            {isFollowingChain ? (
-              <Pause className="w-4 h-4" />
-            ) : (
-              <Play className="w-4 h-4" />
-            )}
             {isFollowingChain ? 'Pause' : 'Resume'}
           </button>
-          <SlowMotionControl
-            isActive={isSlowMotion}
-            remainingSeconds={remainingSeconds}
-            onStart={startSlowMotion}
-            onStop={stopSlowMotion}
-          />
-        </div>
-      </SectionHeader>
 
-      <div className="flex items-center gap-4 sm:gap-6">
-        {BLOCK_STATE_LEGEND.map((item) => (
-          <div key={item.label} className="flex items-center gap-2">
-            <div
-              className="w-2 h-2 rounded-full"
-              style={{ backgroundColor: item.color }}
-            />
-            <span className="text-xs sm:text-sm text-zinc-400">
-              {item.label}
+          {/* Desktop hover pause info */}
+          <div className="hidden md:flex items-center gap-4">
+            <Pointer className="w-5 h-5 text-[#52525E]" />
+            <span className="text-base text-[#52525E]">
+              Hovering on the Block stream pauses the update.
             </span>
           </div>
-        ))}
-      </div>
-
-      {/* Info copy - only for mobile */}
-      <div className="flex items-center gap-2 text-sm text-zinc-500 md:hidden">
-        <Info className="w-4 h-lh" />
-        <span>Tap Pause to freeze and scroll through blocks</span>
-      </div>
-
-      <button type="button" className="overflow-visible" {...hoverProps}>
-        <Blockchain blocks={blocks} isFollowingChain={!isPaused} />
-      </button>
-
-      {/* Info copy - only for desktop */}
-      <div className="hidden md:flex items-center gap-2 text-sm text-zinc-500">
-        <Info className="w-4 h-lh" />
-        <span>Hover to pause</span>
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/components/block-time-tracker/block-time-legend.tsx b/frontend/components/block-time-tracker/block-time-legend.tsx
index 0185c92..5b4926a 100644
--- a/frontend/components/block-time-tracker/block-time-legend.tsx
+++ b/frontend/components/block-time-tracker/block-time-legend.tsx
@@ -1,41 +1,15 @@
-import { Info } from 'lucide-react'
-
 export const BlockTimeLegend = () => {
   return (
-    <div className="flex flex-col justify-between gap-6 text-xs sm:gap-4 sm:flex-row sm:text-sm text-zinc-400">
-      <div className="flex flex-row gap-2 sm:max-w-1/3 text-zinc-500">
-        <Info className="w-4 h-lh" />
-        <div className="flex flex-col gap-1">
-          <span className="text-sm">Height = execution time</span>
-          <span className="text-sm">
-            Purple glow = concurrent transactions observed
-          </span>
-        </div>
+    <div className="flex flex-wrap items-center gap-4 sm:gap-6">
+      <div className="flex items-center gap-2">
+        <div className="w-3 h-3 rounded-full bg-[#38BDF8]" />
+        <span className="text-base text-white">Block execution time</span>
       </div>
-      <div className="flex flex-wrap gap-2 xs:gap-6">
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-10 bg-zinc-600 rounded-t-sm" />
-          <p className="hidden xs:block">Block Execution Time</p>
-          <p className="block xs:hidden">Block Exec. Time</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-10 bg-zinc-600 rounded-t-sm relative">
-            <div className="absolute bottom-0 left-0 w-full h-1/2 bg-bg-card-darker rounded-t-sm" />
-          </div>
-          <p className="hidden xs:block">Transaction Execution Time</p>
-          <p className="block xs:hidden">Tx Exec. Time</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <div
-            className="w-4 h-10 bg-[#7B66A2] rounded-t-sm"
-            style={{
-              boxShadow:
-                '0 0 0.3125rem var(--color-purple-glow), 0 0 0.625rem var(--color-purple-glow)',
-            }}
-          />
-          <p className="hidden xs:block">Parallel Execution</p>
-          <p className="block xs:hidden">Parallel Exec.</p>
-        </div>
+      <div className="flex items-center gap-2">
+        <div className="w-3 h-3 rounded-full bg-[#6E54FF]" />
+        <span className="text-base text-white">
+          Total transaction execution
+        </span>
       </div>
     </div>
   )
diff --git a/frontend/components/block-time-tracker/block-time-timeline.tsx b/frontend/components/block-time-tracker/block-time-timeline.tsx
index c139b17..2477e03 100644
--- a/frontend/components/block-time-tracker/block-time-timeline.tsx
+++ b/frontend/components/block-time-tracker/block-time-timeline.tsx
@@ -8,8 +8,8 @@ import type { Block } from '@/types/block'
 import { BlockTime } from './block-time'
 
 const BLOCK_DIMENSIONS = {
-  small: { itemWidth: 120, gridHeight: 280 },
-  large: { itemWidth: 140, gridHeight: 280 },
+  small: { itemWidth: 180, gridHeight: 340 },
+  large: { itemWidth: 220, gridHeight: 340 },
 }
 
 const getResponsiveDimensions = () => {
@@ -27,28 +27,25 @@ const getResponsiveDimensions = () => {
 interface BlockTimeTimelineProps {
   blocks: Block[]
   isFollowingChain: boolean
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
 interface BlockCellData {
   blocks: Block[]
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
 function BlockCell({
   columnIndex,
   style,
   blocks,
-  normalizedBlockExecutionTime,
+  normalizedTimeScaleMs,
 }: CellComponentProps<BlockCellData>) {
   const block = blocks[columnIndex]
 
   return (
     <div style={style} className="flex items-center justify-center relative">
-      <BlockTime
-        block={block}
-        normalizedBlockExecutionTime={normalizedBlockExecutionTime}
-      />
+      <BlockTime block={block} normalizedTimeScaleMs={normalizedTimeScaleMs} />
     </div>
   )
 }
@@ -61,7 +58,7 @@ function BlockCell({
 export function BlockTimeTimeline({
   blocks,
   isFollowingChain,
-  normalizedBlockExecutionTime,
+  normalizedTimeScaleMs,
 }: BlockTimeTimelineProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [containerWidth, setContainerWidth] = useState(0)
@@ -111,9 +108,9 @@ export function BlockTimeTimeline({
   }, [isFollowingChain])
 
   return (
-    <div ref={containerRef} className="flex-1 min-h-[280px]">
+    <div ref={containerRef} className="flex-1 min-h-85">
       {sortedBlocks.length === 0 ? (
-        <div className="flex items-center justify-center w-full h-[280px]">
+        <div className="flex items-center justify-center w-full h-85">
           <Spinner text="Waiting for blocks..." />
         </div>
       ) : (
@@ -127,7 +124,7 @@ export function BlockTimeTimeline({
           defaultWidth={containerWidth}
           overscanCount={3}
           cellComponent={BlockCell}
-          cellProps={{ blocks: sortedBlocks, normalizedBlockExecutionTime }}
+          cellProps={{ blocks: sortedBlocks, normalizedTimeScaleMs }}
           className="scrollbar-none"
           style={{
             overflowX: isFollowingChain ? 'hidden' : 'auto',
diff --git a/frontend/components/block-time-tracker/block-time.tsx b/frontend/components/block-time-tracker/block-time.tsx
index deaab20..987359a 100644
--- a/frontend/components/block-time-tracker/block-time.tsx
+++ b/frontend/components/block-time-tracker/block-time.tsx
@@ -6,171 +6,191 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { EXPLORER_URL } from '@/constants/common'
-import { calculateBarMetrics, fromNsToMsPrecise } from '@/lib/block-metrics'
+import { PARALLEL_EXECUTION_RATIO_THRESHOLD } from '@/hooks/use-block-execution-tracker'
+import { calculateBarMetrics } from '@/lib/block-metrics'
 import { formatBlockNumber } from '@/lib/ui'
 import { cn } from '@/lib/utils'
 import type { Block } from '@/types/block'
-import { ExternalLink } from '../ui/external-link'
 
 interface BlockTimeProps {
   block: Block
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
-export const BlockTime = ({
-  block,
-  normalizedBlockExecutionTime,
-}: BlockTimeProps) => {
+const BAR_CONTAINER_HEIGHT = 200
+
+export const BlockTime = ({ block, normalizedTimeScaleMs }: BlockTimeProps) => {
   const {
-    barHeightPercentage,
-    fillPercentage,
+    blockHeightPct,
+    txHeightPct,
+    blockMs,
     totalTransactionTime,
-    isHighlyParallel,
+    parallelizationRatio,
+    isParallelExecution,
+    timeSavedMs,
+    parallelEfficiencyPct,
   } = useMemo(
-    () => calculateBarMetrics(block, normalizedBlockExecutionTime),
-    [block, normalizedBlockExecutionTime],
+    () =>
+      calculateBarMetrics(
+        block,
+        normalizedTimeScaleMs,
+        PARALLEL_EXECUTION_RATIO_THRESHOLD,
+      ),
+    [block, normalizedTimeScaleMs],
   )
 
-  const formattedBlockExecutionTime = fromNsToMsPrecise(
-    block.executionTime ?? BigInt(0),
-  ).toFixed(3)
-  const formattedTotalTransactionTime = totalTransactionTime.toFixed(3)
+  const formattedBlockExecutionTime = blockMs.toFixed(2)
+  const formattedTotalTransactionTime = totalTransactionTime.toFixed(2)
   const numberOfTransactions = (block.transactions ?? []).length
-  const parallelPercentage = isHighlyParallel
-    ? (Number(formattedTotalTransactionTime) * 100) /
-        Number(formattedBlockExecutionTime) -
-      100
-    : 0 // Compute actual percentage of difference tx time and execution between block
-  const timeSaved =
-    Number(formattedTotalTransactionTime) - Number(formattedBlockExecutionTime)
+  const parallelRatioLabel = `${parallelizationRatio.toFixed(2)}×`
+  const timeSaved = timeSavedMs
 
   return (
-    <div className="flex flex-col items-center gap-4 min-w-20">
-      {/* Block Bar Container */}
-      <div className="relative w-full h-32 flex flex-col justify-end p-1.5">
-        {/* Block Time Container (represents total block execution time) */}
+    <div className="flex flex-col items-center w-full min-w-35 sm:min-w-55 gap-6 px-6 sm:px-10 py-6">
+      {/* Bar chart area */}
+      <div
+        className="w-full flex justify-center items-end border-b border-zinc-800"
+        style={{ height: `${BAR_CONTAINER_HEIGHT / 16}rem` }}
+      >
         <Tooltip>
           <TooltipTrigger asChild>
-            <motion.div
-              initial={{ height: 0 }}
-              animate={{ height: `${barHeightPercentage}%` }}
-              transition={{ duration: 0.2 }}
-              className={cn(
-                'w-full rounded-t-md relative bg-zinc-600',
-                'hover:shadow-lg transition-all duration-200 cursor-pointer',
-              )}
-              title={`Block ${block.number}: ${formattedBlockExecutionTime}ms execution time, ${formattedTotalTransactionTime}ms total tx time, ${numberOfTransactions} transactions`}
-            >
-              {/* Transaction Time Fill */}
-              <motion.div
-                initial={{ height: 0 }}
-                animate={{ height: `${fillPercentage}%` }}
-                transition={{
-                  duration: 0.4,
-                }}
-                className={cn(
-                  'absolute bottom-0 left-0 w-full rounded-t-md bg-bg-card-darker',
-                  isHighlyParallel && 'bg-[#7B66A2]',
-                )}
-                style={{
-                  boxShadow: isHighlyParallel
-                    ? '0 0 0.625rem var(--color-purple-glow), 0 0 1.25rem var(--color-purple-glow)'
-                    : undefined,
-                }}
-                title={`${formattedTotalTransactionTime}ms total transaction execution time`}
-              />
-            </motion.div>
+            <div className="flex items-end cursor-pointer">
+              {/* Left bar column (cyan) - label + bar */}
+              <div
+                className="flex flex-col items-start relative z-10 -mr-2"
+                style={{ width: '80px' }}
+              >
+                <span className="text-white text-base font-normal leading-[150%] text-left mb-2">
+                  {formattedBlockExecutionTime}ms
+                </span>
+                <motion.div
+                  initial={{ height: 0 }}
+                  animate={{
+                    height: `${(blockHeightPct / 100) * (BAR_CONTAINER_HEIGHT - 40)}px`,
+                  }}
+                  transition={{ duration: 0.3 }}
+                  className="w-full rounded-t-lg bg-[#38BDF8] shadow-[0.25rem_0_1.5rem_rgba(0,0,0,0.32)]"
+                />
+              </div>
+
+              {/* Right bar column (purple) - label + bar */}
+              <div
+                className="flex flex-col items-end"
+                style={{ width: '80px' }}
+              >
+                <span className="text-white text-base font-normal leading-[150%] text-right mb-2">
+                  {formattedTotalTransactionTime}ms
+                </span>
+                <motion.div
+                  initial={{ height: 0 }}
+                  animate={{
+                    height: `${(txHeightPct / 100) * (BAR_CONTAINER_HEIGHT - 40)}px`,
+                  }}
+                  transition={{ duration: 0.3 }}
+                  className="w-full rounded-t-lg bg-[#6E54FF]"
+                />
+              </div>
+            </div>
           </TooltipTrigger>
+
+          {/* Tooltip content */}
           <TooltipContent
-            sideOffset={5}
-            className="bg-tooltip-bg border border-tooltip-border text-tooltip-text rounded-lg p-2 sm:p-3 shadow-xl text-xs sm:text-sm w-87.5"
+            sideOffset={8}
+            className="bg-[#18181B] border border-[#E5E5E5] text-white rounded-2xl p-0 shadow-[0_1rem_2.5rem_rgba(0,0,0,0.32)] overflow-hidden min-w-87"
           >
-            <div className="flex flex-col gap-1">
-              <div className="flex flex-col gap-2">
-                <ExternalLink
-                  href={`${EXPLORER_URL}/block/${block.number}`}
-                  className="text-sm text-tooltip-text uppercase tracking-wider hover:underline"
-                >
+            <div className="flex flex-col">
+              {/* Tooltip header */}
+              <div className="flex flex-col gap-4 px-6 py-4">
+                <span className="text-base text-white">
                   Block {formatBlockNumber(block.number)}
-                </ExternalLink>
-                <div className="flex flex-col gap-1">
-                  <div className="flex flex-row items-center justify-between">
-                    <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Block Execution Time
-                    </p>
-                    <p className="text-tooltip-text text-sm font-medium">
+                </span>
+
+                {/* Stats rows */}
+                <div className="flex flex-col gap-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs font-mono text-[#A8A3B8] uppercase">
+                      Block execution time:
+                    </span>
+                    <span className="text-sm text-white">
                       {formattedBlockExecutionTime}ms
-                    </p>
+                    </span>
                   </div>
-                  <div className="flex flex-row items-center justify-between">
-                    <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Transaction Execution Time
-                    </p>
-                    <p className="text-tooltip-text text-sm font-medium">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs font-mono text-[#A8A3B8] uppercase">
+                      Transaction execution time:
+                    </span>
+                    <span className="text-sm text-white">
                       {formattedTotalTransactionTime}ms
-                    </p>
+                    </span>
                   </div>
-                  <div className="flex flex-row items-center justify-between">
-                    <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Transactions
-                    </p>
-                    <p className="text-tooltip-text text-sm font-medium">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs font-mono text-[#A8A3B8] uppercase">
+                      Transactions:
+                    </span>
+                    <span className="text-sm text-white">
                       {numberOfTransactions}
-                    </p>
+                    </span>
                   </div>
-                  <div className="flex flex-row items-center justify-between">
-                    <p className="text-xs font-mono text-tooltip-text-secondary break-all">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs font-mono text-[#A8A3B8] uppercase">
                       Time Saved
-                    </p>
-                    <p className="text-tooltip-text text-sm font-medium">
-                      {timeSaved < 0 ? 0 : timeSaved.toFixed(3)}
-                      ms
-                    </p>
+                    </span>
+                    <span className="text-sm text-white">
+                      {timeSaved.toFixed(2)}ms
+                    </span>
                   </div>
-                  <div className="flex flex-row items-center justify-between">
-                    <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Parallel Efficiency
-                    </p>
-                    <p className="text-tooltip-text-accent text-sm font-medium">
-                      {parallelPercentage.toFixed(3)}%
-                    </p>
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs font-mono text-[#A8A3B8] uppercase">
+                      Parallel Efficiency:
+                    </span>
+                    <span className="text-sm text-white">
+                      {parallelEfficiencyPct.toFixed(2)}%
+                    </span>
                   </div>
                 </div>
               </div>
-              {isHighlyParallel && (
-                <div className="flex flex-col gap-0">
-                  <div className="border-t border-tooltip-separator my-2" />
-                  <div className="flex flex-row items-center gap-2">
-                    <div className="bg-tooltip-text-accent w-2 h-2 rounded-full" />
-                    <p className="text-tooltip-text-accent font-medium">
-                      High parallel execution detected
-                    </p>
-                  </div>
-                </div>
-              )}
+
+              {/* Tooltip footer */}
+              <div className="flex justify-between items-center px-6 py-3 border-t border-[#27272A]">
+                <span className="text-base text-[#A8A3B8]">
+                  {numberOfTransactions} tx
+                  {numberOfTransactions !== 1 ? 's' : ''}
+                </span>
+                <a
+                  href={`${EXPLORER_URL}/block/${block.number}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="h-9 px-4 py-2 bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(23,23,23,0.2)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A] shadow-[0_0_0_1px_rgba(0,0,0,0.8)] rounded-md flex items-center justify-center font-mono text-sm text-white uppercase hover:opacity-80 transition-opacity"
+                >
+                  View on explorer
+                </a>
+              </div>
             </div>
           </TooltipContent>
         </Tooltip>
       </div>
 
-      {/* Block Stats */}
-      <div className="text-center space-y-1">
-        <p className="text-zinc-600 font-medium text-base">
-          {formattedBlockExecutionTime}ms
-        </p>
-        <p className="text-zinc-500 text-sm">{numberOfTransactions} tx</p>
+      {/* Block info below bars */}
+      <div className="flex flex-col items-center gap-2.5">
+        <a
+          href={`${EXPLORER_URL}/block/${block.number}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-base text-white tabular-nums hover:underline"
+        >
+          {formatBlockNumber(block.number)}
+        </a>
+        <span
+          className={cn(
+            'px-4 py-1 rounded-full border text-sm text-white tabular-nums',
+            isParallelExecution
+              ? 'bg-[#6E54FF]/20 border-[#6E54FF]'
+              : 'bg-[#18181B] border-zinc-700',
+          )}
+        >
+          Parallel {parallelRatioLabel}
+        </span>
       </div>
-
-      {/* Separator */}
-      <div className="w-full h-px bg-zinc-700" />
-
-      {/* Block number Label */}
-      <ExternalLink
-        href={`${EXPLORER_URL}/block/${block.number}`}
-        className="text-sm font-medium text-zinc-600 hover:text-white"
-      >
-        {formatBlockNumber(block.number)}
-      </ExternalLink>
     </div>
   )
 }
diff --git a/frontend/components/block-time-tracker/index.tsx b/frontend/components/block-time-tracker/index.tsx
index 7b8d213..c5cd90a 100644
--- a/frontend/components/block-time-tracker/index.tsx
+++ b/frontend/components/block-time-tracker/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Clock, Info, Pause, Play, TrendingUp } from 'lucide-react'
+import { Clock, Pointer, TrendingUp } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { SectionHeader } from '@/components/ui/section-header'
 import { StatCard } from '@/components/ui/stat-card'
@@ -22,11 +22,8 @@ import { BlockTimeTimeline } from './block-time-timeline'
  * and calculates execution timing metrics for visualization.
  */
 export function BlockTimeExecutionTracker() {
-  const {
-    finalizedBlocks,
-    maxBlockExecutionTime,
-    normalizedBlockExecutionTime,
-  } = useBlockExecutionTracker()
+  const { finalizedBlocks, maxBlockExecutionTime, normalizedTimeScaleMs } =
+    useBlockExecutionTracker()
   const [isFollowingChain, setIsFollowingChain] = useState(true)
   const { isHovering, hoverProps } = useMouseHover()
   const isPaused = !isFollowingChain || isHovering
@@ -77,56 +74,61 @@ export function BlockTimeExecutionTracker() {
       </div>
 
       {/* Block Execution Timeline */}
-      <div className="w-full flex flex-col gap-4 sm:gap-6">
+      <div className="w-full flex flex-col">
         <SectionHeader
           title="Block Execution Timeline"
-          description="Each bar represents a block. Height shows execution time."
-        >
+          description="Visualize block and transaction execution times. Taller transaction bars indicate parallel execution within block."
+        />
+
+        {/* Mobile pause/resume button - below section header */}
+        <div className="md:hidden flex items-center gap-4 px-6 py-4 bg-[#0E100F]">
           <button
             type="button"
             onClick={() => setIsFollowingChain(!isFollowingChain)}
             className={cn(
-              'flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium cursor-pointer transition-all duration-200 w-fit',
+              'h-9 px-4 py-2 rounded-md font-mono text-sm text-white uppercase cursor-pointer transition-all duration-200',
               isFollowingChain
-                ? 'bg-zinc-800 border-zinc-700 text-white hover:bg-zinc-700'
-                : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800 hover:text-white',
+                ? 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(23,23,23,0.2)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A] shadow-[0_0_0_1px_rgba(0,0,0,0.8)]'
+                : 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(110,84,255,0)_0%,rgba(255,255,255,0.12)_100%),#6E54FF] shadow-[0_0_0_1px_rgba(79,71,235,0.9)]',
             )}
           >
-            {isFollowingChain ? (
-              <Pause className="w-4 h-4" />
-            ) : (
-              <Play className="w-4 h-4" />
-            )}
             {isFollowingChain ? 'Pause' : 'Resume'}
           </button>
-        </SectionHeader>
-        {/* Info copy - only for mobile */}
-        <div className="flex items-center gap-2 text-sm text-zinc-500 md:hidden">
-          <Info className="w-4 h-4" />
-          <span>Tap Pause to freeze and scroll through blocks</span>
+          <span className="text-sm text-[#52525E]">
+            {isFollowingChain
+              ? 'Pause to freeze and scroll'
+              : 'Resume to follow chain'}
+          </span>
         </div>
 
-        <div className="w-full flex flex-col gap-5 dark-component-colors rounded-xl border p-4 sm:p-6 lg:p-8">
-          {/* Scrollable Blocks Container */}
-          <button type="button" className="flex-1" {...hoverProps}>
+        {/* Main container */}
+        <div className="w-full pt-4 flex flex-col bg-[#0E100F]">
+          {/* Legend bar */}
+          <div className="flex items-center px-6 sm:px-10 py-4">
+            <BlockTimeLegend />
+          </div>
+
+          {/* Blocks timeline area */}
+          <div className="relative sm:py-6 sm:px-10" {...hoverProps}>
+            {/* Left fade gradient - only on sm and above */}
+            <div className="hidden sm:block absolute left-0 top-0 bottom-0 w-75 z-10 pointer-events-none bg-linear-to-r from-[#0E100F] to-transparent" />
+
             <BlockTimeTimeline
               blocks={finalizedBlocks}
               isFollowingChain={!isPaused}
-              normalizedBlockExecutionTime={normalizedBlockExecutionTime}
+              normalizedTimeScaleMs={normalizedTimeScaleMs}
             />
-          </button>
-
-          {/* Seperator */}
-          <div className="w-full h-0.5 bg-zinc-700" />
-
-          {/* Legend */}
-          <BlockTimeLegend />
-        </div>
+          </div>
 
-        {/* Info copy - only for desktop */}
-        <div className="hidden md:flex items-center gap-2 text-sm text-zinc-500">
-          <Info className="w-4 h-4" />
-          <span>Hover to pause</span>
+          {/* Footer with hover pause info - desktop only */}
+          <div className="hidden md:block px-6 sm:px-10 bg-[linear-gradient(153deg,#18181B_0%,rgba(24,24,27,0)_100%)]">
+            <div className="flex items-center gap-4 py-3 bg-[linear-gradient(135deg,#18181B_0%,rgba(24,24,27,0)_100%)]">
+              <Pointer className="w-5 h-5 text-[#52525E]" />
+              <span className="text-base text-[#52525E] font-normal leading-6">
+                Hovering on the Block stream pauses the update.
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/swap-transfer-tracker/index.tsx b/frontend/components/swap-transfer-tracker/index.tsx
index 10f0e5e..dddee04 100644
--- a/frontend/components/swap-transfer-tracker/index.tsx
+++ b/frontend/components/swap-transfer-tracker/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ArrowLeftRight, Info, Pause, Play, Send } from 'lucide-react'
+import { ArrowLeftRight, Pointer, Send } from 'lucide-react'
 import { useState } from 'react'
 import { LiveBadge } from '@/components/common/live-badge'
 import { SectionHeader } from '@/components/ui/section-header'
@@ -30,37 +30,13 @@ export function SwapTransferTracker() {
   const [isFollowingData, setIsFollowingData] = useState(true)
 
   return (
-    <div className="w-full flex flex-col gap-4 sm:gap-6">
+    <div className="w-full flex flex-col">
       <SectionHeader
-        title="Swap & Transfer Tracker"
-        description="Live economic activity observed directly from execution events."
-      >
-        <button
-          type="button"
-          onClick={() => setIsFollowingData(!isFollowingData)}
-          className={cn(
-            'flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium cursor-pointer transition-all duration-200 w-fit',
-            isFollowingData
-              ? 'bg-zinc-800 border-zinc-700 text-white hover:bg-zinc-700'
-              : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800 hover:text-white',
-          )}
-        >
-          {isFollowingData ? (
-            <Pause className="w-4 h-4" />
-          ) : (
-            <Play className="w-4 h-4" />
-          )}
-          {isFollowingData ? 'Pause' : 'Resume'}
-        </button>
-      </SectionHeader>
+        title="Live Transaction Log"
+        description="Real-time swaps and transfers observed directly from execution events."
+      />
 
-      {/* Info copy - only for mobile */}
-      <div className="flex items-center gap-2 text-sm text-zinc-500 md:hidden">
-        <Info className="w-4 h-lh" />
-        <span>Tap Pause to freeze and scroll through data</span>
-      </div>
-
-      <div className="flex flex-col dark-component-colors rounded-xl border overflow-hidden">
+      <div className="flex flex-col border-b border-zinc-800 overflow-hidden">
         <Tabs defaultValue="transfers" className="w-full">
           <div className="flex flex-col">
             <div className="overflow-x-auto scrollbar-none">
@@ -97,12 +73,31 @@ export function SwapTransferTracker() {
             />
           </TabsContent>
         </Tabs>
-      </div>
 
-      {/* Info copy - only for desktop */}
-      <div className="hidden md:flex items-center gap-2 text-sm text-zinc-500">
-        <Info className="w-4 h-lh" />
-        <span>Hover to pause</span>
+        {/* Footer with hover pause info */}
+        <div className="flex items-center gap-4 px-6 sm:px-10 py-2.5 border-t border-zinc-800">
+          {/* Mobile pause/resume button */}
+          <button
+            type="button"
+            onClick={() => setIsFollowingData(!isFollowingData)}
+            className={cn(
+              'md:hidden h-9 px-4 py-2 rounded-md font-mono text-sm text-white uppercase cursor-pointer transition-all duration-200',
+              isFollowingData
+                ? 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(23,23,23,0.2)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A] shadow-[0_0_0_1px_rgba(0,0,0,0.8)]'
+                : 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(110,84,255,0)_0%,rgba(255,255,255,0.12)_100%),#6E54FF] shadow-[0_0_0_1px_rgba(79,71,235,0.9)]',
+            )}
+          >
+            {isFollowingData ? 'Pause' : 'Resume'}
+          </button>
+
+          {/* Desktop hover pause info */}
+          <div className="hidden md:flex items-center gap-4">
+            <Pointer className="w-5 h-5 text-[#52525E]" />
+            <span className="text-base text-[#52525E]">
+              Hovering on the data stream pauses the update.
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
new file mode 100644
index 0000000..aaf3256
--- /dev/null
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,55 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center font-mono text-sm uppercase cursor-pointer transition-all duration-200 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: [
+          'rounded-md text-white',
+          'bg-[radial-gradient(50%_50%_at_50%_50%,rgba(110,84,255,0)_0%,rgba(255,255,255,0.12)_100%),#6E54FF]',
+          'shadow-[0_1px_2px_0_rgba(0,0,0,0.20),0_1px_0.5px_0_rgba(255,255,255,0.25)_inset,0_-1px_0.5px_0_rgba(255,255,255,0.25)_inset,0_0_0_1px_rgba(79,71,235,0.90)]',
+          'hover:bg-[radial-gradient(50%_50%_at_50%_50%,rgba(110,84,255,0.66)_29.81%,rgba(255,255,255,0.50)_100%),#6E54FF]',
+          'hover:shadow-[0_1px_2px_0_rgba(0,0,0,0.20),0_0.75px_0.66px_0_rgba(255,255,255,0.80)_inset,0_-0.75px_0.66px_0_rgba(255,255,255,0.80)_inset,0_0_0_1px_rgba(79,71,235,0.50)]',
+        ],
+        secondary: [
+          'rounded-md text-white',
+          'bg-[radial-gradient(50%_50%_at_50%_50%,rgba(23,23,23,0.20)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A]',
+          'shadow-[0_1px_2px_0_rgba(0,0,0,0.20),0_0.5px_0.5px_0_rgba(255,255,255,0.25)_inset,0_-0.5px_0.5px_0_rgba(255,255,255,0.25)_inset,0_0_0_1px_rgba(0,0,0,0.80)]',
+          'hover:bg-[radial-gradient(50%_50%_at_50%_50%,rgba(23,23,23,0.66)_0%,rgba(163,163,163,0.53)_100%),#0A0A0A]',
+          'hover:shadow-[0_1px_2px_0_rgba(0,0,0,0.20),0_0.5px_0.5px_0_rgba(255,255,255,0.25)_inset,0_-0.5px_0.5px_0_rgba(255,255,255,0.25)_inset,0_0_0_1px_rgba(0,0,0,0.80)]',
+        ],
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 px-3 py-1.5',
+        lg: 'h-10 px-6 py-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/frontend/components/ui/section-header.tsx b/frontend/components/ui/section-header.tsx
index 110e7f9..33cc463 100644
--- a/frontend/components/ui/section-header.tsx
+++ b/frontend/components/ui/section-header.tsx
@@ -2,12 +2,13 @@ import type { ReactNode } from 'react'
 
 interface SectionHeaderProps {
   title: string
-  description: string | ReactNode
+  description?: string | ReactNode | null
   children?: ReactNode
 }
 
 /**
  * Section header with title and description, optional action area
+ * Horizontal layout with border on desktop, stacked on mobile
  */
 export function SectionHeader({
   title,
@@ -15,15 +16,25 @@ export function SectionHeader({
   children,
 }: SectionHeaderProps) {
   return (
-    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-      <div className="flex-1">
-        <h2 className="font-britti-sans text-2xl sm:text-3xl font-medium leading-none text-white">
-          {title}
-        </h2>
-        <div className="text-sm sm:text-base text-text-secondary mt-2 leading-6">
-          {description}
-        </div>
+    <div className="w-full h-30 px-6 sm:px-10 border-t border-b border-zinc-800 flex items-center">
+      {/* Title section */}
+      <div className="flex-1 flex items-center text-white text-2xl sm:text-4xl font-medium font-britti-sans leading-10">
+        {title}
       </div>
+
+      {description && (
+        <>
+          {/* Vertical divider in the middle - only when description exists */}
+          <div className="hidden sm:block w-px h-full bg-zinc-800" />
+
+          {/* Description section */}
+          <div className="hidden sm:flex w-1/2 h-full px-10 items-center">
+            <div className="flex-1 text-gray-400 text-base font-normal leading-6">
+              {description}
+            </div>
+          </div>
+        </>
+      )}
       {children}
     </div>
   )
diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
index 72402c9..197edd5 100644
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -13,7 +13,8 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-xl p-0.5 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-[#6E54FF] data-[state=unchecked]:bg-zinc-700',
         className,
       )}
       {...props}
@@ -21,7 +22,8 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_0.25rem_1rem_rgba(14,16,15,0.6)] ring-0 transition-transform duration-200',
+          'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/frontend/hooks/use-block-execution-tracker.ts b/frontend/hooks/use-block-execution-tracker.ts
index cb39d49..d82b8ee 100644
--- a/frontend/hooks/use-block-execution-tracker.ts
+++ b/frontend/hooks/use-block-execution-tracker.ts
@@ -1,11 +1,19 @@
 import { useCallback, useMemo, useState } from 'react'
-import { fromNsToMsPrecise } from '@/lib/block-metrics'
+import {
+  fromNsToMsPrecise,
+  getBlockWallTimeMs,
+  getTotalTransactionTimeMs,
+} from '@/lib/block-metrics'
 import type { Block } from '@/types/block'
 import type { SerializableEventData } from '@/types/events'
 import { useEvents } from './use-events'
 
 const MAX_BLOCKS = 5000
 
+// Highlight when total tx execution time exceeds block execution time.
+// Keep this as a single constant so UI/copy can stay consistent.
+export const PARALLEL_EXECUTION_RATIO_THRESHOLD = 1
+
 /**
  * Hook to track block execution events and derive timing metrics.
  */
@@ -257,22 +265,26 @@ export function useBlockExecutionTracker() {
     )
   }, [finalizedBlocks])
 
-  const normalizedBlockExecutionTime = useMemo(() => {
+  const normalizedTimeScaleMs = useMemo(() => {
     if (finalizedBlocks.length === 0) return 1
 
-    // Get all execution times in milliseconds
-    const executionTimes = finalizedBlocks
-      .map((block) => fromNsToMsPrecise(block.executionTime ?? BigInt(0)))
+    // Normalize against the larger of:
+    // - block wall-time (BlockEnd - BlockStart)
+    // - ΣTx execution time (sum of TxnHeaderEnd - TxnHeaderStart)
+    // This lets the visualization show when ΣTx > block time (parallel overlap).
+    const maxTimes = finalizedBlocks
+      .map((block) =>
+        Math.max(getBlockWallTimeMs(block), getTotalTransactionTimeMs(block)),
+      )
       .filter((time) => time > 0)
       .sort((a, b) => a - b)
 
-    if (executionTimes.length === 0) return 1
+    if (maxTimes.length === 0) return 1
 
     // Use 95th percentile to be resistant to spikes
-    const percentileIndex = Math.floor(executionTimes.length * 0.95)
+    const percentileIndex = Math.floor(maxTimes.length * 0.95)
     const percentile95 =
-      executionTimes[percentileIndex] ||
-      executionTimes[executionTimes.length - 1]
+      maxTimes[percentileIndex] || maxTimes[maxTimes.length - 1]
 
     // Add 10% buffer to prevent clipping of high values near the percentile
     return percentile95 * 1.1
@@ -282,6 +294,6 @@ export function useBlockExecutionTracker() {
     blocks,
     finalizedBlocks,
     maxBlockExecutionTime,
-    normalizedBlockExecutionTime,
+    normalizedTimeScaleMs,
   }
 }
diff --git a/frontend/lib/block-metrics.ts b/frontend/lib/block-metrics.ts
index 87e1671..c54c16f 100644
--- a/frontend/lib/block-metrics.ts
+++ b/frontend/lib/block-metrics.ts
@@ -12,58 +12,76 @@ export function fromNsToMsPrecise(ns: bigint): number {
   return msPart + nsPart / 1_000_000
 }
 
+function sumTransactionTimeNs(block: Block): bigint {
+  return (block.transactions ?? []).reduce(
+    (sum, tx) => sum + BigInt(tx.transactionTime ?? 0),
+    BigInt(0),
+  )
+}
+
+export function getBlockWallTimeMs(block: Block): number {
+  return fromNsToMsPrecise(block.executionTime ?? BigInt(0))
+}
+
+export function getTotalTransactionTimeMs(block: Block): number {
+  return fromNsToMsPrecise(sumTransactionTimeNs(block))
+}
+
+export function getParallelizationRatio(
+  blockMs: number,
+  totalTxMs: number,
+): number {
+  if (!(blockMs > 0)) return 0
+  const ratio = totalTxMs / blockMs
+  return Number.isFinite(ratio) ? ratio : 0
+}
+
+export function getTimeSavedMs(blockMs: number, totalTxMs: number): number {
+  return Math.max(totalTxMs - blockMs, 0)
+}
+
 /**
  * Calculate bar metrics for a block visualization
  * @param block - The block to calculate metrics for
- * @param maxBlockExecutionTime - The maximum block execution time in the dataset for normalization
- * @returns Object containing bar height percentage and fill percentage
+ * @param normalizedTimeScaleMs - Shared normalization scale for both bars (ms)
+ * @returns Object containing bar height percentages and tooltip metrics
  */
 export function calculateBarMetrics(
   block: Block,
-  maxBlockExecutionTime: number,
+  normalizedTimeScaleMs: number,
+  parallelExecutionRatioThreshold: number,
 ) {
-  const blockExecutionTime = block.executionTime ?? BigInt(0)
-
-  // Calculate total transaction execution time with high precision
-  const totalTransactionTimeNs = (block.transactions ?? []).reduce(
-    (sum, tx) => sum + BigInt(tx.transactionTime ?? 0),
-    BigInt(0),
+  const blockMs = getBlockWallTimeMs(block)
+  const totalTransactionTime = getTotalTransactionTimeMs(block)
+  const parallelizationRatio = getParallelizationRatio(
+    blockMs,
+    totalTransactionTime,
   )
-  const totalTransactionTime = fromNsToMsPrecise(totalTransactionTimeNs)
+  const isParallelExecution =
+    parallelizationRatio > parallelExecutionRatioThreshold
+
+  const timeSavedMs = getTimeSavedMs(blockMs, totalTransactionTime)
 
-  // Normalize bar height based on block time (container represents block execution time)
-  // If no execution time, show minimal height for blocks that exist
-  const barHeightPercentage =
-    Number(blockExecutionTime) > 0
-      ? (fromNsToMsPrecise(blockExecutionTime) / maxBlockExecutionTime) * 100
-      : 20 // Show something for blocks without execution time yet
+  const scaleMs = normalizedTimeScaleMs > 0 ? normalizedTimeScaleMs : 1
 
-  // Calculate fill percentage (transaction time relative to block time)
-  // If transactions run in parallel, total transaction time can be > block time
-  // But the fill can't exceed 100% of the container
-  const fillPercentage =
-    Number(blockExecutionTime) > 0
-      ? Math.min(
-          (totalTransactionTime / fromNsToMsPrecise(blockExecutionTime)) * 100,
-          100,
-        )
-      : totalTransactionTime > 0
-        ? 50
-        : 0 // Show some fill if we have transactions
+  // Normalize both bars using the same scale so that ΣTx can exceed block time.
+  // If no execution time yet, show a minimal visible placeholder.
+  const blockHeightPct = blockMs > 0 ? (blockMs / scaleMs) * 100 : 20
+  const txHeightPct =
+    totalTransactionTime > 0 ? (totalTransactionTime / scaleMs) * 100 : 0
 
-  // Calculate efficiency metrics
-  const parallelizationRatio =
-    Number(blockExecutionTime) > 0
-      ? totalTransactionTime / fromNsToMsPrecise(blockExecutionTime)
-      : 0
-  const isHighlyParallel =
-    parallelizationRatio > 1 && Number.isFinite(parallelizationRatio)
+  // Calculate parallel efficiency as percentage
+  const parallelEfficiencyPct =
+    totalTransactionTime > 0 ? (timeSavedMs / totalTransactionTime) * 100 : 0
 
   return {
-    barHeightPercentage: Math.max(barHeightPercentage * 0.8, 15), // Ensure minimum height
-    fillPercentage,
+    blockHeightPct: Math.max(Math.min(blockHeightPct, 100) * 0.9, 15), // Ensure minimum height + a little headroom
+    txHeightPct: Math.min(txHeightPct, 100) * 0.9,
+    blockMs,
     totalTransactionTime,
     parallelizationRatio,
-    isHighlyParallel,
+    isParallelExecution,
+    timeSavedMs,
+    parallelEfficiencyPct,
   }
 }