diff --git a/static/css/chat.css b/static/css/chat.css
index daa8c65..5a5114e 100644
--- a/static/css/chat.css
+++ b/static/css/chat.css
@@ -438,6 +438,7 @@ body:not(.loading) #loading {
 	overflow: hidden;
 	transition: 150ms;
 	height: calc(40px + 16px + var(--height));
+	position: relative;
 }
 
 .message .reasoning {
@@ -496,6 +497,21 @@ body:not(.loading) #loading {
 	width: max-content;
 }
 
+.tool .cost {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	font-size: 12px;
+	font-style: italic;
+	color: #a5adcb;
+	transition: 150ms opacity;
+	opacity: 0;
+}
+
+.tool:hover .cost {
+	opacity: 1;
+}
+
 .message .options {
 	display: flex;
 	gap: 4px;
diff --git a/static/js/chat.js b/static/js/chat.js
index 5b292b7..04e2b22 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -286,6 +286,13 @@
 
 			_call.appendChild(_callArguments);
 
+			// tool call cost
+			const _callCost = make("div", "cost");
+
+			_callCost.title = "Cost of this tool call";
+
+			this.#_tool.appendChild(_callCost);
+
 			// tool call result
 			const _callResult = make("div", "result", "markdown");
 
@@ -466,10 +473,11 @@
 
 			if (!only || only === "tool") {
 				if (this.#tool) {
-					const { name, args, result } = this.#tool;
+					const { name, args, result, cost } = this.#tool;
 
 					const _name = this.#_tool.querySelector(".name"),
 						_arguments = this.#_tool.querySelector(".arguments"),
+						_cost = this.#_tool.querySelector(".cost"),
 						_result = this.#_tool.querySelector(".result");
 
 					_name.title = `Show ${name} call result`;
@@ -478,6 +486,8 @@
 					_arguments.title = args;
 					_arguments.textContent = args;
 
+					_cost.textContent = cost ? `${formatMoney(cost)}` : "";
+
 					_result.innerHTML = render(result || "*processing*");
 
 					this.#_tool.setAttribute("data-tool", name);