diff --git a/src/lib/components/test_cases/TestCasesStackRepresentation.svelte b/src/lib/components/test_cases/TestCasesStackRepresentation.svelte
index 9d62eea96d0b640bcfd4f33b1eae6e4793bdd9b1..98cc74dcc1e6fe37b804b935bbcc9b41c2a6ccdd 100644
--- a/src/lib/components/test_cases/TestCasesStackRepresentation.svelte
+++ b/src/lib/components/test_cases/TestCasesStackRepresentation.svelte
@@ -1,18 +1,42 @@
-<script>
+<script lang="ts">
   import PictoBigEnfant from "$lib/components/pictos/PictoBigEnfant.svelte"
   import PictoBigParent from "$lib/components/pictos/PictoBigParent.svelte"
+  import type { DisplayMode } from "$lib/displays"
+  interface Props {
+    displayMode: DisplayMode
+  }
+
+  let { displayMode }: Props = $props()
+  let isTestCaseSelectModalOpen = $state(false)
 </script>
 
-<div class="flex flex-col items-center">
-  <div class="flex h-[7px] w-[80%] rounded-t border bg-gray-100"></div>
-  <div
-    class="-mt-[1px] flex h-[8px] w-[90%] rounded-t border bg-gray-100"
-  ></div>
-  <div
-    class="-mt-[1px] flex rounded border"
-    style="background: linear-gradient(to bottom, #f5f5f5 50%, white 50%);"
-  >
-    <PictoBigParent />
-    <PictoBigEnfant />
+<button
+  class="lx-card flex items-start justify-between gap-5 px-7 py-5"
+  onclick={() => (isTestCaseSelectModalOpen = true)}
+>
+  <div class="flex flex-col">
+    <span class="text-start text-lg font-bold 2xl:text-xl">
+      {#if displayMode.parametersVariableName === undefined}
+        Choisir un cas type
+      {:else}
+        Bibliothèque des cas types
+      {/if}
+    </span>
+    <span class="max-w-48 text-start text-sm">
+      Sélectionner un ménage parmi tous ceux disponibles
+    </span>
+  </div>
+  <div class="flex flex-col items-center">
+    <div class="flex h-[7px] w-[80%] rounded-t border bg-gray-100"></div>
+    <div
+      class="-mt-[1px] flex h-[8px] w-[90%] rounded-t border bg-gray-100"
+    ></div>
+    <div
+      class="-mt-[1px] flex rounded border"
+      style="background: linear-gradient(to bottom, #f5f5f5 50%, white 50%);"
+    >
+      <PictoBigParent />
+      <PictoBigEnfant />
+    </div>
   </div>
-</div>
+</button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c63b75a285ca99a79add9b7029d0d39d9bd129f..38c1e9224494a8e8beb4472cb160ad72438d175a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1804,26 +1804,8 @@
                           </a>
                         {/if}
                       {/if}
-                      <button
-                        class="lx-card flex items-start justify-between gap-5 px-7 py-5"
-                        onclick={() => (isTestCaseSelectModalOpen = true)}
-                      >
-                        <div class="flex flex-col">
-                          <span
-                            class="text-start text-lg font-bold 2xl:text-xl"
-                          >
-                            {#if displayMode.parametersVariableName === undefined}
-                              Choisir un cas type
-                            {:else}
-                              Bibliothèque des cas types
-                            {/if}
-                          </span>
-                          <span class="max-w-48 text-start text-sm">
-                            Sélectionner un ménage parmi tous ceux disponibles
-                          </span>
-                        </div>
-                        <TestCasesStackRepresentation />
-                      </button>
+                      <TestCasesStackRepresentation {displayMode} />
+                      <!-- bind:isOpen={isTestCaseSelectModalOpen} -->
                     </div>
                   {/if}
                 </div>