diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef13819..a04a2fd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,8 +3,11 @@ import { fr } from "@codegouvfr/react-dsfr";
 import AutocompleteSearch from "@/components/AutocompleteSearch";
 import Link from "next/link";
 import Card from "@codegouvfr/react-dsfr/Card";
+import { getArticles } from "@/data/articles";
 
 export default async function Page() {
+  const articles = (await getArticles()).filter(({ homepage }) => homepage);
+
   return (
     <>
       <div className={fr.cx("fr-container", "fr-pt-4w", "fr-pb-4w")}>
@@ -30,67 +33,22 @@ export default async function Page() {
             </h2>
           </div>
           <div className={fr.cx("fr-col-md-6")}>
-            <p>
-              <Link
-                href="#"
-                className={fr.cx(
-                  "fr-link",
-                  "fr-link--icon-left",
-                  "fr-icon-arrow-right-line",
-                )}
-              >
-                Je suis enceinte, quelles précautions prendre&nbsp;?
-              </Link>
-            </p>
-            <p>
-              <Link
-                href="#"
-                className={fr.cx(
-                  "fr-link",
-                  "fr-link--icon-left",
-                  "fr-icon-arrow-right-line",
-                )}
-              >
-                Je ne me sens plus malade, est ce que je peux arrêter mon
-                traitement&nbsp;?
-              </Link>
-            </p>
-            <p>
-              <Link
-                href="#"
-                className={fr.cx(
-                  "fr-link",
-                  "fr-link--icon-left",
-                  "fr-icon-arrow-right-line",
-                )}
-              >
-                Dois-je me faire vacciner contre la grippe saisonnière&nbsp;?
-              </Link>
-            </p>
-            <p>
-              <Link
-                href="#"
-                className={fr.cx(
-                  "fr-link",
-                  "fr-link--icon-left",
-                  "fr-icon-arrow-right-line",
-                )}
-              >
-                Que faire si j&apos;ai des effets indésirables&nbsp;?
-              </Link>
-            </p>
-            <p>
-              <Link
-                href="#"
-                className={fr.cx(
-                  "fr-link",
-                  "fr-link--icon-left",
-                  "fr-icon-arrow-right-line",
-                )}
-              >
-                Numéros d&apos;urgence
-              </Link>
-            </p>
+            <ul role="nav" className={fr.cx("fr-raw-list")}>
+              {articles.map(({ title, slug }) => (
+                <li key={slug} className={fr.cx("fr-mb-3w")}>
+                  <Link
+                    href={`/articles/${slug}`}
+                    className={fr.cx(
+                      "fr-link",
+                      "fr-link--icon-left",
+                      "fr-icon-arrow-right-line",
+                    )}
+                  >
+                    {title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
           </div>
           <div
             className={fr.cx(
diff --git a/src/data/articles.ts b/src/data/articles.ts
index 7add554..7972211 100644
--- a/src/data/articles.ts
+++ b/src/data/articles.ts
@@ -8,6 +8,7 @@ export async function getArticles() {
     "Source",
     "Contenu",
     "Theme",
+    "Homepage",
   ]);
 
   return records.map(({ fields }) => {
@@ -17,6 +18,7 @@ export async function getArticles() {
       source: fields.Source as string,
       content: fields.Contenu as string,
       category: fields.Theme as string,
+      homepage: fields.Homepage as boolean,
     };
   });
 }
diff --git a/src/data/grist.ts b/src/data/grist.ts
index 313cdb7..d3d4293 100644
--- a/src/data/grist.ts
+++ b/src/data/grist.ts
@@ -12,7 +12,7 @@ const gristCache = new Map<string, Promise<any>>();
 export const getGristTableData = <F extends string>(
   tableId: string,
   fields: F[],
-): Promise<{ id: number; fields: Record<F, string | number> }[]> => {
+): Promise<{ id: number; fields: Record<F, string | number | boolean> }[]> => {
   if (!gristCache.has(tableId)) {
     gristCache.set(tableId, uncachedGetGristTableData(tableId, fields));
   }
@@ -24,9 +24,9 @@ export const getGristTableData = <F extends string>(
 async function uncachedGetGristTableData<F extends string>(
   tableId: string,
   fields: F[],
-): Promise<{ id: number; fields: Record<F, string | number> }[]> {
+): Promise<{ id: number; fields: Record<F, string | number | boolean> }[]> {
   const response = await fetch(
-    `https://grist.numerique.gouv.fr/api/docs/${process.env.GRIST_DOC_ID}/tables/${tableId}/records`,
+    `https://grist.numerique.gouv.fr/api/docs/${process.env.GRIST_DOC_ID}/tables/${tableId}/records?sort=manualSort`,
     {
       headers: {
         Authorization: `Bearer ${process.env.GRIST_API_KEY}`,