diff --git a/src/Editor.tsx b/src/Editor.tsx
index 49038b2..a5a953e 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -132,11 +132,11 @@ export const Editor: FC = () => {
 				{/* CODE EDITOR */}
 				<div
 					className={cn(
-						"absolute mt-12 flex h-full w-full justify-end p-3",
+						"pointer-events-none absolute mt-12 flex w-full justify-end p-3",
 						tab !== "code" && "hidden",
 					)}
 				>
-					<Button className="z-10" variant="subtle" size="sm" onClick={onCopy}>
+					<Button className="pointer-events-auto z-10" variant="subtle" size="sm" onClick={onCopy}>
 						{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
 					</Button>
 				</div>
diff --git a/src/Preview.tsx b/src/Preview.tsx
index 45c4fa1..54e5dd1 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -388,7 +388,7 @@ const Debugger: FC<DebuggerProps> = ({ output }) => {
 			className="h-full w-full bg-surface-primary"
 		>
 			<ResizablePanel className="flex">
-				<div className="h-full w-full overflow-scroll break-all p-4">
+				<div className="h-full w-full overflow-scroll break-all p-4 text-sm font-mono">
 					<ReactJsonView
 						src={output ?? {}}
 						collapsed={1}
diff --git a/src/index.css b/src/index.css
index ef5a0dc..5d6d9b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -133,6 +133,7 @@
 /* Styles for the JSON viewer */
 
 .react-json-view {
+  font-family: "DM Mono", monospace !important;
   background: hsl(var(--surface-primary)) !important;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ffe8fe..64b1d76 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
 		extend: {
 			fontFamily: {
 				sans: `"Inter Variable", system-ui, sans-serif`,
-				mono: `"DM Mono", system-mono, monospace`,
+				mono: `"DM Mono", monospace`,
 			},
 			size: {
 				"icon-lg": "1.5rem",