diff --git a/package.json b/package.json
index a2dbcca4..8ac1942a 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		"@fortawesome/free-solid-svg-icons": "^7.2.0",
 		"@libsql/client": "^0.17.2",
 		"@octokit/app": "^16.1.2",
+		"dompurify": "^3.4.2",
 		"es6-crawler-detect": "^4.0.2",
 		"ioredis": "^5.10.1",
 		"katex": "^0.16.44",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6a92e1f..88afb8e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
       '@octokit/app':
         specifier: ^16.1.2
         version: 16.1.2
+      dompurify:
+        specifier: ^3.4.2
+        version: 3.4.2
       es6-crawler-detect:
         specifier: ^4.0.2
         version: 4.0.2
@@ -649,42 +652,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
     resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
     resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
     resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
     resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
     resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
     resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==}
@@ -866,6 +863,9 @@ packages:
   devalue@5.6.4:
     resolution: {integrity: sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==}
 
+  dompurify@3.4.2:
+    resolution: {integrity: sha512-lHeS9SA/IKeIFFyYciHBr2n0v1VMPlSj843HdLOwjb2OxNwdq9Xykxqhk+FE42MzAdHvInbAolSE4mhahPpjXA==}
+
   dotenv@17.3.1:
     resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
     engines: {node: '>=12'}
@@ -991,28 +991,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -1897,6 +1893,10 @@ snapshots:
 
   devalue@5.6.4: {}
 
+  dompurify@3.4.2:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dotenv@17.3.1: {}
 
   entities@4.5.0: {}
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
index 6dda5517..c5b8c026 100644
--- a/src/components/Popup.svelte
+++ b/src/components/Popup.svelte
@@ -34,6 +34,7 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML'
 
 	import { faXmark } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -70,7 +71,7 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 				<Fa icon={faXmark} />
 			</button>
 		</header>
-		{@html popup_state.text}
+		<div class="html" use:sanitizeHTML={[popup_state.text]}></div>
 	</div>
 </div>
 
@@ -119,6 +120,10 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 		pointer-events: initial;
 	}
 
+	.html {
+		overflow-y: scroll;
+	}
+
 	button {
 		padding: 0.2rem 1rem;
 	}
diff --git a/src/components/Selection.svelte b/src/components/Selection.svelte
index 01834f2a..682f22a4 100644
--- a/src/components/Selection.svelte
+++ b/src/components/Selection.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import ChipGroup from './ChipGroup.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML'
+	import { get_comparison_score } from '$lib/client/utils'
 	import Chip from './Chip.svelte'
-	import { get_comparison_score, normalize_text } from '$lib/client/utils'
+	import ChipGroup from './ChipGroup.svelte'
 
 	type Props = {
 		title?: string
@@ -122,7 +123,7 @@
 
 <section aria-label={section_label}>
 	{#if title}
-		<p>{@html title}</p>
+		<p use:sanitizeHTML={[title]}></p>
 	{/if}
 
 	<form onsubmit={handle_submit}>
diff --git a/src/lib/client/sanitize_HTML.ts b/src/lib/client/sanitize_HTML.ts
new file mode 100644
index 00000000..abd958c7
--- /dev/null
+++ b/src/lib/client/sanitize_HTML.ts
@@ -0,0 +1,22 @@
+import { default as createDOMPurify, default as DOMPurify } from 'dompurify'
+
+export function sanitizeHTML(
+	node: { innerHTML: string },
+	[unsafeHTML]: [string],
+): {
+	update: ([unsafeHTML]: [string]) => void
+} {
+	if (globalThis.window !== undefined) {
+		const DOMPurify = createDOMPurify(globalThis.window)
+
+		node.innerHTML = DOMPurify.sanitize(unsafeHTML)
+	}
+
+	return {
+		update([unsafeHTML]: [string]) {
+			if (globalThis.window !== undefined) {
+				node.innerHTML = DOMPurify.sanitize(unsafeHTML)
+			}
+		},
+	}
+}
diff --git a/src/routes/app.css b/src/routes/app.css
index a53a0fcc..3fec89a8 100644
--- a/src/routes/app.css
+++ b/src/routes/app.css
@@ -296,3 +296,8 @@ label {
 .katex-display {
 	margin: 0.5em 0;
 }
+
+.katex-break {
+	white-space: normal;
+	display: inline;
+}
diff --git a/src/routes/category-comparison/[...ids]/+page.svelte b/src/routes/category-comparison/[...ids]/+page.svelte
index a1082c62..231bb62a 100644
--- a/src/routes/category-comparison/[...ids]/+page.svelte
+++ b/src/routes/category-comparison/[...ids]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import {
 		faCheck,
@@ -54,7 +55,7 @@
 			{#each compared_categories as category}
 				<th>
 					<a href="/category/{category.id}" aria-label={category.name}>
-						{@html category.notation}
+						<span use:sanitizeHTML={[category.notation]}></span>
 					</a>
 				</th>
 			{/each}
diff --git a/src/routes/category-implication/[id]/+page.svelte b/src/routes/category-implication/[id]/+page.svelte
index 1a202aad..fc64c04d 100644
--- a/src/routes/category-implication/[id]/+page.svelte
+++ b/src/routes/category-implication/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -51,7 +52,7 @@
 {:else}
 	<p>
 		<strong>Reason:</strong>
-		{@html data.implication.reason}
+		<span use:sanitizeHTML={[data.implication.reason]}></span>
 	</p>
 {/if}
 
diff --git a/src/routes/category-property/[id]/+page.svelte b/src/routes/category-property/[id]/+page.svelte
index d6ef4e02..f4e74506 100644
--- a/src/routes/category-property/[id]/+page.svelte
+++ b/src/routes/category-property/[id]/+page.svelte
@@ -3,6 +3,7 @@
 	import ImplicationList from '$components/ImplicationList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
 
@@ -14,7 +15,7 @@
 <h2>{data.property.id}</h2>
 
 <p>
-	{@html data.property.description}
+	<span use:sanitizeHTML={[data.property.description]}></span>
 
 	{#if data.property.invariant_under_equivalences === false}
 		Warning: This property is not invariant under equivalences.
diff --git a/src/routes/category/[id]/+page.svelte b/src/routes/category/[id]/+page.svelte
index b266c661..0d06aff0 100644
--- a/src/routes/category/[id]/+page.svelte
+++ b/src/routes/category/[id]/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
+	import CategoryList from '$components/CategoryList.svelte'
+	import Chip from '$components/Chip.svelte'
+	import ChipGroup from '$components/ChipGroup.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import PropertyList from '$components/PropertyList.svelte'
-	import ChipGroup from '$components/ChipGroup.svelte'
-	import Chip from '$components/Chip.svelte'
-	import { category_detail_level } from '$lib/states/detail_level.svelte'
+	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import TextWithReason from '$components/TextWithReason.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { filter_by_tag, pluralize } from '$lib/client/utils'
-	import CategoryList from '$components/CategoryList.svelte'
-	import { faQuestion, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+	import { category_detail_level } from '$lib/states/detail_level.svelte'
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
-	import SuggestionForm from '$components/SuggestionForm.svelte'
 
 	let { data } = $props()
 
@@ -30,17 +31,17 @@
 	<ul class="with-margins">
 		<li>
 			<strong>notation:</strong>
-			{@html category.notation}
+			<span use:sanitizeHTML={[category.notation]}></span>
 		</li>
 
 		<li>
 			<strong>objects:</strong>
-			{@html category.objects}
+			<span use:sanitizeHTML={[category.objects]}></span>
 		</li>
 
 		<li>
 			<strong>morphisms:</strong>
-			{@html category.morphisms}
+			<span use:sanitizeHTML={[category.morphisms]}></span>
 		</li>
 
 		{#if data.related_categories.length}
@@ -48,7 +49,7 @@
 				<strong>Related categories:</strong>
 				{#each data.related_categories as { id, name, notation }, i}
 					<a href={`/category/${id}`} aria-label={name}>
-						{@html notation}
+						<span use:sanitizeHTML={[notation]}></span>
 					</a>{#if i < data.related_categories.length - 1}
 						,&nbsp;
 					{/if}
@@ -69,14 +70,15 @@
 					href="/category/{category.dual_category_id}"
 					aria-label={category.dual_category_name}
 				>
-					{@html category.dual_category_notation}
+					<span use:sanitizeHTML={[category.dual_category_notation ?? '']}
+					></span>
 				</a>
 			</li>
 		{/if}
 	</ul>
 
 	{#if category.description}
-		<p>{@html category.description}</p>
+		<p use:sanitizeHTML={[category.description]}></p>
 	{/if}
 </section>
 
@@ -158,7 +160,7 @@
 	{#if data.special_objects.length}
 		<ul class="with-margins">
 			{#each data.special_objects as obj}
-				<li>{obj.type}: {@html obj.description}</li>
+				<li>{obj.type}: <span use:sanitizeHTML={[obj.description]}></span></li>
 			{/each}
 		</ul>
 	{:else}
@@ -174,7 +176,7 @@
 			<li>
 				<TextWithReason reason={obj.reason}>
 					{#if obj.description}
-						{obj.type}: {@html obj.description}
+						{obj.type}: <span use:sanitizeHTML={[obj.description]}></span>
 					{:else}
 						{obj.type}: <Fa icon={faQuestion} scale={0.825} />
 					{/if}
@@ -204,7 +206,7 @@
 
 		<ul>
 			{#each data.comments as { id, comment } (id)}
-				<li class="hint">{@html comment}</li>
+				<li class="hint" use:sanitizeHTML={[comment]}></li>
 			{/each}
 		</ul>
 	</section>
diff --git a/src/routes/foundations/+page.svelte b/src/routes/foundations/+page.svelte
index 4f8dd24c..b6c20e96 100644
--- a/src/routes/foundations/+page.svelte
+++ b/src/routes/foundations/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	let { data } = $props()
 </script>
 
@@ -8,7 +9,7 @@
 	description="How to make sense of categories in set theory"
 />
 
-{@html data.content}
+<span use:sanitizeHTML={[data.content]}></span>
 
 <style>
 	:global(img) {
diff --git a/src/routes/functor-implication/[id]/+page.svelte b/src/routes/functor-implication/[id]/+page.svelte
index b9973cca..a73ab107 100644
--- a/src/routes/functor-implication/[id]/+page.svelte
+++ b/src/routes/functor-implication/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -77,7 +78,7 @@
 {:else}
 	<p>
 		<strong>Reason:</strong>
-		{@html data.implication.reason}
+		<span use:sanitizeHTML={[data.implication.reason]}></span>
 	</p>
 {/if}
 
diff --git a/src/routes/functor-property/[id]/+page.svelte b/src/routes/functor-property/[id]/+page.svelte
index afe73dc8..c4bb61f6 100644
--- a/src/routes/functor-property/[id]/+page.svelte
+++ b/src/routes/functor-property/[id]/+page.svelte
@@ -3,6 +3,7 @@
 	import FunctorList from '$components/FunctorList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
 
@@ -16,7 +17,7 @@
 <h2>{property.id}</h2>
 
 <p>
-	{@html property.description}
+	<span use:sanitizeHTML={[property.description]}></span>
 
 	{#if property.invariant_under_equivalences === false}
 		Warning: This property is not invariant under equivalences.
diff --git a/src/routes/functor/[id]/+page.svelte b/src/routes/functor/[id]/+page.svelte
index c33d84a4..7b6bd91c 100644
--- a/src/routes/functor/[id]/+page.svelte
+++ b/src/routes/functor/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import MetaData from '$components/MetaData.svelte'
 	import PropertyList from '$components/PropertyList.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { category_detail_level } from '$lib/states/detail_level.svelte'
 	let { data } = $props()
 
@@ -31,7 +32,7 @@
 		{/if}
 	</ul>
 
-	<p>{@html functor.description}</p>
+	<p><span use:sanitizeHTML={[functor.description]}></span></p>
 </section>
 
 <!-- TODO: remove code duplication with category detail page -->
diff --git a/src/routes/lemma/[id]/+page.svelte b/src/routes/lemma/[id]/+page.svelte
index 9f1c71c7..3769a89a 100644
--- a/src/routes/lemma/[id]/+page.svelte
+++ b/src/routes/lemma/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import CategoryList from '$components/CategoryList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 
 	let { data } = $props()
 </script>
@@ -12,11 +13,11 @@
 
 <h3>Claim</h3>
 
-{@html data.lemma.claim}
+<span use:sanitizeHTML={[data.lemma.claim]}></span>
 
 <h3>Proof</h3>
 
-{@html data.lemma.proof}
+<span use:sanitizeHTML={[data.lemma.proof]}></span>
 
 <h3>Usage</h3>