diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3036658..f7a9ec4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,39 @@
 ---
 import Base from '../layouts/Base.astro';
 import Nav from '../components/Nav.astro';
+import { COURSES } from '../config/courses';
+const published = COURSES.filter((c) => c.published);
+const upcoming = COURSES.filter((c) => !c.published);
 ---
-<Base title="Catalogue" description="Formations systèmes embarqués et IA — L'Electron Rare">
+<Base title="Catalogue" description="Formations systèmes embarqués et IA — books en lecture libre, quiz et certificats. ESP32, KiCad, FreeRTOS.">
   <Nav />
-  <main class="pt-24 px-6 max-w-content mx-auto">
-    <h1 class="text-4xl font-semibold text-white">Formations</h1>
+  <main class="pt-28 pb-20 px-6 max-w-content mx-auto">
+    <h1 class="text-4xl md:text-5xl font-semibold tracking-tight text-white mb-3">Formations</h1>
+    <p class="text-lg text-slate-400 max-w-2xl mb-12">
+      Lecture libre, sans compte. Un compte n'est nécessaire que pour les quiz et le certificat.
+    </p>
+
+    <div class="grid md:grid-cols-3 gap-6 mb-16">
+      {published.map((c) => (
+        <a href={`/cours/${c.slug}`} class="group rounded-2xl border border-white/10 bg-night-soft p-6 transition-colors hover:border-copper/40">
+          <div class="w-2 h-2 rounded-full bg-copper mb-5 shadow-[0_0_12px_rgba(249,115,22,0.8)]"></div>
+          <h2 class="text-xl font-semibold text-white mb-2 group-hover:text-copper-soft transition-colors">{c.title}</h2>
+          <p class="text-sm text-slate-400 leading-relaxed">{c.blurb}</p>
+          <p class="mt-5 text-sm text-copper">Lire la formation →</p>
+        </a>
+      ))}
+    </div>
+
+    <h2 class="text-xl font-medium text-slate-300 mb-6">En préparation</h2>
+    <div class="grid md:grid-cols-3 gap-6">
+      {upcoming.map((c) => (
+        <div class="rounded-2xl border border-white/5 bg-night-soft/50 p-6 opacity-70">
+          <div class="w-2 h-2 rounded-full bg-slate-600 mb-5"></div>
+          <h3 class="text-xl font-semibold text-slate-300 mb-2">{c.title}</h3>
+          <p class="text-sm text-slate-500 leading-relaxed">{c.blurb}</p>
+          <p class="mt-5 text-xs uppercase tracking-wider text-slate-600">Bientôt</p>
+        </div>
+      ))}
+    </div>
   </main>
 </Base>