diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx
index 5461df452..cb418c562 100644
--- a/quartz/components/Body.tsx
+++ b/quartz/components/Body.tsx
@@ -7,41 +7,7 @@ import mermaidStyle from "./styles/mermaid.scss"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
-  return (
-    <div id="quartz-body">
-      {children}
-      <div id="mermaid-container">
-        <div class="mermaid-backdrop" />
-        <div id="mermaid-space">
-          <div class="mermaid-header">
-            <button
-              class="close-button"
-              aria-label="close button"
-              title="close button"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <line x1={18} y1={6} x2={6} y2={18} />
-                <line x1={6} y1={6} x2={18} y2={18} />
-              </svg>
-            </button>
-          </div>
-          <div class="mermaid-content" />
-        </div>
-      </div>
-    </div>
-  )
+  return <div id="quartz-body">{children}</div>
 }
 
 Body.afterDOMLoaded = clipboardScript + mermaidScript
diff --git a/quartz/components/Mermaid.tsx b/quartz/components/Mermaid.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/quartz/components/pages/Content.tsx b/quartz/components/pages/Content.tsx
index 8222d786e..bd808fc3b 100644
--- a/quartz/components/pages/Content.tsx
+++ b/quartz/components/pages/Content.tsx
@@ -1,11 +1,45 @@
 import { htmlToJsx } from "../../util/jsx"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
-const Content: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
+const Content: QuartzComponent = ({ ctx, fileData, tree }: QuartzComponentProps) => {
   const content = htmlToJsx(fileData.filePath!, tree)
   const classes: string[] = fileData.frontmatter?.cssclasses ?? []
   const classString = ["popover-hint", ...classes].join(" ")
-  return <article class={classString}>{content}</article>
+  return (
+    <>
+      <article class={classString}>{content}</article>
+      <div id="mermaid-container">
+        <div class="mermaid-backdrop" />
+        <div id="mermaid-space">
+          <div class="mermaid-header">
+            <button
+              class="close-button"
+              aria-label="close button"
+              title="close button"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1={18} y1={6} x2={6} y2={18} />
+                <line x1={6} y1={6} x2={18} y2={18} />
+              </svg>
+            </button>
+          </div>
+          <div class="mermaid-content" />
+        </div>
+      </div>
+    </>
+  )
 }
 
 export default (() => Content) satisfies QuartzComponentConstructor