diff --git a/ui/web/src/components/shared/markdown-renderer.tsx b/ui/web/src/components/shared/markdown-renderer.tsx
index 31cab6eb..3a685976 100644
--- a/ui/web/src/components/shared/markdown-renderer.tsx
+++ b/ui/web/src/components/shared/markdown-renderer.tsx
@@ -18,8 +18,8 @@ function CodeBlock({
   const lang = className?.replace("language-", "") ?? "";
 
   return (
-    <div className="group relative overflow-hidden rounded-md">
-      <div className="flex items-center justify-between rounded-t-md bg-muted px-3 py-1 text-xs text-muted-foreground">
+    <div className="not-prose group relative my-4 overflow-hidden rounded-md border">
+      <div className="flex items-center justify-between bg-muted px-3 py-1 text-xs text-muted-foreground">
         <span>{lang || "code"}</span>
         <button
           type="button"
@@ -30,7 +30,7 @@ function CodeBlock({
           {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
         </button>
       </div>
-      <pre className="!mt-0 !rounded-t-none !bg-muted/50 !text-foreground overflow-x-auto">
+      <pre className="overflow-x-auto bg-muted/50 p-4 text-sm text-foreground">
         <code className={className}>{children}</code>
       </pre>
     </div>
@@ -55,6 +55,10 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeHighlight]}
         components={{
+          pre({ children }) {
+            // Strip the outer <pre> from ReactMarkdown — CodeBlock renders its own
+            return <>{children}</>;
+          },
           code({ className, children, ...props }) {
             const isInline = !className;
             if (isInline) {
diff --git a/ui/web/src/index.css b/ui/web/src/index.css
index f051fe38..2ec90831 100644
--- a/ui/web/src/index.css
+++ b/ui/web/src/index.css
@@ -136,13 +136,4 @@
     font-family: system-ui, -apple-system, sans-serif;
   }
 
-  /* Override prose's dark pre background with theme-aware colors */
-  .prose pre {
-    background-color: var(--muted);
-    color: var(--foreground);
-  }
-  .prose pre code,
-  .prose pre code.hljs {
-    color: inherit;
-  }
 }