diff --git a/src/renderer/features/shared/components/json-preview.module.css b/src/renderer/features/shared/components/json-preview.module.css
index efbf361d3..3ab68660c 100644
--- a/src/renderer/features/shared/components/json-preview.module.css
+++ b/src/renderer/features/shared/components/json-preview.module.css
@@ -1,6 +1,4 @@
 .preview {
-    padding: var(--theme-spacing-md);
-    font-family: var(--theme-content-font-family);
     font-size: var(--theme-font-size-md);
     background: var(--theme-colors-surface);
 }
diff --git a/src/renderer/features/shared/components/json-preview.tsx b/src/renderer/features/shared/components/json-preview.tsx
index 2aeadd3d6..dc20915eb 100644
--- a/src/renderer/features/shared/components/json-preview.tsx
+++ b/src/renderer/features/shared/components/json-preview.tsx
@@ -1,13 +1,15 @@
 import styles from './json-preview.module.css';
 
+import { Code } from '/@/shared/components/code/code';
+
 interface JsonPreviewProps {
     value: Record<string, any> | string;
 }
 
 export const JsonPreview = ({ value }: JsonPreviewProps) => {
     return (
-        <pre className={styles.preview} style={{ userSelect: 'all' }}>
+        <Code block className={styles.preview} lang="json" p="md">
             {JSON.stringify(value, null, 4)}
-        </pre>
+        </Code>
     );
 };