diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 8c1e9a3..3d10b07 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -4,6 +4,7 @@
 import { AgentMessage } from "../types";
 import { marked, MarkedOptions, Renderer, Tokens } from "marked";
 import mermaid from "mermaid";
+import DOMPurify from "dompurify";
 import "./sketch-tool-calls";
 @customElement("sketch-timeline-message")
 export class SketchTimelineMessage extends LitElement {
@@ -807,19 +808,95 @@
                </div>`;
       };
 
-      // Set markdown options for proper code block highlighting and safety
+      // Set markdown options for proper code block highlighting
       const markedOptions: MarkedOptions = {
         gfm: true, // GitHub Flavored Markdown
         breaks: true, // Convert newlines to <br>
         async: false,
         renderer: renderer,
-        // DOMPurify is recommended for production, but not included in this implementation
       };
-      return marked.parse(markdownContent, markedOptions) as string;
+
+      // Parse markdown and sanitize the output HTML with DOMPurify
+      const htmlOutput = marked.parse(markdownContent, markedOptions) as string;
+      return DOMPurify.sanitize(htmlOutput, {
+        // Allow common HTML elements that are safe
+        ALLOWED_TAGS: [
+          "p",
+          "br",
+          "strong",
+          "em",
+          "b",
+          "i",
+          "u",
+          "s",
+          "code",
+          "pre",
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "ul",
+          "ol",
+          "li",
+          "blockquote",
+          "a",
+          "div",
+          "span", // For mermaid diagrams and code blocks
+          "svg",
+          "g",
+          "path",
+          "rect",
+          "circle",
+          "text",
+          "line",
+          "polygon", // For mermaid SVG
+          "button", // For code copy buttons
+        ],
+        ALLOWED_ATTR: [
+          "href",
+          "title",
+          "target",
+          "rel", // For links
+          "class",
+          "id", // For styling and functionality
+          "data-*", // For code copy buttons
+          // SVG attributes for mermaid diagrams
+          "viewBox",
+          "width",
+          "height",
+          "xmlns",
+          "fill",
+          "stroke",
+          "stroke-width",
+          "d",
+          "x",
+          "y",
+          "x1",
+          "y1",
+          "x2",
+          "y2",
+          "cx",
+          "cy",
+          "r",
+          "rx",
+          "ry",
+          "points",
+          "transform",
+          "text-anchor",
+          "font-size",
+          "font-family",
+        ],
+        // Allow data attributes for functionality
+        ALLOW_DATA_ATTR: true,
+        // Keep whitespace for code formatting
+        KEEP_CONTENT: true,
+      });
     } catch (error) {
       console.error("Error rendering markdown:", error);
-      // Fallback to plain text if markdown parsing fails
-      return markdownContent;
+      // Fallback to sanitized plain text if markdown parsing fails
+      return DOMPurify.sanitize(markdownContent);
     }
   }
 
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 551145c..10fc6c0 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -2,19 +2,59 @@
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { ToolCall, MultipleChoiceOption, MultipleChoiceParams } from "../types";
-import { marked, MarkedOptions } from "marked";
+import { marked, MarkedOptions, Renderer } from "marked";
+import DOMPurify from "dompurify";
 
-// Shared utility function for markdown rendering
+// Shared utility function for markdown rendering with DOMPurify sanitization
 function renderMarkdown(markdownContent: string): string {
   try {
-    return marked.parse(markdownContent, {
+    // Parse markdown with default settings
+    const htmlOutput = marked.parse(markdownContent, {
       gfm: true,
       breaks: true,
       async: false,
     }) as string;
+
+    // Sanitize the output HTML with DOMPurify
+    return DOMPurify.sanitize(htmlOutput, {
+      // Allow common safe HTML elements
+      ALLOWED_TAGS: [
+        "p",
+        "br",
+        "strong",
+        "em",
+        "b",
+        "i",
+        "u",
+        "s",
+        "code",
+        "pre",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "blockquote",
+        "a",
+      ],
+      ALLOWED_ATTR: [
+        "href",
+        "title",
+        "target",
+        "rel", // For links
+        "class", // For basic styling
+      ],
+      // Keep content formatting
+      KEEP_CONTENT: true,
+    });
   } catch (error) {
     console.error("Error rendering markdown:", error);
-    return markdownContent;
+    // Fallback to sanitized plain text if markdown parsing fails
+    return DOMPurify.sanitize(markdownContent);
   }
 }