diff --git a/src/components/httprequestviewer/RequestRowDetails.module.css b/src/components/httprequestviewer/RequestRowDetails.module.css
index 1c83b89..cb3aa3a 100644
--- a/src/components/httprequestviewer/RequestRowDetails.module.css
+++ b/src/components/httprequestviewer/RequestRowDetails.module.css
@@ -110,4 +110,30 @@ div.fullWidth {
     text-overflow: ellipsis;
     cursor: help;
     word-break: break-all;
+}
+
+/* Override status classes to only use foreground colors, not background colors */
+.detailListItem.success,
+.detailListItem.warning, 
+.detailListItem.danger,
+.timingHighlighted.success,
+.timingHighlighted.warning,
+.timingHighlighted.danger {
+    background-color: transparent !important;
+}
+
+/* Ensure status colors are applied only to text */
+.detailListItem.success,
+.timingHighlighted.success {
+    color: var(--color-success) !important;
+}
+
+.detailListItem.warning,
+.timingHighlighted.warning {
+    color: var(--color-warning) !important;
+}
+
+.detailListItem.danger,
+.timingHighlighted.danger {
+    color: var(--color-danger) !important;
 }
\ No newline at end of file
diff --git a/src/components/httprequestviewer/RequestRowDetails.tsx b/src/components/httprequestviewer/RequestRowDetails.tsx
index 723a1f9..65de203 100644
--- a/src/components/httprequestviewer/RequestRowDetails.tsx
+++ b/src/components/httprequestviewer/RequestRowDetails.tsx
@@ -5,7 +5,7 @@ import styles from './RequestRowDetails.module.css'
 // Import utility functions
 import { formatDuration, formatSize } from './lib/formatUtils'
 import {
-  getTotalResponseTimeColor,
+  getTotalResponseTimeClass,
   getQueueAnalysisIcon,
   getCDNIcon,
   getCDNDisplayName,
@@ -59,7 +59,7 @@ const RequestRowDetails: React.FC<RequestRowDetailsProps> = ({ request, visibleC
               </div>
               <div className={styles.detailListItem}><strong>Server Latency:</strong> {formatDuration(request.timing.serverLatency)}</div>
               <div className={styles.detailListItem}><strong>Network Duration:</strong> {formatDuration(request.timing.duration)}</div>
-              <div className={`${styles.detailListItem} ${styles.timingHighlighted}`} style={{ ...getTotalResponseTimeColor(request.timing.totalResponseTime) }}>
+              <div className={`${styles.detailListItem} ${styles.timingHighlighted} ${getTotalResponseTimeClass(request.timing.totalResponseTime)}`}>
                 <strong>Total Response Time:</strong> {formatDuration(request.timing.totalResponseTime)}
               </div>
               <div className={styles.detailListItem}><strong>Network Duration Only:</strong> {formatDuration(request.timing.networkDuration)}</div>