diff --git a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/FicheBeneficiairePage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/FicheBeneficiairePage.tsx
index 7e1a0c5e9..42ef53d72 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/FicheBeneficiairePage.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/FicheBeneficiairePage.tsx
@@ -12,16 +12,12 @@ import {
   Onglet,
 } from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/rendez-vous-passes/FicheBeneficiaireProps'
 import DetailsJeune from 'components/jeune/DetailsJeune'
-import Modal from 'components/Modal'
 import PageActionsPortal from 'components/PageActionsPortal'
 import Button, { ButtonStyle } from 'components/ui/Button/Button'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { IllustrationName } from 'components/ui/IllustrationComponent'
 import FailureAlert from 'components/ui/Notifications/FailureAlert'
 import InformationMessage from 'components/ui/Notifications/InformationMessage'
 import { IndicateursSemaine } from 'interfaces/beneficiaire'
-import { SuppressionBeneficiaireFormData } from 'interfaces/json/beneficiaire'
-import { MotifSuppressionBeneficiaire } from 'interfaces/referentiel'
 import { AlerteParam } from 'referentiel/alerteParam'
 import { getIndicateursJeuneAlleges } from 'services/beneficiaires.service'
 import { useAlerte } from 'utils/alerteContext'
@@ -37,11 +33,8 @@ const FicheBeneficiaireMilo = dynamic(
 const FicheBeneficiairePasMilo = dynamic(
   () => import('components/jeune/FicheBeneficiairePasMilo')
 )
-const DeleteBeneficiaireActifModal = dynamic(
-  () => import('components/jeune/DeleteBeneficiaireActifModal')
-)
-const DeleteJeuneInactifModal = dynamic(
-  () => import('components/jeune/DeleteJeuneInactifModal')
+const DeleteBeneficiaireModal = dynamic(
+  () => import('components/jeune/DeleteBeneficiaireModal')
 )
 
 function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
@@ -53,30 +46,18 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
     ? '/etablissement/beneficiaires'
     : '/mes-jeunes'
 
-  const [portefeuille, setPortefeuille] = usePortefeuille()
+  const [portefeuille] = usePortefeuille()
   const chats = useChats()
   const [currentConversation, setCurrentConversation] = useCurrentConversation()
   const [conseiller] = useConseiller()
   const [alerte] = useAlerte()
 
-  const [motifsSuppression, setMotifsSuppression] = useState<
-    MotifSuppressionBeneficiaire[]
-  >([])
-
   const [indicateursSemaine, setIndicateursSemaine] = useState<
     IndicateursSemaine | undefined
   >()
 
-  const [
-    showModaleDeleteBeneficiaireActif,
-    setShowModaleDeleteBeneficiaireActif,
-  ] = useState<boolean>(false)
-  const [showModaleDeleteJeuneInactif, setShowModaleDeleteJeuneInactif] =
+  const [showModaleDeleteBeneficiaire, setShowModaleDeleteBeneficiaire] =
     useState<boolean>(false)
-  const [
-    showModaleSuccesDeleteBeneficiaire,
-    setShowModaleSuccesDeleteBeneficiaire,
-  ] = useState<boolean>(false)
 
   const [
     showSuppressionCompteBeneficiaireError,
@@ -117,72 +98,6 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
     router.replace(`${pathPrefix}/${beneficiaire.id}?onglet=${tab}`)
   }
 
-  async function openDeleteJeuneModal(e: React.MouseEvent<HTMLElement>) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    if (beneficiaire.isActivated) {
-      setShowModaleDeleteBeneficiaireActif(true)
-
-      if (motifsSuppression.length === 0) {
-        const { getMotifsSuppression } = await import(
-          'services/beneficiaires.service'
-        )
-        const result = await getMotifsSuppression()
-        setMotifsSuppression(result)
-      }
-    }
-
-    if (!beneficiaire.isActivated) {
-      setShowModaleDeleteJeuneInactif(true)
-    }
-  }
-
-  async function archiverJeuneActif(
-    payload: SuppressionBeneficiaireFormData
-  ): Promise<void> {
-    try {
-      const { archiverJeune } = await import('services/beneficiaires.service')
-      await archiverJeune(beneficiaire.id, payload)
-
-      removeBeneficiaireFromPortefeuille(beneficiaire.id)
-      setShowModaleSuccesDeleteBeneficiaire(true)
-    } catch {
-      setShowSuppressionCompteBeneficiaireError(true)
-      setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
-    } finally {
-      setShowModaleDeleteBeneficiaireActif(false)
-    }
-  }
-
-  async function supprimerJeuneInactif(): Promise<void> {
-    try {
-      const { supprimerJeuneInactif: _supprimerJeuneInactif } = await import(
-        'services/beneficiaires.service'
-      )
-      await _supprimerJeuneInactif(beneficiaire.id)
-
-      removeBeneficiaireFromPortefeuille(beneficiaire.id)
-      setShowModaleSuccesDeleteBeneficiaire(true)
-    } catch {
-      setShowSuppressionCompteBeneficiaireError(true)
-      setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
-    } finally {
-      setShowModaleDeleteJeuneInactif(false)
-    }
-  }
-
-  function removeBeneficiaireFromPortefeuille(idBeneficiaire: string): void {
-    const updatedPortefeuille = [...portefeuille]
-    const index = updatedPortefeuille.findIndex(
-      ({ id }) => id === idBeneficiaire
-    )
-    updatedPortefeuille.splice(index, 1)
-    setPortefeuille(updatedPortefeuille)
-    if (currentConversation?.conversation.id === idBeneficiaire)
-      setCurrentConversation(undefined)
-  }
-
   useMatomo(trackingLabel, portefeuille.length > 0)
 
   useEffect(() => {
@@ -209,7 +124,7 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
       {!lectureSeule && (
         <PageActionsPortal>
           <Button
-            onClick={openDeleteJeuneModal}
+            onClick={() => setShowModaleDeleteBeneficiaire(true)}
             style={ButtonStyle.SECONDARY}
             type='button'
           >
@@ -353,39 +268,16 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
         <FicheBeneficiairePasMilo onSwitchTab={switchTab} {...props} />
       )}
 
-      {showModaleDeleteBeneficiaireActif && (
-        <DeleteBeneficiaireActifModal
+      {showModaleDeleteBeneficiaire && (
+        <DeleteBeneficiaireModal
           beneficiaire={beneficiaire}
-          onClose={() => setShowModaleDeleteBeneficiaireActif(false)}
-          motifsSuppression={motifsSuppression}
-          soumettreSuppression={archiverJeuneActif}
-        />
-      )}
-
-      {showModaleDeleteJeuneInactif && (
-        <DeleteJeuneInactifModal
-          jeune={beneficiaire}
-          onClose={() => setShowModaleDeleteJeuneInactif(false)}
-          onDelete={supprimerJeuneInactif}
+          onClose={() => setShowModaleDeleteBeneficiaire(false)}
+          onError={() => {
+            setShowSuppressionCompteBeneficiaireError(true)
+            setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
+          }}
         />
       )}
-
-      {showModaleSuccesDeleteBeneficiaire && (
-        <Modal
-          title={`Le compte bénéficiaire : ${beneficiaire.prenom} ${beneficiaire.nom} a bien été supprimé.`}
-          onClose={() => router.push('/mes-jeunes')}
-          titleIllustration={IllustrationName.Check}
-        >
-          <Button
-            type='button'
-            style={ButtonStyle.PRIMARY}
-            className='block m-auto'
-            onClick={() => router.push('/mes-jeunes')}
-          >
-            Revenir à mon portefeuille
-          </Button>
-        </Modal>
-      )}
     </>
   )
 }
diff --git a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx
index 75669d2a2..597f3ff44 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { withTransaction } from '@elastic/apm-rum-react'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 import React, { ReactElement, useState } from 'react'
 
@@ -41,6 +42,7 @@ function CreationBeneficiaireFranceTravailPage(): ReactElement {
       setPortefeuille(
         portefeuille.concat({
           ...beneficiaireCree,
+          creationDate: DateTime.now().toISO(),
           isActivated: false,
           estAArchiver: false,
         })
diff --git a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx
index a5039ab4f..25b5acfe3 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { withTransaction } from '@elastic/apm-rum-react'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 import React, { ForwardedRef, forwardRef, useRef, useState } from 'react'
 
@@ -62,6 +63,7 @@ function CreationBeneficiaireMiloPage() {
       setPortefeuille(
         portefeuille.concat({
           ...beneficiaireCree,
+          creationDate: DateTime.now().toISO(),
           isActivated: false,
           estAArchiver: false,
         })
diff --git a/app/(connected)/(with-sidebar)/PageLayout.tsx b/app/(connected)/(with-sidebar)/PageLayout.tsx
index 6ee21ad8f..5049695c6 100644
--- a/app/(connected)/(with-sidebar)/PageLayout.tsx
+++ b/app/(connected)/(with-sidebar)/PageLayout.tsx
@@ -3,7 +3,6 @@
 import { ReactNode } from 'react'
 
 import layout from 'app/(connected)/(with-sidebar)/PageLayout.module.css'
-import { ID_CONTENU } from 'components/globals'
 import AlerteDisplayer from 'components/layouts/AlerteDisplayer'
 import Footer from 'components/layouts/Footer'
 import Header from 'components/layouts/Header'
@@ -26,8 +25,6 @@ export default function PageLayout({
 
       <main
         role='main'
-        id={ID_CONTENU}
-        tabIndex={-1}
         className={`${layout.content} ${
           fullWidth ? layout.content_fullWidth : layout.content_centered
         }`}
diff --git a/components/ModalContainer.tsx b/components/ModalContainer.tsx
index c60337a1f..8887cbd74 100644
--- a/components/ModalContainer.tsx
+++ b/components/ModalContainer.tsx
@@ -15,7 +15,7 @@ import styles from 'styles/components/Modal.module.css'
 
 export type ModalHandles = {
   focusClose: () => void
-  closeModal: (e: KeyboardEvent | MouseEvent) => void
+  closeModal: (e?: KeyboardEvent | MouseEvent) => void
 }
 export type ModalContainerProps = {
   onClose: () => void
@@ -68,8 +68,8 @@ function ModalContainer(
     }
   }
 
-  function handleClose(e: KeyboardEvent | MouseEvent) {
-    e.preventDefault()
+  function handleClose(e?: KeyboardEvent | MouseEvent) {
+    e?.preventDefault()
     if (previousFocusedElement.current) previousFocusedElement.current.focus()
     onClose()
   }
diff --git a/components/jeune/DeleteBeneficiaireActifModal.tsx b/components/jeune/DeleteBeneficiaireActifModal.tsx
index cf8e163cc..45a01a5ed 100644
--- a/components/jeune/DeleteBeneficiaireActifModal.tsx
+++ b/components/jeune/DeleteBeneficiaireActifModal.tsx
@@ -20,7 +20,10 @@ import Textarea from 'components/ui/Form/Textarea'
 import { IllustrationName } from 'components/ui/IllustrationComponent'
 import InformationMessage from 'components/ui/Notifications/InformationMessage'
 import { ValueWithError } from 'components/ValueWithError'
-import { BaseBeneficiaire, DetailBeneficiaire } from 'interfaces/beneficiaire'
+import {
+  BaseBeneficiaire,
+  BeneficiaireWithActivity,
+} from 'interfaces/beneficiaire'
 import { SuppressionBeneficiaireFormData } from 'interfaces/json/beneficiaire'
 import { MotifSuppressionBeneficiaire } from 'interfaces/referentiel'
 import useMatomo from 'utils/analytics/useMatomo'
@@ -28,7 +31,7 @@ import { dateIsInInterval, toShortDate } from 'utils/date'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 interface DeleteBeneficiaireActifModalProps {
-  beneficiaire: DetailBeneficiaire
+  beneficiaire: BeneficiaireWithActivity
   motifsSuppression: MotifSuppressionBeneficiaire[]
   onClose: () => void
   soumettreSuppression: (
@@ -36,15 +39,19 @@ interface DeleteBeneficiaireActifModalProps {
   ) => Promise<void>
 }
 
-export default function DeleteBeneficiaireActifModal({
-  beneficiaire,
-  motifsSuppression,
-  onClose,
-  soumettreSuppression,
-}: DeleteBeneficiaireActifModalProps) {
+function DeleteBeneficiaireActifModal(
+  {
+    beneficiaire,
+    motifsSuppression,
+    onClose,
+    soumettreSuppression,
+  }: DeleteBeneficiaireActifModalProps,
+  ref: ForwardedRef<ModalHandles>
+) {
   const [portefeuille] = usePortefeuille()
 
   const modalRef = useRef<ModalHandles>(null)
+  useImperativeHandle(ref, () => modalRef.current!)
 
   const [showModalConfirmation, setShowModalConfirmation] =
     useState<boolean>(true)
@@ -90,6 +97,7 @@ export default function DeleteBeneficiaireActifModal({
     </>
   )
 }
+export default forwardRef(DeleteBeneficiaireActifModal)
 
 const ModalConfirmation = forwardRef(
   (
@@ -151,7 +159,7 @@ const ModalSuppressionForm = forwardRef(
       onSuppression,
       onClose,
     }: {
-      beneficiaire: DetailBeneficiaire
+      beneficiaire: BeneficiaireWithActivity
       motifsSuppression: MotifSuppressionBeneficiaire[]
       onSuppression: (payload: SuppressionBeneficiaireFormData) => Promise<void>
       onClose: () => void
diff --git a/components/jeune/DeleteJeuneInactifModal.tsx b/components/jeune/DeleteBeneficiaireInactifModal.tsx
similarity index 74%
rename from components/jeune/DeleteJeuneInactifModal.tsx
rename to components/jeune/DeleteBeneficiaireInactifModal.tsx
index a2087d7e4..0261015a0 100644
--- a/components/jeune/DeleteJeuneInactifModal.tsx
+++ b/components/jeune/DeleteBeneficiaireInactifModal.tsx
@@ -1,4 +1,9 @@
-import React, { useRef } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
 import Modal, { ModalHandles } from 'components/Modal'
 import Button, { ButtonStyle } from 'components/ui/Button/Button'
@@ -8,19 +13,19 @@ import useMatomo from 'utils/analytics/useMatomo'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 interface DeleteJeuneInactifModalProps {
-  jeune: BaseBeneficiaire
+  beneficiaire: BaseBeneficiaire
   onClose: () => void
   onDelete: () => Promise<void>
 }
 
-export default function DeleteJeuneInactifModal({
-  jeune,
-  onClose,
-  onDelete,
-}: DeleteJeuneInactifModalProps) {
+function DeleteBeneficiaireInactifModal(
+  { beneficiaire, onClose, onDelete }: DeleteJeuneInactifModalProps,
+  ref: ForwardedRef<ModalHandles>
+) {
   const [portefeuille] = usePortefeuille()
 
   const modalRef = useRef<ModalHandles>(null)
+  useImperativeHandle(ref, () => modalRef.current!)
 
   useMatomo(
     'Détail Jeune - Pop-in confirmation suppression',
@@ -30,7 +35,7 @@ export default function DeleteJeuneInactifModal({
   return (
     <Modal
       ref={modalRef}
-      title={`Suppression du compte bénéficiaire ${jeune.prenom} ${jeune.nom}`}
+      title={`Suppression du compte bénéficiaire ${beneficiaire.prenom} ${beneficiaire.nom}`}
       onClose={onClose}
       titleIllustration={IllustrationName.Delete}
     >
@@ -58,3 +63,4 @@ export default function DeleteJeuneInactifModal({
     </Modal>
   )
 }
+export default forwardRef(DeleteBeneficiaireInactifModal)
diff --git a/components/jeune/DeleteBeneficiaireModal.tsx b/components/jeune/DeleteBeneficiaireModal.tsx
new file mode 100644
index 000000000..ce8d01f58
--- /dev/null
+++ b/components/jeune/DeleteBeneficiaireModal.tsx
@@ -0,0 +1,135 @@
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/navigation'
+import React, { useEffect, useRef, useState } from 'react'
+
+import Modal from 'components/Modal'
+import { ModalHandles } from 'components/ModalContainer'
+import Button, { ButtonStyle } from 'components/ui/Button/Button'
+import { IllustrationName } from 'components/ui/IllustrationComponent'
+import { BeneficiaireWithActivity } from 'interfaces/beneficiaire'
+import { SuppressionBeneficiaireFormData } from 'interfaces/json/beneficiaire'
+import { MotifSuppressionBeneficiaire } from 'interfaces/referentiel'
+import { getMotifsSuppression } from 'services/beneficiaires.service'
+import { useCurrentConversation } from 'utils/chat/currentConversationContext'
+import { usePortefeuille } from 'utils/portefeuilleContext'
+
+const DeleteBeneficiaireActifModal = dynamic(
+  () => import('components/jeune/DeleteBeneficiaireActifModal')
+)
+const DeleteJeuneInactifModal = dynamic(
+  () => import('components/jeune/DeleteBeneficiaireInactifModal')
+)
+
+type DeleteBeneficiaireModalProps = {
+  beneficiaire: BeneficiaireWithActivity
+  onClose: () => void
+  onError: () => void
+}
+
+export default function DeleteBeneficiaireModal({
+  beneficiaire,
+  onClose,
+  onError,
+}: DeleteBeneficiaireModalProps) {
+  const router = useRouter()
+  const [portefeuille, setPortefeuille] = usePortefeuille()
+  const [currentConversation, setCurrentConversation] = useCurrentConversation()
+
+  const modalRef = useRef<ModalHandles>(null)
+
+  const [motifsSuppression, setMotifsSuppression] = useState<
+    MotifSuppressionBeneficiaire[]
+  >([])
+
+  const [
+    showModaleSuccesDeleteBeneficiaire,
+    setShowModaleSuccesDeleteBeneficiaire,
+  ] = useState<boolean>(false)
+
+  async function archiverJeuneActif(
+    payload: SuppressionBeneficiaireFormData
+  ): Promise<void> {
+    try {
+      const { archiverJeune } = await import('services/beneficiaires.service')
+      await archiverJeune(beneficiaire.id, payload)
+
+      removeBeneficiaireFromPortefeuille(beneficiaire.id)
+      setShowModaleSuccesDeleteBeneficiaire(true)
+    } catch {
+      onError()
+      modalRef.current!.closeModal()
+    }
+  }
+
+  async function supprimerJeuneInactif(): Promise<void> {
+    try {
+      const { supprimerJeuneInactif: _supprimerJeuneInactif } = await import(
+        'services/beneficiaires.service'
+      )
+      await _supprimerJeuneInactif(beneficiaire.id)
+
+      removeBeneficiaireFromPortefeuille(beneficiaire.id)
+      setShowModaleSuccesDeleteBeneficiaire(true)
+    } catch {
+      onError()
+      modalRef.current!.closeModal()
+    }
+  }
+
+  function removeBeneficiaireFromPortefeuille(idBeneficiaire: string): void {
+    const updatedPortefeuille = [...portefeuille]
+    const index = updatedPortefeuille.findIndex(
+      ({ id }) => id === idBeneficiaire
+    )
+    updatedPortefeuille.splice(index, 1)
+    setPortefeuille(updatedPortefeuille)
+    if (currentConversation?.conversation.id === idBeneficiaire)
+      setCurrentConversation(undefined)
+  }
+
+  useEffect(() => {
+    if (beneficiaire.isActivated) {
+      getMotifsSuppression().then(setMotifsSuppression)
+    }
+  }, [])
+
+  return (
+    <>
+      {!showModaleSuccesDeleteBeneficiaire && beneficiaire.isActivated && (
+        <DeleteBeneficiaireActifModal
+          ref={modalRef}
+          beneficiaire={beneficiaire}
+          onClose={onClose}
+          motifsSuppression={motifsSuppression}
+          soumettreSuppression={archiverJeuneActif}
+        />
+      )}
+
+      {!showModaleSuccesDeleteBeneficiaire && !beneficiaire.isActivated && (
+        <DeleteJeuneInactifModal
+          ref={modalRef}
+          beneficiaire={beneficiaire}
+          onClose={onClose}
+          onDelete={supprimerJeuneInactif}
+        />
+      )}
+
+      {showModaleSuccesDeleteBeneficiaire && (
+        <Modal
+          title={`Le compte bénéficiaire : ${beneficiaire.prenom} ${beneficiaire.nom} a bien été supprimé.`}
+          onClose={() => router.push('/mes-jeunes')}
+          titleIllustration={IllustrationName.Check}
+        >
+          <Button
+            type='button'
+            style={ButtonStyle.PRIMARY}
+            className='block m-auto'
+            onClick={() => router.push('/mes-jeunes')}
+          >
+            Revenir à mon portefeuille
+          </Button>
+        </Modal>
+      )}
+    </>
+  )
+}
diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
index 47f819f8f..79c2ba5a3 100644
--- a/components/layouts/Header.tsx
+++ b/components/layouts/Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import {
+  ID_CONTENU,
   PAGE_ACTIONS_ROOT_ID,
   PAGE_NAVIGATION_ROOT_ID,
 } from 'components/globals'
@@ -8,6 +9,8 @@ import {
 export default function Header() {
   return (
     <header
+      id={ID_CONTENU}
+      tabIndex={-1}
       role='banner'
       className='flex justify-between items-center px-12 py-8 border-b border-solid border-primary_lighten'
     >
diff --git a/components/pilotage/TableauBeneficiairesAArchiver.tsx b/components/pilotage/TableauBeneficiairesAArchiver.tsx
index 2b38c45de..675fe1bb1 100644
--- a/components/pilotage/TableauBeneficiairesAArchiver.tsx
+++ b/components/pilotage/TableauBeneficiairesAArchiver.tsx
@@ -1,6 +1,10 @@
 import { DateTime } from 'luxon'
+import React, { useState } from 'react'
 
+import DeleteBeneficiaireModal from 'components/jeune/DeleteBeneficiaireModal'
+import Button, { ButtonStyle } from 'components/ui/Button/Button'
 import { TagDate } from 'components/ui/Indicateurs/Tag'
+import FailureAlert from 'components/ui/Notifications/FailureAlert'
 import Table from 'components/ui/Table/Table'
 import TD from 'components/ui/Table/TD'
 import { TH } from 'components/ui/Table/TH'
@@ -21,77 +25,109 @@ const derniereActiviteColumn = 'Dernière activité'
 export default function TableauBeneficiairesAArchiver({
   beneficiaires,
 }: TableauBeneficiairesAArchiverProps) {
+  const [beneficiaireAArchiver, setBeneficiaireAArchiver] = useState<
+    BeneficiaireWithActivity | undefined
+  >()
+  const [
+    showSuppressionCompteBeneficiaireError,
+    setShowSuppressionCompteBeneficiaireError,
+  ] = useState<boolean>(false)
+
   return (
     <>
-      {beneficiaires.length > 0 && (
-        <Table caption={{ text: 'Liste des bénéficiaires à archiver' }}>
-          <thead>
-            <TR isHeader={true}>
-              <TH>Bénéficiaire</TH>
-              <TH>{dateFinCEJColumn}</TH>
-              <TH>{derniereActiviteColumn}</TH>
-              {/* <TH>Archiver</TH> */}
-            </TR>
-          </thead>
+      {showSuppressionCompteBeneficiaireError && (
+        <FailureAlert
+          label='Suite à un problème inconnu l’archivage a échoué. Vous pouvez réessayer.'
+          onAcknowledge={() => setShowSuppressionCompteBeneficiaireError(false)}
+        />
+      )}
 
-          <tbody>
-            {beneficiaires.map((beneficiaire: BeneficiaireWithActivity) => (
-              <TR key={beneficiaire.id}>
-                <TD isBold>
-                  <div>{getNomBeneficiaireComplet(beneficiaire)}</div>
-                </TD>
+      <Table caption={{ text: 'Liste des bénéficiaires à archiver' }}>
+        <thead className='sr-only'>
+          <TR isHeader={true}>
+            <TH>Bénéficiaire</TH>
+            <TH>{dateFinCEJColumn}</TH>
+            <TH>{derniereActiviteColumn}</TH>
+            <TH>Archiver</TH>
+          </TR>
+        </thead>
 
-                <TD>
-                  <div
-                    className='text-s-regular text-grey_800'
-                    aria-hidden={true}
-                  >
-                    {dateFinCEJColumn}
-                  </div>
+        <tbody>
+          {beneficiaires.map((beneficiaire: BeneficiaireWithActivity) => (
+            <TR key={beneficiaire.id}>
+              <TD isBold>
+                <div>{getNomBeneficiaireComplet(beneficiaire)}</div>
+              </TD>
 
-                  {beneficiaire.dateFinCEJ && (
-                    <TagDate
-                      label={toLongMonthDate(
-                        DateTime.fromISO(beneficiaire.dateFinCEJ)
-                      )}
-                    />
-                  )}
+              <TD>
+                <div
+                  className='text-s-regular text-grey_800'
+                  aria-hidden={true}
+                >
+                  {dateFinCEJColumn}
+                </div>
 
-                  {!beneficiaire.dateFinCEJ && (
-                    <>
-                      --
-                      <span className='sr-only'>
-                        information non disponible
-                      </span>
-                    </>
-                  )}
-                </TD>
+                {beneficiaire.dateFinCEJ && (
+                  <TagDate
+                    label={toLongMonthDate(
+                      DateTime.fromISO(beneficiaire.dateFinCEJ)
+                    )}
+                  />
+                )}
 
-                <TD>
-                  {beneficiaire.isActivated && (
-                    <>
-                      <span
-                        className='text-xs-regular text-grey_800'
-                        aria-hidden={true}
-                      >
-                        {derniereActiviteColumn}
-                      </span>
-                      <span className='text-s-regular'>
-                        {toRelativeDateTime(beneficiaire.lastActivity!)}
-                      </span>
-                    </>
-                  )}
+                {!beneficiaire.dateFinCEJ && (
+                  <>
+                    --
+                    <span className='sr-only'>information non disponible</span>
+                  </>
+                )}
+              </TD>
 
-                  {!beneficiaire.isActivated && (
-                    <span className='text-s-regular text-warning'>
-                      Compte non activé
+              <TD>
+                {beneficiaire.isActivated && (
+                  <>
+                    <span
+                      className='text-xs-regular text-grey_800'
+                      aria-hidden={true}
+                    >
+                      {derniereActiviteColumn}
+                    </span>
+                    <span className='text-s-regular'>
+                      {toRelativeDateTime(beneficiaire.lastActivity!)}
                     </span>
-                  )}
-                </TD>
-              </TR>
-            ))}
-          </tbody>
-        </Table>
+                  </>
+                )}
+
+                {!beneficiaire.isActivated && (
+                  <span className='text-s-regular text-warning'>
+                    Compte non activé
+                  </span>
+                )}
+              </TD>
+
+              <TD>
+                <Button
+                  type='button'
+                  style={ButtonStyle.PRIMARY}
+                  onClick={() => setBeneficiaireAArchiver(beneficiaire)}
+                >
+                  Archiver
+                  <span className='sr-only'>
+                    {getNomBeneficiaireComplet(beneficiaire)}
+                  </span>
+                </Button>
+              </TD>
+            </TR>
+          ))}
+        </tbody>
+      </Table>
+
+      {beneficiaireAArchiver && (
+        <DeleteBeneficiaireModal
+          beneficiaire={beneficiaireAArchiver}
+          onClose={() => setBeneficiaireAArchiver(undefined)}
+          onError={() => setShowSuppressionCompteBeneficiaireError(true)}
+        />
       )}
     </>
   )
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b11a1f180..8b08c3e82 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -35,7 +35,11 @@ const eslintConfig = [
       ],
       '@typescript-eslint/no-unused-vars': [
         'error',
-        { varsIgnorePattern: '^_', ignoreRestSiblings: true },
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
       ],
       'jsx-a11y/no-noninteractive-tabindex': ['error', { roles: ['tabpanel'] }],
       'jsx-a11y/no-noninteractive-element-to-interactive-role': [
diff --git a/fixtures/beneficiaire.ts b/fixtures/beneficiaire.ts
index c36bda053..8547f7a95 100644
--- a/fixtures/beneficiaire.ts
+++ b/fixtures/beneficiaire.ts
@@ -41,6 +41,7 @@ export const unBeneficiaireWithActivity = (
 ): BeneficiaireWithActivity => {
   const defaults: BeneficiaireWithActivity = {
     ...uneBaseBeneficiaire(),
+    creationDate: '2020-04-12T05:30:07.756Z',
     isActivated: true,
     lastActivity: '2021-12-07T17:30:07.756Z',
     estAArchiver: false,
@@ -181,6 +182,7 @@ export const unItemBeneficiaireJson = (
     estAArchiver: false,
     isActivated: true,
     isReaffectationTemporaire: false,
+    creationDate: '2020-04-12T05:30:07.756Z',
     lastActivity: '2021-12-07T17:30:07.756Z',
   }
   return { ...defaults, ...overrides }
diff --git a/interfaces/beneficiaire.ts b/interfaces/beneficiaire.ts
index e38d41dc6..2e4af176f 100644
--- a/interfaces/beneficiaire.ts
+++ b/interfaces/beneficiaire.ts
@@ -29,6 +29,7 @@ export type BaseBeneficiaire = {
 }
 
 export type BeneficiaireWithActivity = BaseBeneficiaire & {
+  creationDate: string
   estAArchiver: boolean
   isActivated: boolean
   lastActivity?: string
@@ -240,6 +241,7 @@ export function extractBeneficiaireWithActivity(
 ): BeneficiaireWithActivity {
   return {
     ...extractBaseBeneficiaire(beneficiaire),
+    creationDate: beneficiaire.creationDate,
     isActivated: beneficiaire.isActivated,
     lastActivity: beneficiaire.lastActivity,
     dateFinCEJ: beneficiaire.dateFinCEJ,
diff --git a/interfaces/json/beneficiaire.ts b/interfaces/json/beneficiaire.ts
index 4f2766b2f..6560d8e59 100644
--- a/interfaces/json/beneficiaire.ts
+++ b/interfaces/json/beneficiaire.ts
@@ -30,6 +30,7 @@ export interface BaseBeneficiaireJson {
 }
 
 export interface ItemBeneficiaireJson extends BaseBeneficiaireJson {
+  creationDate: string
   isActivated: boolean
   isReaffectationTemporaire: boolean
   estAArchiver: boolean
diff --git a/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx b/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx
index 16f293771..c92d046ed 100644
--- a/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx
+++ b/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 
 import CreationBeneficiaireFranceTravailPage from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage'
@@ -128,8 +129,10 @@ describe('CreationBeneficiaireFranceTravailPage client side', () => {
   })
 
   describe('quand le formulaire a été soumis', () => {
+    const now = DateTime.now()
     beforeEach(async () => {
       // Given
+      jest.spyOn(DateTime, 'now').mockReturnValue(now)
       const inputFirstname = screen.getByLabelText('* Prénom')
       await userEvent.type(inputFirstname, 'Nadia')
       const inputName = screen.getByLabelText('* Nom')
@@ -171,7 +174,12 @@ describe('CreationBeneficiaireFranceTravailPage client side', () => {
 
       expect(portefeuilleSetter).toHaveBeenCalledWith([
         ...portefeuille,
-        { ...uneBaseBeneficiaire(), isActivated: false, estAArchiver: false },
+        {
+          ...uneBaseBeneficiaire(),
+          creationDate: now.toISO(),
+          isActivated: false,
+          estAArchiver: false,
+        },
       ])
       expect(alerteSetter).toHaveBeenCalledWith(
         'creationBeneficiaire',
diff --git a/tests/pages/CreationBeneficiaireMiloPage.test.tsx b/tests/pages/CreationBeneficiaireMiloPage.test.tsx
index 806ad4744..c4b890c38 100644
--- a/tests/pages/CreationBeneficiaireMiloPage.test.tsx
+++ b/tests/pages/CreationBeneficiaireMiloPage.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 
 import CreationBeneficiaireMiloPage from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage'
@@ -80,8 +81,10 @@ describe('CreationBeneficiaireMiloPage client side', () => {
     const portefeuille = desItemsBeneficiaires().map(
       extractBeneficiaireWithActivity
     )
+    const now = DateTime.now()
     beforeEach(async () => {
       // Given
+      jest.spyOn(DateTime, 'now').mockReturnValue(now)
       ;(getDossierJeune as jest.Mock).mockResolvedValue(dossier)
       ;(createCompteJeuneMilo as jest.Mock).mockResolvedValue(
         uneBaseBeneficiaire()
@@ -142,7 +145,12 @@ describe('CreationBeneficiaireMiloPage client side', () => {
 
       expect(setPortefeuille).toHaveBeenCalledWith([
         ...portefeuille,
-        { ...uneBaseBeneficiaire(), isActivated: false, estAArchiver: false },
+        {
+          ...uneBaseBeneficiaire(),
+          creationDate: now.toISO(),
+          isActivated: false,
+          estAArchiver: false,
+        },
       ])
       expect(setAlerte).toHaveBeenCalledWith(
         'creationBeneficiaire',
diff --git a/tests/pages/pilotage/PilotagePage.archivage.test.tsx b/tests/pages/pilotage/PilotagePage.archivage.test.tsx
index dd1d14edc..2bd25fd4e 100644
--- a/tests/pages/pilotage/PilotagePage.archivage.test.tsx
+++ b/tests/pages/pilotage/PilotagePage.archivage.test.tsx
@@ -1,4 +1,5 @@
 import { act, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { AxeResults } from 'axe-core'
 import { axe } from 'jest-axe'
 import { useRouter } from 'next/navigation'
@@ -6,19 +7,23 @@ import { useRouter } from 'next/navigation'
 import Pilotage from 'app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage'
 import { desCategories } from 'fixtures/action'
 import { unBeneficiaireWithActivity } from 'fixtures/beneficiaire'
+import { desMotifsDeSuppression } from 'fixtures/referentiel'
+import { getMotifsSuppression } from 'services/beneficiaires.service'
 import getByDescriptionTerm from 'tests/querySelector'
 import renderWithContexts from 'tests/renderWithContexts'
 
 jest.mock('services/evenements.service')
 jest.mock('services/referentiel.service')
 jest.mock('services/conseiller.service')
+jest.mock('services/beneficiaires.service')
 jest.mock('components/ModalContainer')
 
 describe('PilotagePage client side - Archivage des bénéficiaires', () => {
   describe('contenu', () => {
     let container: HTMLElement
-
+    const motifsSuppression = desMotifsDeSuppression()
     beforeEach(async () => {
+      ;(getMotifsSuppression as jest.Mock).mockResolvedValue(motifsSuppression)
       ;(useRouter as jest.Mock).mockReturnValue({ replace: jest.fn() })
 
       await act(async () => {
@@ -40,10 +45,14 @@ describe('PilotagePage client side - Archivage des bénéficiaires', () => {
               value: [
                 unBeneficiaireWithActivity({
                   id: 'a-archiver-1',
+                  prenom: 'Ada',
+                  nom: 'Lovelace',
                   estAArchiver: true,
                 }),
                 unBeneficiaireWithActivity({
                   id: 'a-archiver-2',
+                  prenom: 'Grace',
+                  nom: 'Hopper',
                   estAArchiver: true,
                 }),
                 unBeneficiaireWithActivity(),
@@ -97,10 +106,30 @@ describe('PilotagePage client side - Archivage des bénéficiaires', () => {
           name: 'Dernière activité',
         })
       ).toBeInTheDocument()
+      expect(
+        within(tableau).getByRole('button', { name: 'Archiver Lovelace Ada' })
+      ).toBeInTheDocument()
+      expect(
+        within(tableau).getByRole('button', { name: 'Archiver Hopper Grace' })
+      ).toBeInTheDocument()
+    })
+
+    it('permet d’archiver les bénéficiaires', async () => {
+      // When
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Archiver Lovelace Ada' })
+      )
+
+      // Then
+      expect(
+        screen.getByText(
+          'Souhaitez-vous supprimer le compte bénéficiaire : Ada Lovelace ?'
+        )
+      ).toBeInTheDocument()
     })
   })
 
-  describe("quand le conseiller n'a pas d'animation collective à clore", () => {
+  describe("quand le conseiller n'a pas de bénéficiaire à archiver", () => {
     it('affiche un message qui le précise', async () => {
       // Given
       renderWithContexts(