diff --git a/.talismanrc b/.talismanrc
index 666ce2975..50b1fcbf6 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -250,7 +250,7 @@ fileignoreconfig:
 - filename: packages/shared/src/components/Chat.vue
   checksum: f2dbbf72bf098c7abd2c3aee230d220f5a5a106952883c0e116eb49f4f9d4db7
 - filename: packages/shared/src/components/DsfrMultiSelect.vue
-  checksum: e635a591f2e2247088bab3a7d25548f251da65330fecaed9ce886fd3dd24fb3e
+  checksum: 90a7d72295ca0fb55d312f9608cbbe5475183936d21286952357b3961d1bd6fb
 - filename: packages/shared/src/components/DsfrTabsV2.vue
   checksum: 960c18a7ad76a91c74e5535240ae6ac4f87bb8aff10155096cd35afe5609cff8
 - filename: packages/shared/src/components/PasswordInput.vue
diff --git a/packages/frontend-bo/src/components/demandes-sejour/liste.vue b/packages/frontend-bo/src/components/demandes-sejour/liste.vue
index 807c5a101..5ce5696d4 100644
--- a/packages/frontend-bo/src/components/demandes-sejour/liste.vue
+++ b/packages/frontend-bo/src/components/demandes-sejour/liste.vue
@@ -96,26 +96,14 @@
               v-if="props.display === displayType.Organisme"
               class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
             >
-              <div class="fr-input-group">
-                <Multiselect
-                  :model-value="searchState.statuts"
-                  :hide-selected="true"
-                  :searchable="true"
-                  :close-on-select="false"
-                  mode="tags"
-                  name="statut"
-                  :options="status"
-                  @update:model-value="onStatutSelect"
-                >
-                  <template #option="{ option, isPointed }">
-                    <MultiSelectOption
-                      :label="`${option.label}`"
-                      :is-pointed="isPointed(option)"
-                    />
-                  </template>
-                  <template #no-result> Pas de résultat</template>
-                </Multiselect>
-              </div>
+              <dsfr-multi-select
+                v-model="searchState.statuts"
+                label="Statut"
+                search
+                select-all
+                id-key="value"
+                :options="status"
+              />
             </div>
             <div
               v-if="!props.organisme && props.display === displayType.Organisme"
@@ -181,7 +169,7 @@
 <script setup>
 import {
   CardsNumber,
-  MultiSelectOption,
+  DsfrMultiSelect,
   TableWithBackendPagination,
   ValidationModal,
   MessageHover,
@@ -190,7 +178,6 @@ import {
 import dayjs from "dayjs";
 import DemandeStatusBadge from "~/components/demandes-sejour/DemandeStatusBadge.vue";
 import Declaration from "~/components/demandes-sejour/Declaration.vue";
-import Multiselect from "@vueform/multiselect";
 import "@vueform/multiselect/themes/default.css";
 import { defineProps } from "vue";
 
@@ -250,7 +237,7 @@ const searchState = reactive({
     ? route.query.statuts
         .split(",")
         .filter((statut) => Object.values(status.value).includes(statut))
-    : null,
+    : [],
   action: parseBoolean(route.query.action),
   message: props.display === displayType.Messagerie,
 });
@@ -349,14 +336,6 @@ watch(
   { immediate: true },
 );
 
-const onStatutSelect = (value) => {
-  if (value.length) {
-    searchState.statuts = value;
-  } else {
-    searchState.statuts = null;
-  }
-};
-
 const headersOrganisme = [
   {
     column: "idFonctionnelle",
diff --git a/packages/frontend-usagers/src/components/demande-sejour/liste.vue b/packages/frontend-usagers/src/components/demande-sejour/liste.vue
index 2aba69a0d..dc2356279 100644
--- a/packages/frontend-usagers/src/components/demande-sejour/liste.vue
+++ b/packages/frontend-usagers/src/components/demande-sejour/liste.vue
@@ -22,150 +22,77 @@ defaultSort<!-- eslint-disable vue/multi-word-component-names -->
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label">ID</label>
-                  <Multiselect
-                    :model-value="search.declarationId"
-                    name="id"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="idOptions"
-                    @update:model-value="onUpdateId"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="option.label.toString()"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.declarationId"
+                  label="ID"
+                  search
+                  select-all
+                  :options="idOptions"
+                  @update:model-value="onUpdateId"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> N° enregistrement </label>
-                  <Multiselect
-                    :model-value="search.idFonctionnelle"
-                    name="idFonctionnelle"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="idFonctionnellesOptions"
-                    @update:model-value="onUpdateIdFonctionnelle"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.idFonctionnelle"
+                  label="N° enregistrement"
+                  search
+                  select-all
+                  :options="idFonctionnellesOptions"
+                  @update:model-value="onUpdateIdFonctionnelle"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label">SIRET déclarant</label>
-                  <Multiselect
-                    :model-value="search.siret"
-                    name="siret"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="siretOptions"
-                    @update:model-value="onUpdateSiret"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.siret"
+                  label="SIRET déclarant"
+                  search
+                  select-all
+                  :options="siretOptions"
+                  @update:model-value="onUpdateSiret"
+                />
               </div>
 
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Département d'instruction </label>
-                  <Multiselect
-                    :model-value="search.departementSuivi"
-                    :searchable="true"
-                    :close-on-select="false"
-                    value-prop="value"
-                    label="label"
-                    mode="tags"
-                    :options="departementOptions"
-                    @update:model-value="onUpdateDepartement"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="option.label"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.departementSuivi"
+                  labe="Département d'instruction"
+                  search
+                  select-all
+                  id-key="value"
+                  :options="departementOptions"
+                  @update:model-value="onUpdateDepartement"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Statut</label>
-                  <Multiselect
-                    :model-value="search.statut"
-                    :hide-selected="true"
-                    :searchable="true"
-                    :close-on-select="false"
-                    mode="tags"
-                    name="statut"
-                    :options="statutOptions"
-                    @update:model-value="onUpdateStatut"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.statut"
+                  label="Statut"
+                  search
+                  select-all
+                  id-key="value"
+                  :options="statutOptions"
+                  @update:model-value="onUpdateStatut"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Saison</label>
-                  <Multiselect
-                    :model-value="search.periode"
-                    :hide-selected="true"
-                    :searchable="false"
-                    :close-on-select="false"
-                    mode="tags"
-                    name="saison"
-                    :options="saisonOptions"
-                    @update:model-value="onUpdateSaison"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.periode"
+                  label="Saison"
+                  search
+                  select-all
+                  :options="saisonOptions"
+                  @update:model-value="onUpdateSaison"
+                />
               </div>
             </div>
           </form>
@@ -218,12 +145,11 @@ defaultSort<!-- eslint-disable vue/multi-word-component-names -->
 import {
   MessageEtat,
   MessageHover,
-  MultiSelectOption,
   TableFull,
   ValidationModal,
+  DsfrMultiSelect,
 } from "@vao/shared";
 import dayjs from "dayjs";
-import Multiselect from "@vueform/multiselect";
 import "@vueform/multiselect/themes/default.css";
 import { useDepartementStore } from "~/stores/referentiels";
 import { useDemandeSejourStore } from "~/stores/demande-sejour";
@@ -305,24 +231,24 @@ const search = reactive({
   declarationId:
     route.query.declarationId
       ?.split(",")
-      ?.flatMap((id) => (isNaN(id) ? [] : [parseInt(id, 10)])) ?? null,
-  idFonctionnelle: route.query.idFonctionnelle?.split(",") ?? null,
-  siret: route.query.siret?.split(",") ?? null,
+      ?.flatMap((id) => (isNaN(id) ? [] : [parseInt(id, 10)])) ?? [],
+  idFonctionnelle: route.query.idFonctionnelle?.split(",") ?? [],
+  siret: route.query.siret?.split(",") ?? [],
   statut: route.query.statut
     ? route.query.statut
         .split(",")
         .filter((statut) =>
           Object.values(DeclarationSejour.statuts).includes(statut),
         )
-    : null,
+    : [],
   departementSuivi: route.query.departementSuivi
     ? route.query.departementSuivi.split(",")
-    : null,
+    : [],
   periode: route.query.periode
     ? route.query.periode
         .split(",")
         .filter((periode) => saisons.includes(periode))
-    : null,
+    : [],
 });
 
 const demandeSejourStore = useDemandeSejourStore();
@@ -760,7 +686,7 @@ async function copyDS(dsId) {
     log.d(`demande de séjour ${response.declarationId} dupliquée`);
   } catch (error) {
     log.w("Copie de la declaration de sejour : ", { error });
-    return toaster.error({
+    toaster.error({
       titleTag: "h2",
       description: `Une erreur est survenue lors de la copie de la déclaration de séjour`,
     });
@@ -784,12 +710,13 @@ async function deleteDS(dsId) {
       });
     } else {
       log.w("Erreur durant la suppression de la declaration de sejour");
-      return toaster.error({
+      toaster.error({
         titleTag: "h2",
         description: `Une erreur est survenue lors de la suppression de la déclaration de séjour`,
       });
     }
   } catch (error) {
+    log.w("Erreur durant la suppression de la declaration de sejour : ");
     toaster.error({
       titleTag: "h2",
       description: `Une erreur est survenue lors de la suppression de la déclaration de séjour`,
@@ -815,7 +742,7 @@ async function cancelDS(dsId) {
       });
     } else {
       log.w("Erreur durant l'annulation de la declaration de sejour");
-      return toaster.error({
+      toaster.error({
         titleTag: "h2",
         description: `Une erreur est survenue lors de l'annulation' de la déclaration de séjour`,
       });
diff --git a/packages/shared/src/components/DsfrMultiSelect.vue b/packages/shared/src/components/DsfrMultiSelect.vue
index 04fdd9405..def111d7b 100644
--- a/packages/shared/src/components/DsfrMultiSelect.vue
+++ b/packages/shared/src/components/DsfrMultiSelect.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup generic="T extends Object">
 import { useId, ref, computed, nextTick, onUnmounted } from "vue";
+import type { VNode } from "vue";
 import { usePopper } from "../composables/usePopper.ts";
+import CollapseTransition from "../transitions/CollapseTransition.vue";
 
 const isObjectWithIdKey = (
   option: unknown,
@@ -72,6 +74,7 @@ const props = withDefaults(
       [K in keyof T as T[K] extends string | number ? K : never]: T[K];
     };
     filteringKeys?: (keyof T)[];
+    maxOverflowHeight?: CSSStyleDeclaration["maxHeight"];
   }>(),
   {
     label: "",
@@ -90,6 +93,7 @@ const props = withDefaults(
       [K in keyof T as T[K] extends string | number ? K : never]: T[K];
     },
     filteringKeys: () => ["label"] as (keyof T)[],
+    maxOverflowHeight: "400px",
   },
 );
 
@@ -102,12 +106,13 @@ const selectAllElement = ref<null | HTMLElement>(null);
 const model = defineModel<(string | number)[]>({ required: true });
 
 type SlotProps<T> = {
-  label: () => any;
-  "required-tip": () => any;
-  description: () => any;
-  "button-label": () => any;
-  legend: () => any;
-  "checkbox-label": (props: { option: T | string | number }) => any;
+  label: () => VNode;
+  "required-tip": () => VNode;
+  description: () => VNode;
+  "button-label": () => VNode;
+  legend: () => VNode;
+  "checkbox-label": (props: { option: T | string | number }) => VNode;
+  "no-results": () => VNode;
 };
 
 defineSlots<SlotProps<T>>();
@@ -126,21 +131,44 @@ const handleClickOutside = (event: MouseEvent) => {
     isVisible.value = false;
     activeTracking.value = false;
     document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDownEscape);
   }
 };
 
-const handleClick = async (event: MouseEvent) => {
+const handleKeyDownEscape = (event: KeyboardEvent) => {
+  if (event.key === "Escape") {
+    document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDownEscape);
+    isVisible.value = false;
+    activeTracking.value = false;
+    if (host.value) {
+      host.value.focus();
+    }
+  }
+};
+
+const handleClick = async () => {
   activeTracking.value = !isVisible.value;
   isVisible.value = !isVisible.value;
   if (isVisible.value) {
-    event.stopPropagation();
     await nextTick();
     document.addEventListener("click", handleClickOutside);
-    if (popover.value && searchElement.value) {
-      searchElement.value.focus();
+    document.addEventListener("keydown", handleKeyDownEscape);
+    if (popover.value) {
+      if (selectAllElement.value) {
+        selectAllElement.value.focus();
+      } else if (searchElement.value) {
+        searchElement.value.focus();
+      } else {
+        const [firstCheckbox] = getAllCheckbox();
+        if (firstCheckbox) {
+          firstCheckbox.focus();
+        }
+      }
     }
   } else {
     document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDownEscape);
   }
 };
 
@@ -238,6 +266,7 @@ const handleFocusNextElementUsingTab = (event: KeyboardEvent) => {
     isVisible.value = false;
     activeTracking.value = false;
     document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDownEscape);
   }
 };
 
@@ -258,6 +287,7 @@ const focusPreviousElement = () => {
     isVisible.value = false;
     activeTracking.value = false;
     document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDownEscape);
     host.value.focus();
     const focusableElements = getFocusableElements();
     const currentElement = document.activeElement as HTMLElement;
@@ -273,6 +303,15 @@ const focusPreviousElement = () => {
 
 onUnmounted(() => {
   document.removeEventListener("click", handleClickOutside);
+  document.removeEventListener("keydown", handleKeyDownEscape);
+});
+
+const defaultButtonLabel = computed(() => {
+  const nbElements = model.value?.length;
+  if (nbElements === 0) {
+    return "Sélectionner une option";
+  }
+  return `${nbElements} option${nbElements > 1 ? "s" : ""} sélectionnée${nbElements > 1 ? "s" : ""}`;
 });
 </script>
 
@@ -290,18 +329,22 @@ onUnmounted(() => {
     <button
       :id="id"
       ref="host"
+      type="button"
       class="fr-select fr-multi-select"
+      :aria-expanded="isVisible"
+      :aria-controls="`${id}-popover`"
       :class="{ 'fr-multi-select--is-open': isVisible }"
       @click="handleClick"
     >
       <slot name="button-label">
-        {{ props.buttonLabel }}
+        {{ props.buttonLabel || defaultButtonLabel }}
       </slot>
     </button>
     <Teleport to="body">
-      <transition name="fade">
+      <CollapseTransition>
         <div
           v-if="isVisible"
+          :id="`${id}-popover`"
           ref="popover"
           :style="{
             '--left-position': `${popoverPosition.x}px`,
@@ -310,15 +353,22 @@ onUnmounted(() => {
           }"
           class="fr-multi-select__popover"
         >
-          <ul v-if="props.selectAll" class="fr-btns-group">
+          <p :id="`${id}-text-description`" class="fr-sr-only">
+            Utilisez la tabulation (ou les touches flèches) pour naviguer dans
+            la liste des suggestions
+          </p>
+          <ul v-if="selectAll" class="fr-btns-group">
             <li>
               <button
                 ref="selectAllElement"
+                type="button"
+                :disabled="filterdOptions.length === 0"
                 class="fr-btn fr-btn--sm fr-btn--secondary"
                 @click="handleClickSelectAllClick"
                 @keydown.shift.tab="handleFocusPreviousElement"
               >
                 <span
+                  class="fr-multi-select__search__icon"
                   :class="
                     isAllSelected
                       ? 'fr-icon-close-circle-line'
@@ -329,30 +379,29 @@ onUnmounted(() => {
               </button>
             </li>
           </ul>
-          <div class="fr-input-group">
+          <div v-if="props.search" class="fr-input-group">
             <div class="fr-input-wrap fr-icon-search-line">
               <input
                 ref="searchElement"
                 v-model="searchInput"
                 class="fr-input"
                 placeholder="Rechercher"
-                :aria-describedby="`${id}-text-input-icon-messages`"
+                :aria-describedby="`${id}-text-description`"
                 type="text"
+                :aria-controls="`${id}-checkboxes`"
+                aria-live="polite"
                 @keydown.down="handleFocusFirstCheckbox"
                 @keydown.right="handleFocusFirstCheckbox"
                 @keydown.tab="handleFocusPreviousElement"
               />
             </div>
-            <div
-              :id="`${id}-text-input-icon-messages`"
-              class="fr-messages-group"
-              aria-live="assertive"
-            ></div>
+            <div class="fr-messages-group" aria-live="assertive"></div>
           </div>
           <fieldset
             :id="`${id}-checkboxes`"
-            class="fr-fieldset"
-            aria-labelledby="checkboxes-legend checkboxes-messages"
+            class="fr-fieldset fr-multi-select__popover__fieldset"
+            aria-live="polite"
+            :style="{ '--maxOverflowHeight': `${props.maxOverflowHeight}` }"
           >
             <legend
               v-if="props.legend || $slots.legend"
@@ -386,13 +435,7 @@ onUnmounted(() => {
                   :for="generateId(option, id, props.idKey) + '-checkbox'"
                 >
                   <slot name="checkbox-label" :option="option">
-                    {{
-                      typeof option === "object" &&
-                      props.labelKey &&
-                      props.labelKey in option
-                        ? `${option[props.labelKey]}`
-                        : `${option}`
-                    }}
+                    {{ getValueOrId(option, props.labelKey) }}
                   </slot>
                 </label>
                 <div
@@ -403,8 +446,11 @@ onUnmounted(() => {
               </div>
             </div>
           </fieldset>
+          <div v-if="filterdOptions.length === 0">
+            <slot name="no-results">Pas de résultat</slot>
+          </div>
         </div>
-      </transition>
+      </CollapseTransition>
     </Teleport>
   </div>
 </template>
@@ -445,6 +491,10 @@ onUnmounted(() => {
   transform: rotate(-180deg);
 }
 
+.fr-multi-select__search__icon {
+  margin-right: 1rem;
+}
+
 .fr-multi-select__popover {
   z-index: 20000;
   position: absolute;
@@ -454,50 +504,12 @@ onUnmounted(() => {
   top: var(--top-position);
   padding: 1rem;
   margin-top: 4px;
-  background-image: conic-gradient(
-      from -33.69deg at 50% 100%,
-      transparent 0deg,
-      var(--background-overlap-grey) 0deg,
-      var(--background-overlap-grey) 67.38deg,
-      transparent 67.38deg
-    ),
-    conic-gradient(
-      from -33.69deg at 50% 100%,
-      transparent 0deg,
-      var(--border-default-grey) 0deg,
-      var(--border-default-grey) 67.38deg,
-      transparent 67.38deg
-    ),
-    linear-gradient(
-      90deg,
-      var(--border-default-grey),
-      var(--border-default-grey)
-    ),
-    linear-gradient(
-      90deg,
-      var(--background-overlap-grey),
-      var(--background-overlap-grey)
-    );
-  background-position:
-    50% calc(100% - 0.5rem),
-    50% calc(100% - 0.375rem),
-    50% calc(100% - 0.75rem),
-    50% calc(100% - 0.75rem);
-  background-repeat: no-repeat;
-  background-size:
-    0.5rem 0.375rem,
-    0.5rem 0.375rem,
-    100% 1px,
-    100% calc(100% - 0.75rem);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
+  background-color: var(--background-overlap-grey);
+  filter: drop-shadow(var(--overlap-shadow));
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+.fr-multi-select__popover__fieldset {
+  max-height: var(--maxOverflowHeight);
+  overflow: auto;
 }
 </style>
diff --git a/packages/shared/src/components/index.js b/packages/shared/src/components/index.js
index 91ac55dbe..8bd536dc7 100644
--- a/packages/shared/src/components/index.js
+++ b/packages/shared/src/components/index.js
@@ -1,6 +1,7 @@
 import FileUpload from "./FileUpload.vue";
 import Chat from "./Chat.vue";
 import DsfrDataTableV2 from "./Table/DsfrDataTableV2.vue";
+import DsfrMultiSelect from "./DsfrMultiSelect.vue";
 import TableWithBackendPagination from "./Table/TableWithBackendPagination.vue";
 import ValidationModal from "./ValidationModal.vue";
 import EigStatusBadge from "./eig/EigStatusBadge.vue";
@@ -18,6 +19,7 @@ export {
   FileUpload,
   Chat,
   DsfrDataTableV2,
+  DsfrMultiSelect,
   TableWithBackendPagination,
   ValidationModal,
   EigStatusBadge,
diff --git a/packages/shared/src/composables/usePopper.ts b/packages/shared/src/composables/usePopper.ts
index 675ed9a2e..d47419a0d 100644
--- a/packages/shared/src/composables/usePopper.ts
+++ b/packages/shared/src/composables/usePopper.ts
@@ -1,8 +1,12 @@
-import { onUnmounted, ref, watch, computed, Ref } from "vue";
+import { onUnmounted, ref, watch, computed } from "vue";
+import type { Ref } from "vue";
 
-function debounce(func: Function, wait: number) {
+function debounce<T extends (...args: Parameters<T>) => void>(
+  func: T,
+  wait: number,
+) {
   let timeout: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
+  return (...args: Parameters<T>): void => {
     clearTimeout(timeout);
     timeout = setTimeout(() => func(...args), wait);
   };
@@ -10,7 +14,7 @@ function debounce(func: Function, wait: number) {
 
 function observeElementSize(
   element: HTMLElement,
-  callback: (elememt: HTMLElement, entry: ResizeObserverEntry) => void,
+  callback: (element: HTMLElement, entry: ResizeObserverEntry) => void,
 ) {
   const resizeObserver = new ResizeObserver((entries) => {
     for (const entry of entries) {
@@ -27,11 +31,11 @@ function observeElementSize(
 }
 
 function trackElementMovement(
-  elememt: HTMLElement,
-  callback: (elememt: HTMLElement) => void,
+  element: HTMLElement,
+  callback: (element: HTMLElement) => void,
 ) {
   const updatePosition = () => {
-    callback(elememt);
+    callback(element);
   };
 
   window.addEventListener("resize", updatePosition);
@@ -48,7 +52,7 @@ function trackElementMovement(
 function observeDomChanges(
   trackedElement: HTMLElement,
   element: HTMLElement,
-  callback: (elememt: HTMLElement) => void,
+  callback: (element: HTMLElement) => void,
 ) {
   const mutationObserver = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
@@ -89,8 +93,8 @@ export function usePopper(host: Ref<null | HTMLElement>) {
     }
   };
 
-  const setSize = (elememt: HTMLElement) => {
-    const rect = elememt.getBoundingClientRect();
+  const setSize = (element: HTMLElement) => {
+    const rect = element.getBoundingClientRect();
     if (
       rect.width !== hostSize.value.width ||
       rect.height !== hostSize.value.height
diff --git a/packages/shared/src/index.js b/packages/shared/src/index.js
index d77802db8..e777cc041 100644
--- a/packages/shared/src/index.js
+++ b/packages/shared/src/index.js
@@ -1,4 +1,5 @@
 export * from "./components/";
+export * from "./transitions";
 export * as eigModel from "./models";
 export * as eigSchema from "./schema";
 export * from "./utils";
diff --git a/packages/shared/src/transitions/CollapseTransition.vue b/packages/shared/src/transitions/CollapseTransition.vue
new file mode 100644
index 000000000..4b672e6f4
--- /dev/null
+++ b/packages/shared/src/transitions/CollapseTransition.vue
@@ -0,0 +1,65 @@
+<template>
+  <transition
+    ref="transition"
+    name="collapse"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @before-leave="beforeLeave"
+    @leave="leave"
+    @after-leave="afterLeave"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import type { VNode } from "vue";
+
+const transition = ref<HTMLElement | null>(null);
+
+const beforeEnter = (el: HTMLElement) => {
+  el.style.height = "0";
+  el.style.overflow = "hidden";
+};
+
+const enter = (el: HTMLElement) => {
+  el.style.height = el.scrollHeight + "px";
+  // scroll spawn with 100px set it to 0;
+  nextTick(() => {
+    el.scrollTop = 0;
+  });
+};
+
+const afterEnter = (el: HTMLElement) => {
+  el.style.overflow = "";
+  el.style.height = "auto";
+};
+
+const beforeLeave = (el: HTMLElement) => {
+  el.style.height = el.scrollHeight + "px";
+  el.style.overflow = "hidden";
+};
+
+const leave = (el: HTMLElement) => {
+  el.style.height = "0";
+};
+
+const afterLeave = (el: HTMLElement) => {
+  el.style.height = "";
+};
+
+defineSlots<{
+  default: () => VNode;
+}>();
+</script>
+
+<style scoped>
+/* Les transitions pour le collapse */
+.collapse-enter-active,
+.collapse-leave-active {
+  overflow: hidden;
+  transition: 0.5s;
+}
+</style>
diff --git a/packages/shared/src/transitions/index.js b/packages/shared/src/transitions/index.js
new file mode 100644
index 000000000..57b9972ae
--- /dev/null
+++ b/packages/shared/src/transitions/index.js
@@ -0,0 +1,3 @@
+import CollapseTransition from "./CollapseTransition.vue";
+
+export { CollapseTransition };