diff --git a/site/src/components/Codeblock/Codeblock.tsx b/site/src/components/Codeblock/Codeblock.tsx
new file mode 100644
index 0000000000000..5ce87777c82aa
--- /dev/null
+++ b/site/src/components/Codeblock/Codeblock.tsx
@@ -0,0 +1,49 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+	darcula,
+	dracula,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+export const Codeblock = ({
+	children,
+	...props
+}: React.ComponentProps<typeof SyntaxHighlighter>) => {
+	const [isDark, setIsDark] = useState(() => {
+		if (typeof document === "undefined") {
+			return true;
+		}
+		return document.documentElement.classList.contains("dark");
+	});
+
+	useEffect(() => {
+		if (typeof document === "undefined") {
+			return;
+		}
+		const root = document.documentElement;
+		const update = () => setIsDark(root.classList.contains("dark"));
+		update();
+
+		const mo = new MutationObserver(update);
+		mo.observe(root, { attributes: true, attributeFilter: ["class"] });
+		return () => {
+			mo.disconnect();
+		};
+	}, []);
+
+	return (
+		<SyntaxHighlighter
+			language="json"
+			style={isDark ? dracula : darcula}
+			customStyle={{
+				padding: 0,
+				border: "none",
+				background: "transparent",
+			}}
+			{...props}
+		>
+			{children}
+		</SyntaxHighlighter>
+	);
+};
diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index cbb338ab40fb1..d1308f735d69d 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -4,6 +4,7 @@ import type {
 } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
+import { Codeblock } from "components/Codeblock/Codeblock";
 import { TableCell, TableRow } from "components/Table/Table";
 import {
 	Tooltip,
@@ -178,7 +179,6 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const [firstPrompt] = interception.user_prompts;
-
 	const inputTokens = interception.token_usages.reduce(
 		(acc, tokenUsage) => acc + tokenUsage.input_tokens,
 		0,
@@ -477,7 +477,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<div className="flex flex-col gap-2 w-[800px]">
 									<div>Token Usage Metadata</div>
 									<div className="bg-surface-secondary rounded-md p-4">
-										<pre>{JSON.stringify(tokenUsagesMetadata, null, 2)}</pre>
+										<Codeblock>
+											{JSON.stringify(tokenUsagesMetadata, null, 2)}
+										</Codeblock>
 									</div>
 								</div>
 							)}