diff --git a/packages/frontend-bo/src/layouts/default.vue b/packages/frontend-bo/src/layouts/default.vue
index 57013cdce..aa0055908 100644
--- a/packages/frontend-bo/src/layouts/default.vue
+++ b/packages/frontend-bo/src/layouts/default.vue
@@ -68,12 +68,23 @@ const consentCookie = useCookie("VAO_BO_consent", {
 function acceptAll() {
   consentCookie.value = true;
 }
+
+const options = [1, 2, 3, 4, 5, 6, 7, 8];
+const values = ref([]);
 </script>
 
 <template>
   <div>
     <DsfrToaster />
-    <dsfr-multi-select />
+    <div style="padding-left: 5rem; padding-right: 5rem">
+      {{ values }}
+      <dsfr-multi-select
+        v-model="values"
+        :options="options"
+        search
+        select-all
+      />
+    </div>
     <div class="fr-container">
       <div class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12">
diff --git a/packages/shared/src/components/DsfrMultiSelect.vue b/packages/shared/src/components/DsfrMultiSelect.vue
index 1fb17c010..bafba00a2 100644
--- a/packages/shared/src/components/DsfrMultiSelect.vue
+++ b/packages/shared/src/components/DsfrMultiSelect.vue
@@ -1,10 +1,10 @@
-<script lang="ts" setup generic="T">
-import { useId, ref, onMounted } from "vue";
+<script lang="ts" setup generic="T extends Object">
+import { useId, ref, computed } from "vue";
 import { usePopper } from "../composables/usePopper";
 
 const props = withDefaults(
   defineProps<{
-    modelValue: T[] | string[] | number[];
+    modelValue: string[] | number[];
     options: T[] | string[] | number[];
     label?: string;
     name?: string;
@@ -25,7 +25,7 @@ const props = withDefaults(
     name: "",
     description: "",
     legend: "",
-    selectId: useId(),
+    selectId: "",
     buttonLabel: "",
     selectAll: false,
     search: false,
@@ -35,10 +35,14 @@ const props = withDefaults(
   },
 );
 
+const id = props.selectId || useId();
+
 const host = ref<HTMLButtonElement | null>(null);
 const popover = ref<null | HTMLElement>(null);
+const model = defineModel();
 
-const { hostSize, hostPosition, popoverPosition } = usePopper(host, popover);
+const { hostSize, hostPosition, popoverPosition, activeTracking } =
+  usePopper(host);
 
 defineSlots<{
   label: () => any;
@@ -48,20 +52,35 @@ defineSlots<{
 }>();
 
 const handleClick = (event: MouseEvent) => {
-  const button = event.target as HTMLButtonElement;
-  button.getBoundingClientRect();
+  activeTracking.value = !isVisible.value;
+  isVisible.value = !isVisible.value;
 };
+const isVisible = ref(false);
+const searchInput = ref("");
+
+const filterdOptions = computed(() =>
+  props.options.filter((option) => {
+    if (typeof option === "object" && option !== null) {
+      return props.filteringKeys.some((key) =>
+        `${option[key]}`.includes(searchInput.value),
+      );
+    }
+    return `${option}`.includes(searchInput.value);
+  }),
+);
 </script>
 
 <template>
-  {{ hostPosition }}
-  {{ hostSize }}
   <div class="preview-wrapper fr-py-6v">
+    {{ hostPosition }}
+    {{ hostSize }}
+    <div v-for="(option, index) in filterdOptions" :key="index">
+    <input type="checkbox" :id="index" :value="option" v-model="model" />
+    <label :for="index">{{ option }}</label>
+  </div>
     <div class="fr-select-group">
-      <label class="fr-label" :for="props.selectId">
-        <slot name="label">
-          {{ props.label }}
-        </slot>
+      <label class="fr-label" :for="id">
+        <slot name="label"> {{ props.label }} totoot </slot>
         <slot name="required-tip">
           <span v-if="props.required" class="required">&nbsp;*</span>
         </slot>
@@ -73,7 +92,7 @@ const handleClick = (event: MouseEvent) => {
         </span>
       </label>
       <button
-        :id="props.selectId"
+        :id="id"
         ref="host"
         class="fr-select fr-multi-select"
         @click="handleClick"
@@ -84,14 +103,118 @@ const handleClick = (event: MouseEvent) => {
       </button>
       <Teleport to="body">
         <div
+          v-if="isVisible"
           ref="popover"
           :style="{
-            left: `${popoverPosition.x}px`,
-            top: `${popoverPosition.y}px`,
+            '--left-position': `${popoverPosition.x}px`,
+            '--top-position': `${popoverPosition.y}px`,
+            '--width-host': `${hostSize.width}px`,
           }"
           class="fr-multi-select__popover"
         >
-          cocucoucouc {{ popoverPosition }}
+          <ul v-if="props.selectAll" class="fr-btns-group">
+            <li>
+              <button class="fr-btn fr-btn--sm fr-btn--secondary">
+                <span class="fr-icon-check-line"></span>
+                Tout sélectionner
+              </button>
+            </li>
+          </ul>
+          <div v-if="props.search" class="fr-input-group">
+            <div class="fr-input-wrap fr-icon-search-line">
+              <input
+                class="fr-input"
+                placeholder="Rechercher"
+                :aria-describedby="`${id}-text-input-icon-messages`"
+                type="text"
+              />
+            </div>
+            <div
+              :id="`${id}-text-input-icon-messages`"
+              class="fr-messages-group"
+              aria-live="assertive"
+            ></div>
+          </div>
+          <fieldset
+            :id="`${id}-checkboxes`"
+            class="fr-fieldset"
+            aria-labelledby="checkboxes-legend checkboxes-messages"
+          >
+            <legend
+              :id="`${id}-checkboxes-legend`"
+              class="fr-fieldset__legend--regular fr-fieldset__legend"
+            >
+              Légende pour l’ensemble des éléments
+            </legend>
+            <div
+              v-for="option in filterdOptions"
+              :key="
+                typeof option === 'object' &&
+                props.idKey &&
+                props.idKey in option
+                  ? `${option[props.idKey]}`
+                  : `${option}`
+              "
+              class="fr-fieldset__element"
+            >
+              <div class="fr-checkbox-group fr-checkbox-group--sm">
+                <input
+                  :id="
+                    typeof option === 'object' &&
+                    props.idKey &&
+                    props.idKey in option
+                      ? `${option[props.idKey]}`
+                      : `${option}`
+                  "
+                  v-model="model"
+                  type="checkbox"
+                  :aria-describedby="
+                    typeof option === 'object' &&
+                    props.idKey &&
+                    props.idKey in option
+                      ? `${id}-${option[props.idKey]}-message`
+                      : `${id}-${option}-message`
+                  "
+                  :value="
+                    typeof option === 'object' &&
+                    props.idKey &&
+                    props.idKey in option
+                      ? `${option[props.idKey]}`
+                      : `${option}`
+                  "
+                />
+                <label
+                  class="fr-label"
+                  :for="
+                    typeof option === 'object' &&
+                    props.idKey &&
+                    props.idKey in option
+                      ? `${id}-${option[props.idKey]}-message`
+                      : `${id}-${option}-message`
+                  "
+                >
+                  {{
+                    typeof option === "object" &&
+                    props.labelKey &&
+                    props.labelKey in option
+                      ? `${option[props.labelKey]}`
+                      : `${option}`
+                  }}
+                </label>
+                <div
+                  :id="
+                    typeof option === 'object' &&
+                    props.idKey &&
+                    props.idKey in option
+                      ? `${id}-${option[props.idKey]}-message`
+                      : `${id}-${option}-message`
+                  "
+                  class="fr-messages-group"
+                  aria-live="assertive"
+                />
+              </div>
+            </div>
+          </fieldset>
         </div>
       </Teleport>
     </div>
@@ -131,7 +254,48 @@ const handleClick = (event: MouseEvent) => {
 }
 
 .fr-multi-select__popover {
+  z-index: 20000;
   position: absolute;
   transform-origin: left top;
+  width: var(--width-host);
+  left: var(--left-position);
+  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);
 }
 </style>
diff --git a/packages/shared/src/composables/usePopper.ts b/packages/shared/src/composables/usePopper.ts
index aca51b4dc..215645954 100644
--- a/packages/shared/src/composables/usePopper.ts
+++ b/packages/shared/src/composables/usePopper.ts
@@ -1,13 +1,20 @@
-import { onMounted, onUnmounted, ref } from "vue";
+import { onUnmounted, ref, watch, computed } from "vue";
+
+function debounce(func: Function, wait: number) {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: any[]) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
 
 function observeElementSize(
   element: HTMLElement,
-  callback: (entry: ResizeObserverEntry) => void,
+  callback: (elememt: HTMLElement, entry: ResizeObserverEntry) => void,
 ) {
   const resizeObserver = new ResizeObserver((entries) => {
     for (const entry of entries) {
-      console.log(element.getClientRects());
-      callback(entry);
+      callback(element, entry);
     }
   });
 
@@ -20,86 +27,122 @@ function observeElementSize(
 }
 
 function trackElementMovement(
-  targetElement: HTMLElement,
-  parentElement: HTMLElement,
-  callback: (x: number, y: number) => void,
+  elememt: HTMLElement,
+  callback: (elememt: HTMLElement) => void,
 ) {
   const updatePosition = () => {
-    const targetRect = targetElement.getBoundingClientRect();
-    const parentRect = parentElement.getBoundingClientRect();
-
-    const x = targetRect.left - parentRect.left;
-    const y = targetRect.top - parentRect.top;
-
-    callback(x, y);
+    callback(elememt);
   };
 
   window.addEventListener("resize", updatePosition);
-  parentElement.addEventListener("scroll", updatePosition);
+  window.addEventListener("scroll", updatePosition);
 
   updatePosition();
 
   return () => {
     window.removeEventListener("resize", updatePosition);
-    parentElement.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", updatePosition);
   };
 }
 
-export function usePopper(
-  host: Ref<null | HTMLElement>,
-  popover: Ref<null | HTMLElement>,
+function observeDomChanges(
+  trackedElement: HTMLElement,
+  element: HTMLElement,
+  callback: (elememt: HTMLElement) => void,
 ) {
+  const mutationObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" || mutation.type === "childList") {
+        callback(element);
+      }
+    }
+  });
+
+  mutationObserver.observe(trackedElement, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+
+  return () => {
+    mutationObserver.disconnect();
+  };
+}
+
+export function usePopper(host: Ref<null | HTMLElement>) {
   const hostSize = ref({ width: 0, height: 0 });
-  const hostPosition = ref({ x: 0, y: 0 });
+  const hostPosition = ref({ left: 0, top: 0 });
   const popoverPosition = computed(() => ({
-    x: hostPosition.value.x,
-    y: hostPosition.value.y + hostSize.value.height,
+    x: hostPosition.value.left,
+    y: hostPosition.value.top + hostSize.value.height,
   }));
+  const isElementVisible = ref(false);
+  const activeTracking = ref(false);
 
   const observations: (() => void)[] = [];
   const stopObserving = () => {
-    observations.forEach((observation) => observation());
+    while (observations.length) {
+      const observation = observations.pop();
+      if (observation) {
+        observation();
+      }
+    }
+  };
+
+  const setSize = (elememt: HTMLElement) => {
+    const rect = elememt.getBoundingClientRect();
+    console.log(rect);
+    if (
+      rect.width !== hostSize.value.width ||
+      rect.height !== hostSize.value.height
+    ) {
+      hostSize.value = { width: rect.width, height: rect.height };
+    }
+    if (
+      rect.left + window.scrollX !== hostPosition.value.left ||
+      rect.top + window.scrollY !== hostPosition.value.top
+    ) {
+      hostPosition.value = {
+        left: rect.left + window.scrollX,
+        top: rect.top + window.scrollY,
+      };
+    }
   };
 
-  onMounted(() => {
+  const debouncedSetSize = debounce(setSize, 100);
+
+  watch(
+    () => activeTracking.value || isElementVisible.value,
+    (newValue) => {
+      if (newValue) {
+        track();
+      } else {
+        stopObserving();
+      }
+    },
+  );
+
+  const track = () => {
     if (host.value) {
+      if (window.ResizeObserver) {
+        new window.ResizeObserver(
+          trackElementMovement(host.value, setSize),
+        ).observe(host.value);
+      }
+      observations.push(observeElementSize(host.value, debouncedSetSize));
+      observations.push(trackElementMovement(host.value, debouncedSetSize));
       observations.push(
-        observeElementSize(host.value, (entry: ResizeObserverEntry) => {
-          console.log(entry.contentRect);
-          const { width, height, x, y } = entry.contentRect;
-          const computedStyle = getComputedStyle(entry.target);
-          hostSize.value = {
-            width:
-              width +
-              parseFloat(computedStyle.paddingLeft) +
-              parseFloat(computedStyle.paddingRight),
-            height:
-              height +
-              parseFloat(computedStyle.paddingTop) +
-              parseFloat(computedStyle.paddingBottom),
-          };
-          hostPosition.value = {
-            x:
-              x -
-              parseFloat(computedStyle.paddingLeft),
-            y: y + hostSize.value.height,
-          };
-        }),
+        observeDomChanges(document.body, host.value, debouncedSetSize),
       );
-      if (popover.value) {
-        trackElementMovement(host.value, document.body, (x, y) => {
-          console.log(x, y);
-          hostPosition.value = { x, y };
-        });
-      }
     }
-  });
+  };
 
   onUnmounted(() => {
     stopObserving();
   });
 
   return {
+    activeTracking,
     hostSize,
     hostPosition,
     popoverPosition,