diff --git a/apps/canvas/front/src/Config.tsx b/apps/canvas/front/src/Config.tsx
index df03746..7a93634 100644
--- a/apps/canvas/front/src/Config.tsx
+++ b/apps/canvas/front/src/Config.tsx
@@ -2,6 +2,8 @@
 import { AppNode, useEnv, useProjectId } from "./lib/state";
 import { generateDodoConfig } from "./lib/config";
 import { useEffect, useMemo, useState } from "react";
+import { Card, CardContent } from "./components/ui/card";
+import JSONView from "@microlink/react-json-view";
 
 export function Config() {
 	const env = useEnv();
@@ -14,11 +16,21 @@
 			setNodes(n);
 		}
 	}, [n, setNodes]);
-	const config = useMemo(() => generateDodoConfig(projectId, nodes, env), [projectId, nodes, env]);
-	const configS = useMemo(() => JSON.stringify(config, undefined, 4), [config]);
+	const config = useMemo(() => generateDodoConfig(projectId, nodes, env) || {}, [projectId, nodes, env]);
 	return (
-		<div className="px-5">
-			<pre>{configS}</pre>
-		</div>
+		<Card className="h-full flex flex-col">
+			<CardContent className="flex-1 min-h-0 p-4">
+				<div className="h-full p-4 bg-muted rounded-lg overflow-auto">
+					<JSONView
+						src={config as object}
+						theme="rjv-default"
+						name={false}
+						displayDataTypes={false}
+						enableClipboard={true}
+						style={{ fontFamily: "JetBrains Mono" }}
+					/>
+				</div>
+			</CardContent>
+		</Card>
 	);
 }