diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e40fe1..5a55a4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,25 @@ skip versions are the composition of each intervening adjacent
 release's steps in order — no A-to-B path is pre-computed beyond
 that.
 
+## 0.2.2 — 2026-05-26
+
+**Patch — no operator action required.** Rebuild the frontend and
+restart per the routine deploy steps; no `.env` changes, no schema
+changes, no behavior changes a deployment would notice in steady
+state beyond the fix below.
+
+### Fixed
+
+- **Mermaid blocks rendered as raw code on `/philosophy`.**
+  `frontend/src/components/Philosophy.jsx` parsed PHILOSOPHY.md with
+  the bare `marked` import and `dangerouslySetInnerHTML`, so
+  ```` ```mermaid ```` fences fell through as `<pre>` blocks rather
+  than rendered diagrams. Swapped to `MarkdownPreview`, which already
+  carries the lazy mermaid loader + SVG render path used by the RFC
+  body view, so the philosophy surface now renders mermaid the same
+  way RFC bodies do. Pre-existing gap, surfaced when a deployment
+  authored a mermaid block in its `PHILOSOPHY_PATH` override.
+
 ## 0.2.1 — 2026-05-26
 
 **Patch — no operator action required.** Rebuild the frontend and
diff --git a/VERSION b/VERSION
index 0c62199..ee1372d 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.2.1
+0.2.2
diff --git a/frontend/package.json b/frontend/package.json
index fa730fe..6358a52 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rfc-app-frontend",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/Philosophy.jsx b/frontend/src/components/Philosophy.jsx
index 0c364ec..6675511 100644
--- a/frontend/src/components/Philosophy.jsx
+++ b/frontend/src/components/Philosophy.jsx
@@ -15,7 +15,7 @@
 
 import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { marked } from 'marked'
+import MarkdownPreview from './MarkdownPreview.jsx'
 import { getPhilosophy } from '../api.js'
 
 export default function Philosophy({ authenticated }) {
@@ -33,8 +33,6 @@ export default function Philosophy({ authenticated }) {
     return () => { active = false }
   }, [])
 
-  const html = body ? marked.parse(body) : ''
-
   return (
     <div className="philosophy-page">
       <header className="philosophy-header">
@@ -53,7 +51,7 @@ export default function Philosophy({ authenticated }) {
         {loading && <p className="muted">Loading…</p>}
         {error && <p className="error">Could not load the philosophy: {error}</p>}
         {!loading && !error && (
-          <div dangerouslySetInnerHTML={{ __html: html }} />
+          <MarkdownPreview content={body} />
         )}
       </article>
     </div>