diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 4dabd2b..d5bcda6 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1104,7 +1104,7 @@ const DetailPanel = ({
         {metadata && (
           <div>
             <dt>Metadata</dt>
-            <pre>{JSON.stringify(metadata, null, 2)}</pre>
+            <pre className="detail-metadata__block">{JSON.stringify(metadata, null, 2)}</pre>
           </div>
         )}
         {hasOcrAsset && ocrOpen
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cbb246e..34d2565 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2035,6 +2035,19 @@ button.danger:hover:not([disabled]) {
   margin-top: 0.5rem;
 }
 
+.detail-metadata__block {
+  margin: 0.35rem 0 0;
+  padding: 0.5rem 0.6rem;
+  background: var(--surface-soft);
+  border-radius: 4px;
+  border: 1px solid var(--border-muted, var(--border));
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
 .tag-pill {
   display: inline-flex;
   align-items: center;