diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
index b7dfd01..35c52b8 100644
--- a/webui/src/web-components/sketch-container-status.test.ts
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -47,10 +47,10 @@
     mockCompleteState.total_usage.cache_read_input_tokens +
     mockCompleteState.total_usage.cache_creation_input_tokens;
   await expect(component.locator("#inputTokens")).toContainText(
-    expectedTotalInputTokens + "",
+    expectedTotalInputTokens.toLocaleString(),
   );
   await expect(component.locator("#outputTokens")).toContainText(
-    mockCompleteState.total_usage.output_tokens + "",
+    mockCompleteState.total_usage.output_tokens.toLocaleString(),
   );
   await expect(component.locator("#totalCost")).toContainText(
     "$" + mockCompleteState.total_usage.total_cost_usd.toFixed(2),
@@ -103,7 +103,7 @@
     partialState.total_usage.cache_read_input_tokens +
     partialState.total_usage.cache_creation_input_tokens;
   await expect(component.locator("#inputTokens")).toContainText(
-    expectedTotalInputTokens + "",
+    expectedTotalInputTokens.toLocaleString(),
   );
 
   // Check that elements without data are empty
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index 8079d2e..3994c74 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -1,6 +1,7 @@
 import { State } from "../types";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { formatNumber } from "../utils";
 
 @customElement("sketch-container-status")
 export class SketchContainerStatus extends LitElement {
@@ -198,15 +199,17 @@
         <div class="info-item">
           <span class="info-label">Input tokens:</span>
           <span id="inputTokens" class="info-value"
-            >${(this.state?.total_usage?.input_tokens || 0) +
-            (this.state?.total_usage?.cache_read_input_tokens || 0) +
-            (this.state?.total_usage?.cache_creation_input_tokens || 0)}</span
+            >${formatNumber(
+              (this.state?.total_usage?.input_tokens || 0) +
+              (this.state?.total_usage?.cache_read_input_tokens || 0) +
+              (this.state?.total_usage?.cache_creation_input_tokens || 0)
+            )}</span
           >
         </div>
         <div class="info-item">
           <span class="info-label">Output tokens:</span>
           <span id="outputTokens" class="info-value"
-            >${this.state?.total_usage?.output_tokens}</span
+            >${formatNumber(this.state?.total_usage?.output_tokens)}</span
           >
         </div>
         <div class="info-item">
diff --git a/webui/src/web-components/sketch-timeline-message.test.ts b/webui/src/web-components/sketch-timeline-message.test.ts
index d5c8dfb..f68a5e0 100644
--- a/webui/src/web-components/sketch-timeline-message.test.ts
+++ b/webui/src/web-components/sketch-timeline-message.test.ts
@@ -149,8 +149,8 @@
   });
 
   await expect(component.locator(".message-usage")).toBeVisible();
-  await expect(component.locator(".message-usage")).toContainText("200"); // In (150 + 50 cache)
-  await expect(component.locator(".message-usage")).toContainText("300"); // Out
+  await expect(component.locator(".message-usage")).toContainText("200".toLocaleString()); // In (150 + 50 cache)
+  await expect(component.locator(".message-usage")).toContainText("300".toLocaleString()); // Out
   await expect(component.locator(".message-usage")).toContainText("$0.03"); // Cost
 });
 
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index a2dd533..95de17a 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -596,13 +596,14 @@
               ? html` <span class="message-usage">
                   <span title="Input tokens"
                     >In:
-                    ${(this.message?.usage?.input_tokens || 0) +
-                    (this.message?.usage?.cache_read_input_tokens || 0) +
-                    (this.message?.usage?.cache_creation_input_tokens ||
-                      0)}</span
+                    ${this.formatNumber(
+                      (this.message?.usage?.input_tokens || 0) +
+                      (this.message?.usage?.cache_read_input_tokens || 0) +
+                      (this.message?.usage?.cache_creation_input_tokens || 0)
+                    )}</span
                   >
                   <span title="Output tokens"
-                    >Out: ${this.message?.usage?.output_tokens}</span
+                    >Out: ${this.formatNumber(this.message?.usage?.output_tokens)}</span
                   >
                   <span title="Message cost"
                     >(${this.formatCurrency(