diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
index cc9779e..730274e 100644
--- a/webui/src/web-components/sketch-tool-card-browser-navigate.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.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-navigate")
-export class SketchToolCardBrowserNavigate extends LitElement {
+export class SketchToolCardBrowserNavigate extends SketchTailwindElement {
   @property()
   toolCall: ToolCall;
 
   @property()
   open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-family: monospace;
-      color: #444;
-      word-break: break-all;
-    }
-
-    .url-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 URL
     let url = "";
@@ -39,18 +24,33 @@
       console.error("Error parsing navigate input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🌐 ${url}
+    </span>`;
+    const inputContent = html`<div>
+      Navigate to:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${url}</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"> 🌐 ${url} </span>
-        <div slot="input">
-          <div>Navigate to: <span class="url-input">${url}</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>
     `;
   }
 }