diff --git a/_data/formations.js b/_data/formations.js
new file mode 100644
index 0000000..89545bf
--- /dev/null
+++ b/_data/formations.js
@@ -0,0 +1,12 @@
+const EleventyFetch = require("@11ty/eleventy-fetch");
+
+module.exports = async function () {
+    const URL = "https://code.gouv.fr/data/formations-logiciels-libres.json";
+
+    let formations = await EleventyFetch(URL, {
+        duration: "2w",
+        type: "json"
+    });
+
+    return formations;
+};
diff --git a/_includes/components/card_formation.njk b/_includes/components/card_formation.njk
new file mode 100644
index 0000000..5b56e1e
--- /dev/null
+++ b/_includes/components/card_formation.njk
@@ -0,0 +1,48 @@
+{% if not card %}{% set card = params %}{% endif %}
+<div class="fr-card{% if not card.externalUrl %} fr-enlarge-link{% endif %} {{ card.addClass }}">
+  <div class="fr-card__body">
+    <div class="fr-card__content">
+      <h3 class="fr-card__title">
+        <a href="{{ card.externalUrl }}">
+          {{ card.title }}
+        </a>
+      </h3>
+      <p class="fr-card__desc">{{ card.description }}</p>
+      <div class="fr-card__start">
+	<p><a href="mailto:{{ card.email }}">{{ card.email }}</a></p>
+      </div>
+      <div class="fr-card__end">
+	<h6>Formations</h6>
+	<ul>
+	  {% for f in card.formations %}
+	    {% if loop.index0 < 3 %}
+	      <li>{{ f }}</li>
+	    {% endif %}
+	  {% endfor %}
+	  <li>...</li>
+	</ul>
+        <p class="fr-card__detail">{{ card.detailEnd }}</p>
+      </div>
+    </div>
+  </div>
+  {% if card.badges or card.image %}
+    <div class="fr-card__header">
+      {% if card.badges %}
+        <ul class="fr-badges-group">
+          {% for badge in card.badges %}
+            <li><p class="fr-badge fr-badge--green-emeraude">{{ badge }}</p></li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+      {% if card.image %}
+        {% if card.image.path %}
+          <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
+          {% elif card.image.src %}
+          <div class="fr-card__img">
+            <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.src }}" alt="{{ card.image.alt }}">
+          </div>
+        {% endif %}
+      {% endif %}
+    </div>
+  {% endif %}
+</div>
diff --git a/content/fr/formations/index.njk b/content/fr/formations/index.njk
new file mode 100644
index 0000000..f3407fc
--- /dev/null
+++ b/content/fr/formations/index.njk
@@ -0,0 +1,30 @@
+---
+title: "Offre de formations logiciels libres"
+description: Liste des formations logiciels libres par des organismes français
+layout: layouts/page.njk
+eleventyNavigation:
+  key: "Formations logiciels libres"
+  parent: Ressources
+  order: 5
+---
+
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
+  title: "Formations logiciels libres",
+  description: '<a class="fr-link fr-text--lead" href="mailto:contact@code.gouv.fr">Sollicitez-nous pour être référencés</a>.' | safe
+}) }}
+<div class="fr-my-6w">
+  <div class="fr-grid-row fr-grid-row--gutters">
+    {% asyncAll formation in formations %}
+    <div class="fr-col-12 fr-col-md-3">
+      {{ component("card_formation", {
+	externalUrl: formation.site_web,
+        title: formation.organisme,
+	description: formation.description,
+	formations: formation.formations,
+	email: formation.courriel
+      }) }}
+    </div>
+    {% endall %}
+  </div>
+</div>