diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 96244ea..3d48768 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -1,12 +1,13 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 @customElement("sketch-call-status")
 export class SketchCallStatus extends LitElement {
-  @property({ type: Number })
+  @property()
   llmCalls: number = 0;
 
-  @property({ type: Array })
+  @property()
   toolCalls: string[] = [];
 
   static styles = css`
@@ -19,55 +20,54 @@
 
     .indicator {
       display: flex;
+      justify-content: center;
       align-items: center;
-      gap: 4px;
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      transition: all 0.2s ease;
       position: relative;
     }
 
+    /* LLM indicator (lightbulb) */
     .llm-indicator {
-      opacity: 0.5;
+      background-color: transparent;
+      color: #9CA3AF; /* Gray when inactive */
     }
 
     .llm-indicator.active {
-      opacity: 1;
-      color: #ffc107;
+      background-color: #FEF3C7; /* Light yellow */
+      color: #F59E0B; /* Yellow/amber when active */
     }
 
+    /* Tool indicator (wrench) */
     .tool-indicator {
-      opacity: 0.5;
+      background-color: transparent;
+      color: #9CA3AF; /* Gray when inactive */
     }
 
     .tool-indicator.active {
-      opacity: 1;
-      color: #2196f3;
+      background-color: #DBEAFE; /* Light blue */
+      color: #3B82F6; /* Blue when active */
     }
 
-    .count-badge {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      background-color: #f44336;
-      color: white;
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      font-size: 11px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Icon styles */
-    .icon {
-      font-size: 20px;
+    svg {
+      width: 20px;
+      height: 20px;
     }
   `;
 
-  constructor() {
-    super();
-  }
-
   render() {
+    const lightbulbSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
+      <path d="M9 18h6"></path>
+      <path d="M10 22h4"></path>
+    </svg>`;
+
+    const wrenchSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+    </svg>`;
+
     return html`
       <div class="call-status-container">
         <div
@@ -76,10 +76,7 @@
             ? `${this.llmCalls} LLM ${this.llmCalls === 1 ? "call" : "calls"} in progress`
             : "No LLM calls in progress"}"
         >
-          <span class="icon">💡</span>
-          ${this.llmCalls >= 1
-            ? html`<span class="count-badge">${this.llmCalls}</span>`
-            : ""}
+          ${unsafeHTML(lightbulbSVG)}
         </div>
         <div
           class="indicator tool-indicator ${this.toolCalls.length > 0
@@ -89,10 +86,7 @@
             ? `${this.toolCalls.length} tool ${this.toolCalls.length === 1 ? "call" : "calls"} in progress: ${this.toolCalls.join(", ")}`
             : "No tool calls in progress"}"
         >
-          <span class="icon">🔧</span>
-          ${this.toolCalls.length >= 1
-            ? html`<span class="count-badge">${this.toolCalls.length}</span>`
-            : ""}
+          ${unsafeHTML(wrenchSVG)}
         </div>
       </div>
     `;