diff --git a/ui/src/app/api/stats/metering/route.ts b/ui/src/app/api/stats/metering/route.ts
new file mode 100644
index 0000000..38f2b6b
--- /dev/null
+++ b/ui/src/app/api/stats/metering/route.ts
@@ -0,0 +1,246 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { type BlockData, getBlockFromCache } from "@/lib/s3";
+
+const RPC_URL = process.env.TIPS_UI_RPC_URL || "http://localhost:8545";
+
+export interface MeteringStatsResponse {
+  timeWindowStart: number;
+  timeWindowEnd: number;
+  blockCount: number;
+  transactionCount: number;
+  stats: {
+    avgExecutionTimeUs: number;
+    minExecutionTime: {
+      timeUs: number;
+      txHash: string;
+      blockNumber: number;
+    } | null;
+    maxExecutionTime: {
+      timeUs: number;
+      txHash: string;
+      blockNumber: number;
+    } | null;
+    p50ExecutionTimeUs: number;
+    p95ExecutionTimeUs: number;
+    p99ExecutionTimeUs: number;
+    avgGasEfficiency: number;
+  };
+}
+
+async function fetchLatestBlockNumber(): Promise<number | null> {
+  try {
+    const response = await fetch(RPC_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_blockNumber",
+        params: [],
+        id: 1,
+      }),
+    });
+
+    const data = await response.json();
+    if (data.error || !data.result) {
+      return null;
+    }
+
+    return parseInt(data.result, 16);
+  } catch (error) {
+    console.error("Failed to fetch latest block number:", error);
+    return null;
+  }
+}
+
+async function fetchBlockHashByNumber(
+  blockNumber: number,
+): Promise<string | null> {
+  try {
+    const response = await fetch(RPC_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_getBlockByNumber",
+        params: [`0x${blockNumber.toString(16)}`, false],
+        id: 1,
+      }),
+    });
+
+    const data = await response.json();
+    if (data.error || !data.result) {
+      return null;
+    }
+
+    return data.result.hash;
+  } catch (error) {
+    console.error(`Failed to fetch block hash for ${blockNumber}:`, error);
+    return null;
+  }
+}
+
+function calculatePercentile(
+  sortedValues: number[],
+  percentile: number,
+): number {
+  if (sortedValues.length === 0) return 0;
+  const index = Math.floor(sortedValues.length * percentile);
+  return sortedValues[Math.min(index, sortedValues.length - 1)];
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams;
+    const blockCount = parseInt(searchParams.get("blocks") || "150", 10);
+
+    const latestBlockNumber = await fetchLatestBlockNumber();
+    if (latestBlockNumber === null) {
+      return NextResponse.json(
+        { error: "Failed to fetch latest block number" },
+        { status: 500 },
+      );
+    }
+
+    const blockNumbers = Array.from(
+      { length: blockCount },
+      (_, i) => latestBlockNumber - i,
+    ).filter((n) => n >= 0);
+
+    const blockHashes = await Promise.all(
+      blockNumbers.map(async (num) => ({
+        number: num,
+        hash: await fetchBlockHashByNumber(num),
+      })),
+    );
+
+    const blocks = await Promise.all(
+      blockHashes
+        .filter((b): b is { number: number; hash: string } => b.hash !== null)
+        .map(async (b) => ({
+          number: b.number,
+          data: await getBlockFromCache(b.hash),
+        })),
+    );
+
+    const validBlocks = blocks.filter((b) => b.data !== null) as Array<{
+      number: number;
+      data: BlockData;
+    }>;
+
+    interface TransactionWithMetering {
+      executionTimeUs: number;
+      gasUsed: bigint;
+      txHash: string;
+      blockNumber: number;
+    }
+
+    const txsWithMetering: TransactionWithMetering[] = validBlocks.flatMap(
+      (block) =>
+        block.data.transactions
+          .filter(
+            (tx): tx is typeof tx & { executionTimeUs: number } =>
+              tx.executionTimeUs !== null,
+          )
+          .map((tx) => ({
+            executionTimeUs: tx.executionTimeUs,
+            gasUsed: tx.gasUsed,
+            txHash: tx.hash,
+            blockNumber: block.number,
+          })),
+    );
+
+    if (txsWithMetering.length === 0) {
+      return NextResponse.json(
+        {
+          timeWindowStart: 0,
+          timeWindowEnd: 0,
+          blockCount: validBlocks.length,
+          transactionCount: 0,
+          stats: {
+            avgExecutionTimeUs: 0,
+            minExecutionTime: null,
+            maxExecutionTime: null,
+            p50ExecutionTimeUs: 0,
+            p95ExecutionTimeUs: 0,
+            p99ExecutionTimeUs: 0,
+            avgGasEfficiency: 0,
+          },
+        } as MeteringStatsResponse,
+        {
+          headers: {
+            "Cache-Control": "public, s-maxage=30, stale-while-revalidate=60",
+          },
+        },
+      );
+    }
+
+    const timestamps = validBlocks
+      .map((b) => Number(b.data.timestamp))
+      .filter((t) => t > 0);
+    const timeWindowStart = timestamps.length > 0 ? Math.min(...timestamps) : 0;
+    const timeWindowEnd = timestamps.length > 0 ? Math.max(...timestamps) : 0;
+
+    const executionTimes = txsWithMetering.map((tx) => tx.executionTimeUs);
+    const sortedExecutionTimes = [...executionTimes].sort((a, b) => a - b);
+
+    const avgExecutionTimeUs =
+      executionTimes.reduce((sum, time) => sum + time, 0) /
+      executionTimes.length;
+
+    let minTx = txsWithMetering[0];
+    let maxTx = txsWithMetering[0];
+    for (const tx of txsWithMetering) {
+      if (tx.executionTimeUs < minTx.executionTimeUs) minTx = tx;
+      if (tx.executionTimeUs > maxTx.executionTimeUs) maxTx = tx;
+    }
+
+    const p50ExecutionTimeUs = calculatePercentile(sortedExecutionTimes, 0.5);
+    const p95ExecutionTimeUs = calculatePercentile(sortedExecutionTimes, 0.95);
+    const p99ExecutionTimeUs = calculatePercentile(sortedExecutionTimes, 0.99);
+
+    const gasEfficiencies = txsWithMetering
+      .filter((tx) => tx.gasUsed > 0n)
+      .map((tx) => tx.executionTimeUs / Number(tx.gasUsed));
+    const avgGasEfficiency =
+      gasEfficiencies.length > 0
+        ? gasEfficiencies.reduce((sum, eff) => sum + eff, 0) /
+          gasEfficiencies.length
+        : 0;
+
+    const response: MeteringStatsResponse = {
+      timeWindowStart,
+      timeWindowEnd,
+      blockCount: validBlocks.length,
+      transactionCount: txsWithMetering.length,
+      stats: {
+        avgExecutionTimeUs,
+        minExecutionTime: {
+          timeUs: minTx.executionTimeUs,
+          txHash: minTx.txHash,
+          blockNumber: minTx.blockNumber,
+        },
+        maxExecutionTime: {
+          timeUs: maxTx.executionTimeUs,
+          txHash: maxTx.txHash,
+          blockNumber: maxTx.blockNumber,
+        },
+        p50ExecutionTimeUs,
+        p95ExecutionTimeUs,
+        p99ExecutionTimeUs,
+        avgGasEfficiency,
+      },
+    };
+
+    return NextResponse.json(response, {
+      headers: {
+        "Cache-Control": "public, s-maxage=30, stale-while-revalidate=60",
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching metering stats:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index 21e257f..f7d88d3 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -4,6 +4,9 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import type { BlockSummary, BlocksResponse } from "./api/blocks/route";
+import type { MeteringStatsResponse } from "./api/stats/metering/route";
+
+type Tab = "blocks" | "stats";
 
 function SearchBar({ onError }: { onError: (error: string | null) => void }) {
   const router = useRouter();
@@ -148,10 +151,248 @@ function Card({
   );
 }
 
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+        active
+          ? "border-blue-600 text-blue-600"
+          : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  unit,
+}: {
+  label: string;
+  value: string | number;
+  unit?: string;
+}) {
+  return (
+    <Card className="p-4">
+      <div className="text-xs text-gray-500 mb-1">{label}</div>
+      <div className="text-2xl font-semibold text-gray-900">
+        {typeof value === "number" ? value.toLocaleString() : value}
+        {unit && <span className="text-sm text-gray-500 ml-1">{unit}</span>}
+      </div>
+    </Card>
+  );
+}
+
+function formatExecutionTime(timeUs: number): string {
+  if (timeUs < 1000) {
+    return `${timeUs.toFixed(0)}μs`;
+  } else if (timeUs < 1000000) {
+    return `${(timeUs / 1000).toFixed(2)}ms`;
+  } else {
+    return `${(timeUs / 1000000).toFixed(2)}s`;
+  }
+}
+
+function MeteringStatsTab() {
+  const [stats, setStats] = useState<MeteringStatsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await fetch("/api/stats/metering");
+        if (response.ok) {
+          const data: MeteringStatsResponse = await response.json();
+          setStats(data);
+          setError(null);
+        } else {
+          setError("Failed to fetch stats");
+        }
+      } catch {
+        setError("Failed to fetch stats");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="py-12 flex items-center justify-center">
+        <div className="flex items-center gap-3">
+          <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+          <span className="text-gray-600">Loading stats...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="p-4 border-red-200 bg-red-50">
+        <div className="flex items-center gap-3">
+          <svg
+            className="w-5 h-5 text-red-600 shrink-0"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <title>Error</title>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+          <span className="text-sm text-red-700">{error}</span>
+        </div>
+      </Card>
+    );
+  }
+
+  if (!stats || stats.transactionCount === 0) {
+    return (
+      <Card className="p-12">
+        <div className="text-center">
+          <div className="text-gray-500 mb-2">No metering data available</div>
+          <div className="text-sm text-gray-400">
+            View some blocks first to populate the cache
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+        <StatCard
+          label="Avg Execution Time"
+          value={formatExecutionTime(stats.stats.avgExecutionTimeUs)}
+        />
+        <StatCard
+          label="P50 (Median)"
+          value={formatExecutionTime(stats.stats.p50ExecutionTimeUs)}
+        />
+        <StatCard
+          label="P95"
+          value={formatExecutionTime(stats.stats.p95ExecutionTimeUs)}
+        />
+        <StatCard
+          label="P99"
+          value={formatExecutionTime(stats.stats.p99ExecutionTimeUs)}
+        />
+        <StatCard
+          label="Gas Efficiency"
+          value={stats.stats.avgGasEfficiency.toFixed(3)}
+          unit="μs/gas"
+        />
+      </div>
+
+      <Card className="overflow-hidden">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold text-gray-900">Extremes</h3>
+          <div className="text-xs text-gray-500 mt-1">
+            Based on {stats.transactionCount.toLocaleString()} transactions from{" "}
+            {stats.blockCount} cached blocks
+          </div>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Type
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Execution Time
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Transaction
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Block
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {stats.stats.minExecutionTime && (
+                <tr className="hover:bg-gray-50">
+                  <td className="px-4 py-3 text-sm">
+                    <span className="inline-flex items-center px-2 py-1 rounded-md bg-green-100 text-green-700 text-xs font-medium">
+                      Fastest
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm font-medium text-gray-900">
+                    {formatExecutionTime(stats.stats.minExecutionTime.timeUs)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Link
+                      href={`/bundles/${stats.stats.minExecutionTime.txHash}`}
+                      className="font-mono text-xs text-blue-600 hover:text-blue-800 hover:underline"
+                    >
+                      {stats.stats.minExecutionTime.txHash.slice(0, 16)}...
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600">
+                    #{stats.stats.minExecutionTime.blockNumber.toLocaleString()}
+                  </td>
+                </tr>
+              )}
+              {stats.stats.maxExecutionTime && (
+                <tr className="hover:bg-gray-50">
+                  <td className="px-4 py-3 text-sm">
+                    <span className="inline-flex items-center px-2 py-1 rounded-md bg-red-100 text-red-700 text-xs font-medium">
+                      Slowest
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm font-medium text-gray-900">
+                    {formatExecutionTime(stats.stats.maxExecutionTime.timeUs)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Link
+                      href={`/bundles/${stats.stats.maxExecutionTime.txHash}`}
+                      className="font-mono text-xs text-blue-600 hover:text-blue-800 hover:underline"
+                    >
+                      {stats.stats.maxExecutionTime.txHash.slice(0, 16)}...
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600">
+                    #{stats.stats.maxExecutionTime.blockNumber.toLocaleString()}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
 export default function Home() {
   const [error, setError] = useState<string | null>(null);
   const [blocks, setBlocks] = useState<BlockSummary[]>([]);
   const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<Tab>("blocks");
 
   useEffect(() => {
     const fetchBlocks = async () => {
@@ -180,6 +421,20 @@ export default function Home() {
           <span className="font-semibold text-gray-900">TIPS</span>
           <SearchBar onError={setError} />
         </div>
+        <div className="max-w-5xl mx-auto px-6 border-b border-gray-200 flex gap-1">
+          <TabButton
+            active={activeTab === "blocks"}
+            onClick={() => setActiveTab("blocks")}
+          >
+            Latest Blocks
+          </TabButton>
+          <TabButton
+            active={activeTab === "stats"}
+            onClick={() => setActiveTab("stats")}
+          >
+            Metering Stats
+          </TabButton>
+        </div>
       </header>
 
       <main className="max-w-5xl mx-auto px-6 py-8">
@@ -225,32 +480,43 @@ export default function Home() {
           </Card>
         )}
 
-        <section>
-          <h2 className="text-base font-semibold text-gray-900 mb-4">
-            Latest Blocks
-          </h2>
+        {activeTab === "blocks" && (
+          <section>
+            <h2 className="text-base font-semibold text-gray-900 mb-4">
+              Latest Blocks
+            </h2>
 
-          <Card className="overflow-hidden">
-            {loading ? (
-              <div className="py-12 flex items-center justify-center">
-                <div className="flex items-center gap-3">
-                  <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                  <span className="text-gray-600">Loading blocks...</span>
+            <Card className="overflow-hidden">
+              {loading ? (
+                <div className="py-12 flex items-center justify-center">
+                  <div className="flex items-center gap-3">
+                    <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                    <span className="text-gray-600">Loading blocks...</span>
+                  </div>
                 </div>
-              </div>
-            ) : blocks.length > 0 ? (
-              <div className="divide-y divide-gray-100">
-                {blocks.map((block, index) => (
-                  <BlockRow key={block.hash} block={block} index={index} />
-                ))}
-              </div>
-            ) : (
-              <div className="py-12 text-center text-gray-500">
-                No blocks available
-              </div>
-            )}
-          </Card>
-        </section>
+              ) : blocks.length > 0 ? (
+                <div className="divide-y divide-gray-100">
+                  {blocks.map((block, index) => (
+                    <BlockRow key={block.hash} block={block} index={index} />
+                  ))}
+                </div>
+              ) : (
+                <div className="py-12 text-center text-gray-500">
+                  No blocks available
+                </div>
+              )}
+            </Card>
+          </section>
+        )}
+
+        {activeTab === "stats" && (
+          <section>
+            <h2 className="text-base font-semibold text-gray-900 mb-4">
+              Transaction Metering Statistics
+            </h2>
+            <MeteringStatsTab />
+          </section>
+        )}
       </main>
     </div>
   );