diff --git a/plugins/unsloth-chat/index.jsx b/plugins/unsloth-chat/index.jsx
index 429f5e7..e85269f 100644
--- a/plugins/unsloth-chat/index.jsx
+++ b/plugins/unsloth-chat/index.jsx
@@ -226,29 +226,35 @@ function ErrorDetailModal(props) {
           {/* API URL used */}
           <div>
             <Header tag={HeaderTags.HeadingSM} margin={false}>Request URL</Header>
-            <Text tag={TextTags.textSM} style={{
+            <div style={{
               marginTop: "4px",
-              display: "block",
-              wordBreak: "break-all",
+              padding: "6px 10px",
+              background: "var(--background-secondary)",
+              borderRadius: "4px",
               fontFamily: "var(--font-code, monospace)",
               fontSize: "12px",
+              wordBreak: "break-all",
+              whiteSpace: "pre-wrap",
             }}>
               {error.url}
-            </Text>
+            </div>
           </div>
 
           {/* Configured API URL */}
           <div>
             <Header tag={HeaderTags.HeadingSM} margin={false}>Configured API URL</Header>
-            <Text tag={TextTags.textSM} style={{
+            <div style={{
               marginTop: "4px",
-              display: "block",
-              wordBreak: "break-all",
+              padding: "6px 10px",
+              background: "var(--background-secondary)",
+              borderRadius: "4px",
               fontFamily: "var(--font-code, monospace)",
               fontSize: "12px",
+              wordBreak: "break-all",
+              whiteSpace: "pre-wrap",
             }}>
               {error.apiUrl}
-            </Text>
+            </div>
           </div>
 
           {/* Model */}