diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
index 8a1ec54..4030b02 100644
--- a/webui/src/web-components/sketch-tool-card-browser-eval.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-eval")
-export class SketchToolCardBrowserEval extends LitElement {
+export class SketchToolCardBrowserEval extends SketchTailwindElement {
   @property()
   toolCall: ToolCall;
 
   @property()
   open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-family: monospace;
-      color: #444;
-      word-break: break-all;
-    }
-
-    .expression-input {
-      font-family: monospace;
-      background: rgba(0, 0, 0, 0.05);
-      padding: 4px 8px;
-      border-radius: 4px;
-      display: inline-block;
-      word-break: break-all;
-    }
-  `;
-
   render() {
     // Parse the input to get expression
     let expression = "";
@@ -43,22 +28,33 @@
     const displayExpression =
       expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      📱 ${displayExpression}
+    </span>`;
+    const inputContent = html`<div>
+      Evaluate:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${expression}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          📱 ${displayExpression}
-        </span>
-        <div slot="input">
-          <div>
-            Evaluate: <span class="expression-input">${expression}</span>
-          </div>
-        </div>
-        <div slot="result">
-          ${this.toolCall?.result_message?.tool_result
-            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
-            : ""}
-        </div>
-      </sketch-tool-card>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }