diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 045ca66..6742287 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -194,16 +194,32 @@
       );
     }
 
-    function highlightXml(str) {
-      return escapeHtml(str)
-        .replace(/&lt;(\/?)([\w:-]+)/g, '&lt;$1<span class="text-red-400">$2</span>')
-        .replace(/([\w:-]+)(=)(&quot;[^&]*&quot;)/g, '<span class="text-yellow-400">$1</span>$2<span class="text-green-400">$3</span>');
+    function highlightHtml(str) {
+      const esc = escapeHtml(str);
+      return esc
+        // Comments: <!-- ... -->
+        .replace(/&lt;!--[\s\S]*?--&gt;/g, '<span class="text-gray-600">$&</span>')
+        // DOCTYPE
+        .replace(/&lt;!(DOCTYPE[^&]*?)&gt;/gi, '&lt;!<span class="text-gray-500">$1</span>&gt;')
+        // Tags: <tagname and </tagname
+        .replace(/&lt;(\/?)([\w:-]+)/g, '<span class="text-gray-500">&lt;$1</span><span class="text-red-400">$2</span>')
+        // Closing > and />
+        .replace(/(\/?)\s*&gt;/g, '<span class="text-gray-500">$1&gt;</span>')
+        // Attributes: name="value" or name='value'
+        .replace(/([\w:-]+)(=)(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;)/g,
+          '<span class="text-yellow-400">$1</span><span class="text-gray-500">$2</span><span class="text-green-400">$3</span>')
+        // Boolean/valueless attributes (standalone word between tag name and >)
+        .replace(/(<\/span>)\s+([\w:-]+)(?=\s|<span class="text-gray-500">)/g,
+          '$1 <span class="text-yellow-400">$2</span>')
+        // Inline CSS: style content between quotes (already green, make more specific)
+        // Entity references: &amp; &lt; etc
+        .replace(/&amp;[\w#]+;/g, '<span class="text-purple-400">$&</span>');
     }
 
     function highlightBody(body, contentType) {
       const ct = (contentType || '').toLowerCase();
       if (ct.includes('json')) return highlightJson(body);
-      if (ct.includes('xml') || ct.includes('html')) return highlightXml(body);
+      if (ct.includes('xml') || ct.includes('html')) return highlightHtml(body);
       return escapeHtml(body);
     }