diff --git a/src/app/components/code-dialog.tsx b/src/app/components/code-dialog.tsx
index 857c138..b19cd86 100644
--- a/src/app/components/code-dialog.tsx
+++ b/src/app/components/code-dialog.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 
 type CodeDialogProps = {
@@ -35,10 +35,14 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <SyntaxHighlighter
-          language="javascript"
-          style={atelierSeasideDark}
+          language="json"
+          style={atomOneDark}
+          wrapLongLines
           customStyle={{
             maxHeight: "600px",
+            backgroundColor: "var(--secondary)",
+            overflow: "hidden",
+            wordBreak: "break-all",
           }}
         >
           {code}