--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1001,18 +1001,23 @@ a.learn-more-link.webconsole-learn-more-
   font-style: inherit;
 }
 
 .webconsole-output-wrapper .message.network .status {
   color: var(--theme-highlight-blue);
   font-style: inherit;
 }
 
-.webconsole-output-wrapper .message.network .status .status-code:not([data-code^="3"]) {
-  color: white;
+.webconsole-output-wrapper .message.network .status .status-info .status-code {
+  padding: 0 2px;
+  border-radius: 3px;
+}
+
+.webconsole-output-wrapper .message.network .status .status-info .status-code:not([data-code^="3"]) {
+  color: var(--theme-body-background);
 }
 
 
 .network.message .network-info {
   display: none;
   margin-top: 8px;
   border: solid 1px var(--theme-splitter-color);
 }

--- a/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
@@ -66,22 +66,23 @@ function NetworkEventMessage({
 
   const {
     httpVersion,
     status,
     statusText,
   } = response;
 
   const topLevelClasses = [ "cm-s-mozilla" ];
-  let statusInfo;
+  let statusCode, statusInfo;
 
   if (httpVersion && status && statusText !== undefined && totalTime !== undefined) {
+    statusCode = dom.span({className: "status-code", "data-code": status}, status);
     statusInfo = dom.span(
-      {className: "status-code", "data-code": status},
-      `[${httpVersion} ${status} ${statusText} ${totalTime}ms]`
+      {className: "status-info"},
+      `[${httpVersion} `, statusCode, ` ${statusText} ${totalTime}ms]`
     );
   }
 
   const toggle = () => {
     if (open) {
       dispatch(actions.messageClose(id));
     } else {
       dispatch(actions.messageOpen(id));