diff --git a/src/components/GlossaryRelationCards.astro b/src/components/GlossaryRelationCards.astro
new file mode 100644
index 0000000..0f800ea
--- /dev/null
+++ b/src/components/GlossaryRelationCards.astro
@@ -0,0 +1,32 @@
+---
+import type { GlossaryRelationBlock } from "../lib/glossary";
+import { hrefOfGlossaryEntry } from "../lib/glossary";
+
+interface Props {
+  relationBlocks: GlossaryRelationBlock[];
+}
+
+const { relationBlocks = [] } = Astro.props;
+---
+
+{relationBlocks.length > 0 && (
+  <section class="glossary-relations" aria-label="Relations conceptuelles">
+    <h2>Relations conceptuelles</h2>
+
+    <div class="glossary-relations-grid">
+      {relationBlocks.map((block) => (
+        <section class={`glossary-relations-card ${block.className}`}>
+          <h3>{block.title}</h3>
+          <ul>
+            {block.items.map((item) => (
+              <li>
+                <a href={hrefOfGlossaryEntry(item)}>{item.data.term}</a>
+                <span> — {item.data.definitionShort}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
+  </section>
+)}
diff --git a/src/pages/glossaire/[...slug].astro b/src/pages/glossaire/[...slug].astro
index 489496d..4f86787 100644
--- a/src/pages/glossaire/[...slug].astro
+++ b/src/pages/glossaire/[...slug].astro
@@ -1,13 +1,13 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
 import GlossaryAside from "../../components/GlossaryAside.astro";
+import GlossaryRelationCards from "../../components/GlossaryRelationCards.astro";
 import { getCollection, render } from "astro:content";
 import {
   getDisplayDomain,
   getDisplayFamily,
   getDisplayLevel,
   getRelationBlocks,
-  hrefOfGlossaryEntry,
   normalizeGlossarySlug,
 } from "../../lib/glossary";
 
@@ -133,27 +133,7 @@ const hasScholarlyMeta =
     <Content />
   </div>
 
-  {relationBlocks.length > 0 && (
-    <section class="glossary-relations" aria-label="Relations conceptuelles">
-      <h2>Relations conceptuelles</h2>
-
-      <div class="glossary-relations-grid">
-        {relationBlocks.map((block) => (
-          <section class={`glossary-relations-card ${block.className}`}>
-            <h3>{block.title}</h3>
-            <ul>
-              {block.items.map((item) => (
-                <li>
-                  <a href={hrefOfGlossaryEntry(item)}>{item.data.term}</a>
-                  <span> — {item.data.definitionShort}</span>
-                </li>
-              ))}
-            </ul>
-          </section>
-        ))}
-      </div>
-    </section>
-  )}
+  <GlossaryRelationCards relationBlocks={relationBlocks} />
 </GlossaryLayout>
 
 <script is:inline>