diff --git a/package-lock.json b/package-lock.json
index e7c19e8..c65cbcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.2.4",
         "@types/node": "^24.12.2",
         "@types/react": "^19.2.14",
@@ -2864,6 +2865,19 @@
         "node": ">= 20"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.4.tgz",
@@ -4519,6 +4533,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -6854,6 +6881,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
diff --git a/package.json b/package.json
index a2c480c..a7d24a0 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
diff --git a/src/components/ai/AiPanel.tsx b/src/components/ai/AiPanel.tsx
index b8e9e84..f7fe846 100644
--- a/src/components/ai/AiPanel.tsx
+++ b/src/components/ai/AiPanel.tsx
@@ -250,7 +250,14 @@ export function AiPanel() {
                       ul: ({children}) => <ul className="list-disc pl-4 mb-1">{children}</ul>,
                       ol: ({children}) => <ol className="list-decimal pl-4 mb-1">{children}</ol>,
                       li: ({children}) => <li className="mb-0.5">{children}</li>,
-                      code: ({children}) => <code className="px-1 rounded text-xs" style={{background:'var(--bg-muted)'}}>{children}</code>,
+                      pre: ({children}) => (
+                        <pre className="rounded-lg p-3 my-2 overflow-x-auto text-xs" style={{background:'var(--bg-muted)'}}>
+                          {children}
+                        </pre>
+                      ),
+                      code: ({className, children}) => (
+                        <code className={`px-1 rounded text-xs ${className ?? ''}`} style={{background:'var(--bg-muted)'}}>{children}</code>
+                      ),
                       strong: ({children}) => <strong style={{color:'var(--text)'}}>{children}</strong>,
                     }}
                   >{msg.content}</ReactMarkdown>
diff --git a/src/index.css b/src/index.css
index 890e427..985e11b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @layer base {
   :root {