diff --git a/src/app/components/code-dialog.tsx b/src/app/components/code-dialog.tsx
index bab827b..ad50135 100644
--- a/src/app/components/code-dialog.tsx
+++ b/src/app/components/code-dialog.tsx
@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { CodeHighlighter } from "./code-highlighter";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 
 type CodeDialogProps = {
@@ -34,20 +33,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
-        <SyntaxHighlighter
-          language="json"
-          style={atomOneDark}
-          wrapLongLines
-          customStyle={{
-            maxHeight: "600px",
-            backgroundColor: "hsl(var(--popover))",
-            overflow: "hidden",
-            wordBreak: "break-all",
-            borderRadius: "0.75rem",
-          }}
-        >
-          {code}
-        </SyntaxHighlighter>
+        <CodeHighlighter code={code} />
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/components/code-highlighter.tsx b/src/app/components/code-highlighter.tsx
new file mode 100644
index 0000000..c40e180
--- /dev/null
+++ b/src/app/components/code-highlighter.tsx
@@ -0,0 +1,34 @@
+import { ReactElement } from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+type CodeHighlighterProps = {
+  /**
+   * The code to highlight.
+   */
+  code: string;
+
+  /**
+   * Should the element be rounded?
+   */
+  rounded?: boolean;
+};
+
+export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
+  return (
+    <SyntaxHighlighter
+      language="json"
+      style={atomOneDark}
+      wrapLongLines
+      customStyle={{
+        maxHeight: "600px",
+        backgroundColor: "hsl(var(--popover))",
+        overflow: "hidden",
+        wordBreak: "break-all",
+        borderRadius: rounded ? "0.75rem" : undefined,
+      }}
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+}