diff --git a/Libraries/LibWebView/InspectorClient.cpp b/Libraries/LibWebView/InspectorClient.cpp
index 52d463695b4..b88b67d9f70 100644
--- a/Libraries/LibWebView/InspectorClient.cpp
+++ b/Libraries/LibWebView/InspectorClient.cpp
@@ -610,9 +610,7 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
             comment = escape_html_entities(comment);
 
             builder.appendff("<span class=\"hoverable comment\" {}>", data_attributes.string_view());
-            builder.append("<span>&lt;!--</span>"sv);
-            builder.appendff("<span data-node-type=\"comment\" class=\"editable\">{}</span>", comment);
-            builder.append("<span>--&gt;</span>"sv);
+            builder.appendff("<span data-node-type=\"comment\" class=\"editable\" title=\"comment\">{}</span>", comment);
             builder.append("</span>"sv);
             return;
         }
@@ -639,7 +637,6 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
         auto tag = name.to_lowercase();
 
         builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
-        builder.append("<span>&lt;</span>"sv);
         builder.appendff("<span data-node-type=\"tag\" data-tag=\"{0}\" class=\"editable tag\">{0}</span>", tag);
 
         if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) {
@@ -658,7 +655,6 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
             });
         }
 
-        builder.append("<span>&gt;</span>"sv);
         builder.append("</span>"sv);
     });
 
diff --git a/Libraries/LibWebView/SourceHighlighter.h b/Libraries/LibWebView/SourceHighlighter.h
index 8b938075e1b..f564424d373 100644
--- a/Libraries/LibWebView/SourceHighlighter.h
+++ b/Libraries/LibWebView/SourceHighlighter.h
@@ -87,7 +87,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
         }
 
         :root {
-            --comment-color: lightgreen;
+            --comment-color: dimgrey;
+            --comment-hover-color: lightgreen;
+            --details-background-color: #333;
             --keyword-color: orangered;
             --name-color: orange;
             --value-color: deepskyblue;
@@ -100,7 +102,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
 
     @media (prefers-color-scheme: light) {
         :root {
-            --comment-color: green;
+            --comment-color: silver;
+            --comment-hover-color: green;
+            --details-background-color: whitesmoke;
             --keyword-color: red;
             --name-color: darkorange;
             --value-color: blue;
@@ -133,6 +137,16 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
         color: var(--line-number-color);
     }
 
+    details, div {
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+    details {
+        border: 1px solid #777;
+        border-radius: 6px;
+        padding: 2px 3px 2px 3px !important;
+        background-color: var(--details-background-color);
+    }
     .tag {
         font-weight: 600;
         color: var(--keyword-color);
@@ -140,6 +154,10 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
     .comment {
         color: var(--comment-color);
     }
+    .comment:hover {
+        color: var(--comment-hover-color);
+        background-color: inherit !important;
+    }
     .attribute-name {
         color: var(--name-color);
     }