diff --git a/src/components/PageArticleComposant.vue b/src/components/PageArticleComposant.vue
index 9a60dd562..cd5c24403 100644
--- a/src/components/PageArticleComposant.vue
+++ b/src/components/PageArticleComposant.vue
@@ -1,100 +1,80 @@
 <template>
-  <div class="fr-container fr-mb-6w">
-    <FilDAriane
-      :page-courante="`Article: ${article.titre}`"
-      :page-hierarchie="
-        useRoute().params.thematiqueId && useRoute().params.missionId
-          ? [
-              {
-                label: `${MenuThematiques.getFromUrl(useRoute().params.thematiqueId as string).labelDansLeMenu}`,
-                url: `/thematique/${useRoute().params.thematiqueId}`,
-              },
-              {
-                label: `Mission`,
-                url: `/thematique/${useRoute().params.thematiqueId}/mission/${useRoute().params.missionId}`,
-              },
-            ]
-          : []
-      "
-    />
-    <h1>{{ article.titre }}</h1>
-    <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-12 fr-col-md-8">
-        <div class="border fr-p-6v background--white border-radius--md">
-          <h2 class="fr-h3">{{ article.sousTitre }}</h2>
-          <div class="cms__content" v-html="article.texte" />
-          <div v-if="article.sources && article.sources.length > 0" class="fr-mb-4w print-hidden">
-            <p v-if="article.sources.length === 1" class="fr-text--xs">
-              <span class="fr-mr-1w">Source :</span>
-              <a :href="article.sources[0].url" target="_blank" rel="noopener noreferrer">{{
-                article.sources[0].label
-              }}</a>
-            </p>
-            <div v-else class="fr-text--xs">
-              <span class="fr-mr-1w">Sources :</span>
-              <ul>
-                <li v-for="source in article.sources" :key="source.label">
-                  <a :href="source.url" target="_blank" rel="noopener noreferrer">{{ source.label }}</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="print-hidden fr-grid-row fr-grid-row--middle flex-space-between border border-radius--md fr-p-2w">
-            <span class="fr-m-0 fr-text--bold fr-text--md">Comment avez-vous trouvé cet article ?</span>
-            <Notation @rated="noterLarticle" />
-          </div>
-          <div class="print-hidden fr-grid-row fr-mt-5v fr-grid-row--middle flex-space-between">
-            <router-link class="fr-btn fr-mt-3w" :to="useBoutonRetour().url">
-              {{ useBoutonRetour().label }}
-            </router-link>
+  <h1>{{ article.titre }}</h1>
+  <div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-12 fr-col-md-8">
+      <div class="border fr-p-6v background--white border-radius--md">
+        <h2 class="fr-h3">{{ article.sousTitre }}</h2>
+        <div class="cms__content" v-html="article.texte" />
+        <div v-if="article.sources && article.sources.length > 0" class="fr-mb-4w print-hidden">
+          <p v-if="article.sources.length === 1" class="fr-text--xs">
+            <span class="fr-mr-1w">Source :</span>
+            <a :href="article.sources[0].url" target="_blank" rel="noopener noreferrer">{{
+              article.sources[0].label
+            }}</a>
+          </p>
+          <div v-else class="fr-text--xs">
+            <span class="fr-mr-1w">Sources :</span>
+            <ul>
+              <li v-for="source in article.sources" :key="source.label">
+                <a :href="source.url" target="_blank" rel="noopener noreferrer">{{ source.label }}</a>
+              </li>
+            </ul>
           </div>
         </div>
-      </div>
-      <div class="fr-col-12 fr-col-md-4 print-hidden">
-        <div class="fr-grid-row flex-center background--white border border-radius--md fr-p-2w">
-          <button
-            v-if="!article.estEnFavori"
-            class="fr-btn fr-btn--tertiary fr-icon-heart-line fr-btn--icon-right icon-favoris--off"
-            @click="ajouterAuxFavoris"
-          >
-            Ajouter aux favoris
-          </button>
-          <button
-            v-else
-            class="fr-btn fr-btn--tertiary fr-icon-heart-fill fr-btn--icon-right icon-favoris--on"
-            @click="retirerDesFavoris"
-          >
-            Retirer des favoris
-          </button>
-          <button class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-printer-fill fr-ml-1w" @click="imprimer">
-            Imprimer
-          </button>
+        <div class="print-hidden fr-grid-row fr-grid-row--middle flex-space-between border border-radius--md fr-p-2w">
+          <span class="fr-m-0 fr-text--bold fr-text--md">Comment avez-vous trouvé cet article ?</span>
+          <Notation @rated="noterLarticle" />
         </div>
-
-        <div v-if="article.partenaire" class="fr-mt-2w background--white border border-radius--md fr-p-2w">
-          <p class="fr-mb-0">Proposé par</p>
-          <img class="fr-mt-5v max-full-width" :src="article.partenaire.logo" :alt="article.partenaire.nom" />
+        <div v-if="estEnchainementMission"><slot /></div>
+        <div v-else class="print-hidden fr-grid-row fr-mt-5v fr-grid-row--middle flex-space-between">
+          <router-link class="fr-btn fr-mt-3w" :to="useBoutonRetour().url">
+            {{ useBoutonRetour().label }}
+          </router-link>
         </div>
       </div>
     </div>
+    <div class="fr-col-12 fr-col-md-4 print-hidden">
+      <div class="fr-grid-row flex-center background--white border border-radius--md fr-p-2w">
+        <button
+          v-if="!article.estEnFavori"
+          class="fr-btn fr-btn--tertiary fr-icon-heart-line fr-btn--icon-right icon-favoris--off"
+          @click="ajouterAuxFavoris"
+        >
+          Ajouter aux favoris
+        </button>
+        <button
+          v-else
+          class="fr-btn fr-btn--tertiary fr-icon-heart-fill fr-btn--icon-right icon-favoris--on"
+          @click="retirerDesFavoris"
+        >
+          Retirer des favoris
+        </button>
+        <button class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-printer-fill fr-ml-1w" @click="imprimer">
+          Imprimer
+        </button>
+      </div>
+
+      <div v-if="article.partenaire" class="fr-mt-2w background--white border border-radius--md fr-p-2w">
+        <p class="fr-mb-0">Proposé par</p>
+        <img class="fr-mt-5v max-full-width" :src="article.partenaire.logo" :alt="article.partenaire.nom" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { useRoute } from 'vue-router';
   import Notation from '@/components/custom/Notation.vue';
-  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import { useBoutonRetour } from '@/composables/boutonRetour';
   import { ArticleRepositoryAxios } from '@/domaines/article/adapters/article.repository.axios';
   import { AjouterAuxFavorisUsecase } from '@/domaines/article/ajouterAuxFavoris.usecase';
   import { EvaluerArticleUsecase } from '@/domaines/article/evaluerArticle.usecase';
   import { Article } from '@/domaines/article/recupererArticle.usecase';
   import { RetirerDesFavorisUsecase } from '@/domaines/article/retirerDesFavoris.usecase';
-  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { utilisateurStore } from '@/store/utilisateur';
 
   const props = defineProps<{
     article: Article;
+    estEnchainementMission?: boolean;
   }>();
 
   const emit = defineEmits<{
diff --git a/src/components/custom/BoutonRadio.vue b/src/components/custom/BoutonRadio.vue
index 45142f86a..39eae10c6 100644
--- a/src/components/custom/BoutonRadio.vue
+++ b/src/components/custom/BoutonRadio.vue
@@ -15,6 +15,7 @@
     <div class="fr-grid-row">
       <div :class="`fr-fieldset__element ${col}`" v-for="option in options" :key="option.label">
         <div
+          class="background--white"
           :class="`fr-radio-group border fr-col
           ${option.value === selectedValue ? 'fr-text--bold border--bleu-dark' : ''}
           ${option.customClass}
diff --git a/src/components/custom/Mission/MissionArticle.vue b/src/components/custom/Mission/MissionArticle.vue
new file mode 100644
index 000000000..bbcf94288
--- /dev/null
+++ b/src/components/custom/Mission/MissionArticle.vue
@@ -0,0 +1,43 @@
+<template>
+  <PageArticleComposant
+    v-if="articleViewModel"
+    :article="articleViewModel"
+    :est-enchainement-mission="true"
+    @update:article-modifie="onArticleModifie"
+  >
+    <button class="fr-btn" @click="onClickContinuer">Continuer</button>
+  </PageArticleComposant>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import PageArticleComposant from '@/components/PageArticleComposant.vue';
+  import { ArticleRepositoryAxios } from '@/domaines/article/adapters/article.repository.axios';
+  import { PasserUnArticleCommeLuUsecase } from '@/domaines/article/passerUnArticleCommeLu.usecase';
+  import { Article, RecupererArticleUsecase } from '@/domaines/article/recupererArticle.usecase';
+  import { ToDoListEventBusImpl } from '@/domaines/toDoList/toDoListEventBusImpl';
+  import { utilisateurStore } from '@/store/utilisateur';
+
+  const props = defineProps<{ articleId: string; onClickContinuer: () => void }>();
+
+  const articleViewModel = ref<Article>();
+
+  onMounted(() => {
+    const idArticle = props.articleId;
+
+    const articleRepositoryAxios = new ArticleRepositoryAxios();
+    const utilisateurId = utilisateurStore().utilisateur.id;
+
+    new RecupererArticleUsecase(articleRepositoryAxios).execute(utilisateurId, idArticle).then(async article => {
+      articleViewModel.value = article;
+      await new PasserUnArticleCommeLuUsecase(articleRepositoryAxios, ToDoListEventBusImpl.getInstance()).execute(
+        idArticle,
+        utilisateurId,
+      );
+    });
+  });
+
+  const onArticleModifie = (article: Article) => {
+    articleViewModel.value = article;
+  };
+</script>
diff --git a/src/components/custom/Mission/MissionCarteBloquee.vue b/src/components/custom/Mission/MissionCarteBloquee.vue
deleted file mode 100644
index f69ba0e77..000000000
--- a/src/components/custom/Mission/MissionCarteBloquee.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="fr-grid-row background--white shadow fr-p-3w border-radius--md flex-space-between position--relative">
-    <div>
-      <img :src="pictoMission" class="fr-mr-2w" alt="" />
-      <span class="text--normal fr-text--lg text--black">À découvrir</span>
-    </div>
-    <span class="fr-icon-lock-line" aria-hidden="true"></span>
-  </div>
-</template>
-
-<script setup lang="ts">
-  defineProps<{ pictoMission: string }>();
-</script>
diff --git a/src/components/custom/Mission/MissionCarteDone.vue b/src/components/custom/Mission/MissionCarteDone.vue
deleted file mode 100644
index 2cfcd6f78..000000000
--- a/src/components/custom/Mission/MissionCarteDone.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="todo background--white fr-p-2w shadow">
-    <span class="fr-icon-checkbox-circle-line todo__picto text--success" aria-hidden="true"></span>
-    <div class="fr-col fr-col-md-7">
-      <h3 class="fr-text--bold fr-text--lg text--success fr-mb-0 display-block">
-        <router-link :to="{ path: mission.url }" class="background--none fr-mb-0">
-          <span v-html="mission.titre" />
-        </router-link>
-      </h3>
-    </div>
-    <div class="todo__boutonContainer fr-ml-auto">
-      <span v-if="!mission.pointAEteRecolte" class="text--uppercase fr-mb-0 fr-text--xs text--gris-dark fr-text--bold">
-        Objectif réalisé
-      </span>
-      <button
-        class="fr-btn fr-btn--secondary fr-text--md todo__bouton"
-        @click="onRecolterPoints(mission.id)"
-        :disabled="mission.pointAEteRecolte"
-      >
-        <span class="fr-hidden fr-unhidden-md"> Récolter vos </span> &nbsp;{{ mission.points }}
-        <img src="/ic_score.svg" alt="points" width="16" class="fr-ml-1v" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { MissionBaseViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-  import { MissionsRepositoryAxios } from '@/domaines/missions/adapters/missions.repository.axios';
-  import { MissionEventBusImpl } from '@/domaines/missions/missionEventBus.impl';
-  import { RecupererPointsMissionUsecase } from '@/domaines/missions/recupererPointsMission.usecase';
-  import { utilisateurStore } from '@/store/utilisateur';
-
-  defineProps<{ mission: MissionBaseViewModel }>();
-
-  const onRecolterPoints = (missionId: string) => {
-    const utilisateurId: string = utilisateurStore().utilisateur.id;
-    new RecupererPointsMissionUsecase(new MissionsRepositoryAxios(), MissionEventBusImpl.getInstance()).execute(
-      utilisateurId,
-      missionId,
-    );
-  };
-</script>
-
-<style scoped>
-  .todo {
-    position: relative;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    border-radius: 8px;
-  }
-
-  .todo__picto::before {
-    --icon-size: 2rem;
-  }
-
-  .todo__boutonContainer {
-    display: grid;
-    text-align: center;
-  }
-
-  .todo__bouton:not([disabled]) {
-    animation: shake 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
-  }
-
-  @keyframes shake {
-    0%,
-    60% {
-      transform: rotate(0deg);
-      transform-origin: 50% 100%;
-    }
-    5% {
-      transform: rotate(1deg);
-    }
-    10%,
-    20%,
-    30% {
-      transform: rotate(-2deg);
-    }
-    15%,
-    25%,
-    35% {
-      transform: rotate(2deg);
-    }
-    50% {
-      transform: rotate(-2deg);
-    }
-    60% {
-      transform: rotate(1deg);
-    }
-  }
-</style>
diff --git a/src/components/custom/Mission/MissionCarteKyc.vue b/src/components/custom/Mission/MissionCarteKyc.vue
deleted file mode 100644
index dc37a4027..000000000
--- a/src/components/custom/Mission/MissionCarteKyc.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="todo background--white shadow fr-p-3w border">
-    <img :src="mission.picto" alt="" />
-    <div class="fr-col fr-col-md-9">
-      <h3 class="fr-m-0">
-        <router-link :to="{ path: mission.url }" class="todo__link display-block text--normal fr-text--lg fr-mb-0">
-          <div v-html="mission.titre" />
-        </router-link>
-      </h3>
-      <div
-        class="fr-col-6"
-        v-if="
-          mission.progression.etapeCourante !== undefined &&
-          mission.progression.etapeCourante > 0 &&
-          mission.progression.etapeTotal !== undefined
-        "
-      >
-        <CoachCardTodoProgression
-          :value="mission.progression.etapeCourante"
-          :value-max="mission.progression.etapeTotal"
-          label="Barre de progression: tâche à faire"
-          couleur="#000091"
-        />
-      </div>
-    </div>
-    <div class="fr-ml-auto">
-      <span v-if="mission.points" class="background--white fr-text--bold fr-p-1w fr-mr-2w">
-        {{ mission.points }}
-        <img width="16" src="/ic_score.svg" alt="point" />
-      </span>
-      <span class="fr-icon-arrow-right-line todo__picto text--bleu" aria-hidden="true"></span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import CoachCardTodoProgression from '@/components/custom/Coach/CoachCardTodoProgression.vue';
-  import { MissionKycViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-
-  defineProps<{ mission: MissionKycViewModel }>();
-</script>
-
-<style scoped>
-  .todo {
-    position: relative;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    border-radius: 8px;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .item__badge {
-    position: absolute;
-    top: 0;
-    left: 3rem;
-    transform: translateY(-50%);
-  }
-
-  .todo:hover {
-    box-shadow: 0 10px 30px 0 rgba(0, 0, 18, 0.3);
-  }
-
-  .todo__link {
-    background: none;
-  }
-
-  .todo:hover .fr-icon-arrow-right-line::before {
-    animation: slide1 1s ease-in-out infinite;
-  }
-
-  .todo__link::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-  }
-
-  .todo__picto::before {
-    --icon-size: 2rem;
-  }
-
-  @keyframes slide1 {
-    0%,
-    100% {
-      transform: translate(0, 0);
-    }
-
-    50% {
-      transform: translate(10px, 0);
-    }
-  }
-</style>
diff --git a/src/components/custom/Mission/MissionCarteQuizArticle.vue b/src/components/custom/Mission/MissionCarteQuizArticle.vue
deleted file mode 100644
index 9ef1805b1..000000000
--- a/src/components/custom/Mission/MissionCarteQuizArticle.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="todo background--white shadow fr-p-3w border">
-    <img :src="quizArticle.picto" alt="" />
-    <div class="fr-col fr-col-md-9">
-      <h3 class="fr-m-0">
-        <router-link :to="{ path: quizArticle.url }" class="todo__link display-block text--normal fr-text--lg fr-mb-0">
-          <div v-html="quizArticle.titre" />
-        </router-link>
-      </h3>
-    </div>
-    <div class="fr-ml-auto">
-      <span v-if="quizArticle.points" class="background--white fr-text--bold fr-p-1w fr-mr-2w">
-        {{ quizArticle.points }}
-        <img width="16" src="/ic_score.svg" alt="point" />
-      </span>
-      <span class="fr-icon-arrow-right-line todo__picto text--bleu" aria-hidden="true"></span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { MissionQuizArticleViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-
-  defineProps<{ quizArticle: MissionQuizArticleViewModel }>();
-</script>
-
-<style scoped>
-  .todo {
-    position: relative;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    border-radius: 8px;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .item__badge {
-    position: absolute;
-    top: 0;
-    left: 3rem;
-    transform: translateY(-50%);
-  }
-
-  .todo:hover {
-    box-shadow: 0 10px 30px 0 rgba(0, 0, 18, 0.3);
-  }
-
-  .todo__link {
-    background: none;
-  }
-
-  .todo:hover .fr-icon-arrow-right-line::before {
-    animation: slide1 1s ease-in-out infinite;
-  }
-
-  .todo__link::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-  }
-
-  .todo__picto::before {
-    --icon-size: 2rem;
-  }
-
-  @keyframes slide1 {
-    0%,
-    100% {
-      transform: translate(0, 0);
-    }
-
-    50% {
-      transform: translate(10px, 0);
-    }
-  }
-</style>
diff --git a/src/components/custom/Mission/MissionDefis.vue b/src/components/custom/Mission/MissionDefis.vue
index 50ddf73cf..368628501 100644
--- a/src/components/custom/Mission/MissionDefis.vue
+++ b/src/components/custom/Mission/MissionDefis.vue
@@ -1,16 +1,31 @@
 <template>
-  <ul class="fr-grid fr-grid-row fr-grid-row--gutters list-style-none">
-    <li v-for="defi in defis" :key="defi.id" class="fr-col-4">
-      <MissionCarteBloquee v-if="defi.estBloquee" :picto-mission="defi.picto" />
-      <MissionCarteDefi v-else :defi="defi" />
-    </li>
-  </ul>
+  <section class="fr-py-6w">
+    <button
+      class="fr-mb-2w fr-btn fr-btn--icon-left fr-btn--tertiary-no-outline fr-icon-arrow-left-line"
+      @click="onClickRetour"
+    >
+      Retour
+    </button>
+    Etape {{ nombreEtapesMission }} sur {{ nombreEtapesMission }}
+    <h1 class="fr-h2">Sélectionnez un défi</h1>
+    <ul class="fr-grid fr-grid-row fr-grid-row--gutters list-style-none">
+      <li v-for="defi in defis" :key="defi.id" class="fr-col-4">
+        <MissionCarteDefi :defi="defi" />
+      </li>
+    </ul>
+    <button v-if="afficherTerminerMission" @click="onClickFinDefis" class="fr-btn">Suivant</button>
+  </section>
 </template>
 
 <script setup lang="ts">
-  import MissionCarteBloquee from '@/components/custom/Mission/MissionCarteBloquee.vue';
   import MissionCarteDefi from '@/components/custom/Mission/MissionCarteDefi.vue';
   import { MissionDefiViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
 
-  defineProps<{ defis: MissionDefiViewModel[] }>();
+  defineProps<{
+    defis: MissionDefiViewModel[];
+    onClickFinDefis: () => void;
+    onClickRetour: () => void;
+    nombreEtapesMission: number;
+    afficherTerminerMission: boolean;
+  }>();
 </script>
diff --git a/src/components/custom/Mission/MissionIntroduction.vue b/src/components/custom/Mission/MissionIntroduction.vue
new file mode 100644
index 000000000..b7caca9ef
--- /dev/null
+++ b/src/components/custom/Mission/MissionIntroduction.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="fr-container fr-py-6w">
+    <ThematiqueTag :tag="tag" />
+    <h1 class="fr-mt-2w">
+      {{ titre }}
+    </h1>
+    <img :src="urlImage" height="200" alt="" />
+    <p class="fr-mt-2w text--bold">{{ texte }}</p>
+    <button id="btnContinuer" class="fr-btn" @click="onClickContinuer">Continuer</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+  import ThematiqueTag from '@/components/custom/Thematiques/ThematiqueTag.vue';
+  import { TagStyle } from '@/domaines/thematiques/TagThematique';
+
+  defineProps<{
+    titre: string;
+    urlImage: string;
+    texte: string;
+    tag: {
+      label: string;
+      style: TagStyle;
+    };
+    onClickContinuer: () => void;
+  }>();
+
+  onMounted(() => {
+    const btnContinuer = document.getElementById('btnContinuer');
+    btnContinuer?.focus();
+  });
+</script>
diff --git a/src/components/custom/Mission/MissionKyc.vue b/src/components/custom/Mission/MissionKyc.vue
deleted file mode 100644
index 7abfe98da..000000000
--- a/src/components/custom/Mission/MissionKyc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <ul class="list-style-none fr-p-0 fr-m-0">
-    <li v-for="mission in missions" :key="mission.titre" class="fr-mb-2w">
-      <MissionCarteBloquee v-if="mission.estBloquee" :picto-mission="mission.picto" />
-      <MissionCarteDone v-else-if="mission.aEteRealisee" :mission="mission" />
-      <MissionCarteKyc v-else :mission="mission" />
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-  import MissionCarteBloquee from '@/components/custom/Mission/MissionCarteBloquee.vue';
-  import MissionCarteDone from '@/components/custom/Mission/MissionCarteDone.vue';
-  import MissionCarteKyc from '@/components/custom/Mission/MissionCarteKyc.vue';
-  import { MissionKycViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-
-  defineProps<{ missions: MissionKycViewModel[] }>();
-</script>
diff --git a/src/components/custom/Mission/MissionPageComposant.vue b/src/components/custom/Mission/MissionPageComposant.vue
deleted file mode 100644
index d274dffb0..000000000
--- a/src/components/custom/Mission/MissionPageComposant.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <FilDAriane
-    :page-courante="`Mission: ${missionViewModel.titre}`"
-    :page-hierarchie="[
-      {
-        label: `${MenuThematiques.getThematiqueData(clefThematiqueAPI as ClefThematiqueAPI).labelDansLeMenu}`,
-        url: `/thematique/${MenuThematiques.getThematiqueData(clefThematiqueAPI as ClefThematiqueAPI).url}`,
-      },
-    ]"
-  />
-  <div class="fr-grid-row align-items--center fr-mb-4w">
-    <img
-      :src="missionViewModel.urlImage"
-      class="border-radius--md img-object-fit-cover fr-mr-2w"
-      width="120"
-      height="100"
-      alt=""
-    />
-    <div>
-      <span class="text--bleu">Mission</span>
-      <h1 class="fr-h1 fr-col fr-m-0">{{ missionViewModel.titre }}</h1>
-    </div>
-  </div>
-  <div class="mission__dashline fr-col-md-8 fr-col-12">
-    <h2 class="text--uppercase fr-text--xs text--bleu fr-mb-2w fr-mt-3w fr-ml-6w">1. Adapter votre expérience</h2>
-    <MissionKyc :missions="missionViewModel.kyc" />
-    <h2 class="text--uppercase fr-text--xs text--bleu fr-mb-2w fr-mt-5w fr-ml-6w">
-      2. Lire des articles et répondre aux quiz
-    </h2>
-    <MissionQuizArticle :missions="missionViewModel.articleEtQuiz" />
-    <h2 class="text--uppercase fr-text--xs text--bleu fr-mb-2w fr-mt-5w fr-ml-6w">
-      3. Réaliser au moins une action proposée
-    </h2>
-    <MissionDefis :defis="missionViewModel.defis" />
-  </div>
-  <div :class="`fr-col-md-8 fr-col-12 ${!missionViewModel.estTerminable ? 'opacity-6' : ''}`">
-    <h2 class="text--uppercase fr-text--xs text--bleu fr-mb-2w fr-mt-5w fr-ml-6w">4. Gagner votre carte</h2>
-    <MissionTerminee
-      :url-image="missionViewModel.urlImage"
-      :titre="missionViewModel.titre"
-      :est-terminee="missionViewModel.estTerminee"
-      :est-terminable="missionViewModel.estTerminable"
-      :thematique-id="clefThematiqueAPI"
-      :mission-id="missionId"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import MissionDefis from '@/components/custom/Mission/MissionDefis.vue';
-  import MissionKyc from '@/components/custom/Mission/MissionKyc.vue';
-  import MissionQuizArticle from '@/components/custom/Mission/MissionQuizArticle.vue';
-  import MissionTerminee from '@/components/custom/Mission/MissionTerminee.vue';
-  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
-  import { MissionViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-  import { ClefThematiqueAPI, MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
-
-  defineProps<{ missionId: string; clefThematiqueAPI: string; missionViewModel: MissionViewModel }>();
-</script>
-
-<style scoped>
-  .mission__dashline {
-    position: relative;
-  }
-
-  .mission__dashline::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: -3.3rem;
-    left: 2rem;
-    display: block;
-    width: 0;
-    border: 1px dashed var(--text-default-grey);
-  }
-</style>
diff --git a/src/components/custom/Mission/MissionQuestionsKyc.vue b/src/components/custom/Mission/MissionQuestionsKyc.vue
index 2f0dbe4b0..563959b0e 100644
--- a/src/components/custom/Mission/MissionQuestionsKyc.vue
+++ b/src/components/custom/Mission/MissionQuestionsKyc.vue
@@ -1,18 +1,13 @@
 <template>
+  <button
+    class="fr-mb-2w fr-btn fr-btn--icon-left fr-btn--tertiary-no-outline fr-icon-arrow-left-line"
+    @click="revenirEtapePrecedente"
+  >
+    Retour
+  </button>
   <div v-for="(questionViewModel, index) in questionsViewModel.questions" :key="index">
     <div v-show="index === etapeCourante">
-      <p class="text--bleu fr-grid-row align-items--center fr-py-2w">
-        <button
-          v-if="index !== 0"
-          class="fr-btn fr-btn--tertiary-no-outline fr-icon-arrow-left-line"
-          :title="`Retour à l'étape ${index}`"
-          @click="etapeCourante--"
-        >
-          Retour à l'étape précédente
-        </button>
-        <span class="fr-text--bold">Question {{ index + 1 }}</span>
-        &nbsp; sur {{ questionsViewModel.questions.length }}
-      </p>
+      Etape {{ index + 1 }} sur {{ nombreEtapesMission }}
       <KYCForm
         :question-view-model="questionViewModel"
         wording-bouton="Continuer"
@@ -20,39 +15,38 @@
       />
     </div>
   </div>
-  <KYCFin
-    v-if="afficherFinKyc"
-    :a-deja-repondu="false"
-    :phrasePointAGagner="questionsViewModel.phrasePointAGagner"
-    :bouton="{ url: urlBackBouton, label: 'Retour à la mission' }"
-  />
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useRoute } from 'vue-router';
-  import KYCFin from '@/components/custom/KYC/KYCFin.vue';
   import KYCForm from '@/components/custom/KYC/KYCForm.vue';
   import { QuestionsViewModel } from '@/domaines/kyc/adapters/listeQuestionsThematique.presenter.impl';
-  import { RouteThematiquesPath } from '@/router/thematiques/routes';
 
-  const props = defineProps<{ questionsViewModel: QuestionsViewModel }>();
+  const props = defineProps<{
+    questionsViewModel: QuestionsViewModel;
+    onClickFinKYC: () => void;
+    onClickRevenirEtapePrecedente: () => void;
+    etapeCouranteDefaut?: number;
+    nombreEtapesMission: number;
+  }>();
 
   const premiereKycNonRepondu = () => {
     const indexQuestion = props.questionsViewModel.questions.findIndex(question => !question.aDejaEteRepondu);
-    return indexQuestion !== -1 ? indexQuestion : 0;
+    return indexQuestion !== -1 ? indexQuestion : (props.etapeCouranteDefaut ?? 0);
   };
-
   const etapeCourante = ref<number>(premiereKycNonRepondu());
   const afficherFinKyc = ref<boolean>(false);
 
   const passerEtapeSuivante = () => {
     etapeCourante.value++;
     afficherFinKyc.value = etapeCourante.value === props.questionsViewModel.questions.length;
+    if (afficherFinKyc.value) props.onClickFinKYC();
   };
 
-  const route = useRoute();
-  const missionId = route.params.missionId;
-  const thematiqueId = route.params.thematiqueId;
-  const urlBackBouton = `/${RouteThematiquesPath.THEMATIQUE}/${thematiqueId}/mission/${missionId}`;
+  const revenirEtapePrecedente = () => {
+    etapeCourante.value--;
+    if (etapeCourante.value === -1) {
+      props.onClickRevenirEtapePrecedente();
+    }
+  };
 </script>
diff --git a/src/components/custom/Mission/MissionQuiz.vue b/src/components/custom/Mission/MissionQuiz.vue
new file mode 100644
index 000000000..dd5b32541
--- /dev/null
+++ b/src/components/custom/Mission/MissionQuiz.vue
@@ -0,0 +1,38 @@
+<template>
+  <PageQuizComposant
+    v-if="quizViewModel"
+    :quiz-view-model="quizViewModel"
+    :id-utilisateur="utilisateurStore().utilisateur.id"
+    :is-mode-previsualisation="false"
+    :id-quiz="quizId"
+    :article-associe="quizViewModel.articleAssocie"
+    :est-enchainement-mission="true"
+    :on-click-continuer="onClickContinuer"
+  />
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import PageQuizComposant from '@/components/custom/Quiz/PageQuizComposant.vue';
+  import { ChargementQuizPresenterImpl, QuizViewModel } from '@/domaines/quiz/adapters/chargementQuiz.presenter.impl';
+  import { QuizRepositoryAxios } from '@/domaines/quiz/adapters/quizRepository.axios';
+  import { ChargementQuizUsecase } from '@/domaines/quiz/chargementQuiz.usecase';
+  import { utilisateurStore } from '@/store/utilisateur';
+
+  const quizViewModel = ref<QuizViewModel>();
+  const isLoading = ref<boolean>(false);
+  const props = defineProps<{ quizId: string; estEnchainementMission?: boolean; onClickContinuer: () => void }>();
+
+  const mapValuesQuiz = (viewModel: QuizViewModel) => {
+    quizViewModel.value = viewModel;
+  };
+
+  const chargementQuizz = async () => {
+    isLoading.value = true;
+    const chargementQuizzUsecase = new ChargementQuizUsecase(new QuizRepositoryAxios());
+    await chargementQuizzUsecase.execute(props.quizId, new ChargementQuizPresenterImpl(mapValuesQuiz));
+    isLoading.value = false;
+  };
+
+  onMounted(chargementQuizz);
+</script>
diff --git a/src/components/custom/Mission/MissionQuizArticle.vue b/src/components/custom/Mission/MissionQuizArticle.vue
deleted file mode 100644
index 13ac98713..000000000
--- a/src/components/custom/Mission/MissionQuizArticle.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <ul class="list-style-none fr-p-0 fr-m-0">
-    <li v-for="mission in missions" :key="mission.titre" class="fr-mb-2w">
-      <MissionCarteBloquee v-if="mission.estBloquee" :picto-mission="mission.picto" />
-      <MissionCarteDone v-else-if="mission.aEteRealisee" :mission="mission" />
-      <MissionCarteQuizArticle v-else :quiz-article="mission" />
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-  import MissionCarteBloquee from '@/components/custom/Mission/MissionCarteBloquee.vue';
-  import MissionCarteDone from '@/components/custom/Mission/MissionCarteDone.vue';
-  import MissionCarteQuizArticle from '@/components/custom/Mission/MissionCarteQuizArticle.vue';
-  import { MissionQuizArticleViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
-
-  defineProps<{ missions: MissionQuizArticleViewModel[] }>();
-</script>
diff --git a/src/components/custom/Mission/MissionQuizArticles.vue b/src/components/custom/Mission/MissionQuizArticles.vue
new file mode 100644
index 000000000..3f5c027cd
--- /dev/null
+++ b/src/components/custom/Mission/MissionQuizArticles.vue
@@ -0,0 +1,58 @@
+<template>
+  <button
+    class="fr-mb-2w fr-btn fr-btn--icon-left fr-btn--tertiary-no-outline fr-icon-arrow-left-line"
+    @click="revenirEtapePrecedente"
+  >
+    Retour
+  </button>
+  Etape {{ etapeAffichee }} sur {{ nombreEtapesMission }}
+  <MissionArticle
+    v-if="missionAffichee.type === 'article'"
+    :key="etapeCourante"
+    :article-id="missionAffichee.idDuContenu"
+    :on-click-continuer="passerEtapeSuivante"
+  />
+  <MissionQuiz
+    v-if="missionAffichee.type === 'quiz'"
+    :key="etapeCourante"
+    :quiz-id="missionAffichee.idDuContenu"
+    :on-click-continuer="passerEtapeSuivante"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import MissionArticle from '@/components/custom/Mission/MissionArticle.vue';
+  import MissionQuiz from '@/components/custom/Mission/MissionQuiz.vue';
+  import { MissionQuizArticleViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
+
+  const props = defineProps<{
+    missions: MissionQuizArticleViewModel[];
+    onClickFinQuizArticle: () => void;
+    onClickRevenirEtapePrecedente: () => void;
+    etapeCouranteDefaut?: number;
+    nombreEtapesMission: number;
+    nombreDetapesPrecendentes: number;
+  }>();
+
+  const etapeCourante = ref<number>(props.etapeCouranteDefaut ?? 0);
+
+  const missionAffichee = computed(() => props.missions[etapeCourante.value]);
+  const etapeAffichee = computed(() => etapeCourante.value + 1 + props.nombreDetapesPrecendentes);
+
+  const passerEtapeSuivante = () => {
+    etapeCourante.value++;
+
+    if (etapeCourante.value === props.missions.length) {
+      props.onClickFinQuizArticle();
+    }
+  };
+
+  const revenirEtapePrecedente = () => {
+    etapeCourante.value--;
+
+    if (etapeCourante.value === -1) {
+      props.onClickRevenirEtapePrecedente();
+    }
+  };
+</script>
diff --git a/src/components/custom/Mission/MissionTerminee.vue b/src/components/custom/Mission/MissionTerminee.vue
index 9a6d87204..2a92a9dc0 100644
--- a/src/components/custom/Mission/MissionTerminee.vue
+++ b/src/components/custom/Mission/MissionTerminee.vue
@@ -1,82 +1,45 @@
 <template>
-  <div
-    class="fr-grid-row fr-grid-row--gutters align-items--center background--white border-radius--md shadow fr-p-3w border"
-  >
-    <img :src="urlImage" class="border-radius--md img-object-fit-cover" width="120" height="100" alt="" />
-    <h1 class="fr-col fr-h4 fr-m-0 fr-ml-1w">{{ titre }}</h1>
-    <span v-if="estTerminee" class="fr-ml-md-auto fr-mt-md-0 fr-mt-2w text--semi-bold text--bleu"
-      >Mission terminée</span
-    >
-    <button
-      v-else
-      class="fr-ml-md-auto fr-mt-md-0 fr-mt-2w fr-btn fr-btn--secondary"
-      :disabled="!estTerminable"
-      data-fr-opened="false"
-      :aria-controls="modaleId"
-      @click="terminerMission"
-    >
-      Terminer la mission
-    </button>
+  <div class="fr-container fr-py-6w">
+    <div class="bg-fin-mission fr-p-4w text--center border-radius--md">
+      <div class="conteneur-drapeaux fr-mb-2w">
+        <span class="fr-icon-flag-fill text--bleu" aria-hidden="true" />
+        <span class="fr-icon-flag-fill text--bleu big" aria-hidden="true" />
+        <span class="fr-icon-flag-fill text--bleu" aria-hidden="true" />
+      </div>
+      <h1 class="fr-mt-2w">
+        <span class="text--uppercase">Bravo !</span><br />
+        <span class="text--bleu fr-text--lead text--normal">
+          Vous avez terminé la mission<br />
+          "<span class="fr-text--bold">{{ titre }}</span
+          >" !
+        </span>
+      </h1>
+      <router-link to="" class="fr-btn">Retourner à la liste des missions</router-link>
+    </div>
   </div>
-
-  <Teleport to="body" v-if="estTerminable">
-    <Modale label="Modale de fin de mission" :id="modaleId" :radius="true" :is-footer-actions="false" size="s">
-      <template v-slot:contenu>
-        <div class="fr-grid-row fr-grid-row--gutters modale-mission-terminee">
-          <div class="fr-col-7">
-            <h1 :id="modaleId">Bravo !</h1>
-            <p class="fr-text--lg text--bleu fr-mb-0">Vous avez gagné votre carte mission</p>
-          </div>
-          <MissionCarteTerminee class="fr-col-5" :titre="titre" :urlImage="urlImage" />
-        </div>
-        <div class="fr-py-3w text--center">
-          <h2 class="fr-text--lg fr-mb-2w">Découvrez de nouvelles missions</h2>
-          <router-link
-            :to="`/thematique/${MenuThematiques.getThematiqueData(thematiqueId as ClefThematiqueAPI).url}`"
-            class="fr-btn fr-btn--lg"
-          >
-            Revenir à la thémathique
-          </router-link>
-        </div>
-      </template>
-    </Modale>
-  </Teleport>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import MissionCarteTerminee from '@/components/custom/Mission/MissionCarteTerminee.vue';
-  import Modale from '@/components/custom/Modale/Modale.vue';
-  import { MissionsRepositoryAxios } from '@/domaines/missions/adapters/missions.repository.axios';
-  import { TerminerMissionUsecase } from '@/domaines/missions/terminerMission.usecase';
-  import { ClefThematiqueAPI, MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
-  import { utilisateurStore } from '@/store/utilisateur';
+  defineProps<{ titre: string }>();
+</script>
 
-  const props = defineProps<{
-    urlImage: string;
-    titre: string;
-    estTerminee: boolean;
-    estTerminable: boolean;
-    thematiqueId: string;
-    missionId: string;
-  }>();
+<style scoped>
+  .bg-fin-mission {
+    background-image: url('/bg_fin-des-missions.webp');
+  }
 
-  const estTerminee = ref<boolean>(props.estTerminee);
+  .conteneur-drapeaux {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
 
-  const modaleId = 'terminer-mission-modale';
-  const terminerMission = async () => {
-    const terminerMissionUsecase = new TerminerMissionUsecase(new MissionsRepositoryAxios());
-    await terminerMissionUsecase.execute(props.missionId, utilisateurStore().utilisateur.id);
-    estTerminee.value = true;
-  };
-</script>
+  .fr-icon-flag-fill::before {
+    --icon-size: 1.5rem;
+  }
 
-<style scoped>
-  .modale-mission-terminee {
-    padding: 1rem;
-    flex-direction: row-reverse;
-    background-image: url('/bg_fin-de-mission.webp');
-    background-size: cover;
-    background-position: center;
+  .big::before {
+    --icon-size: 3.5rem;
   }
 </style>
diff --git a/src/components/custom/Quiz/PageQuizComposant.vue b/src/components/custom/Quiz/PageQuizComposant.vue
index dd1c5776c..566ff87ff 100644
--- a/src/components/custom/Quiz/PageQuizComposant.vue
+++ b/src/components/custom/Quiz/PageQuizComposant.vue
@@ -1,45 +1,27 @@
 <template>
-  <div class="fr-container fr-mb-6w">
-    <FilDAriane
-      :page-courante="`Question : ${quizViewModel.titre}`"
-      :page-hierarchie="
-        useRoute().params.thematiqueId && useRoute().params.missionId
-          ? [
-              {
-                label: `${MenuThematiques.getFromUrl(useRoute().params.thematiqueId as string).labelDansLeMenu}`,
-                url: `/thematique/${useRoute().params.thematiqueId}`,
-              },
-              {
-                label: `Mission`,
-                url: `/thematique/${useRoute().params.thematiqueId}/mission/${useRoute().params.missionId}`,
-              },
-            ]
-          : []
-      "
-    />
-
-    <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-12 fr-col-lg-8">
-        <h1>
-          <span class="fr-h2">Une question sur la thématique </span>
-          <span class="fr-h3">{{ quizViewModel.thematique }}</span>
-        </h1>
-        <div class="background--white border fr-p-2w border-radius--md">
-          <QuizQuestion
-            :questions="listeDesReponses"
-            :question="quizViewModel.question.intitule"
-            @quiz-termine="verifierLaReponse"
-          />
-          <QuizArticle
-            v-if="isValide"
-            :texte-explication-o-k="quizViewModel.question.texteExplicationOK"
-            :texte-explication-k-o="quizViewModel.question.texteExplicationKO"
-            :reponse-correcte="estBienRepondu"
-            :article-associe="articleAssocie"
-            :points="quizViewModel.nombreDePointsAGagner"
-            :quiz-id="quizViewModel.articleAssocie?.id!"
-          />
-        </div>
+  <div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-12 fr-col-lg-8">
+      <h1>
+        <span class="fr-h2">Une question sur la thématique </span>
+        <span class="fr-h3">{{ quizViewModel.thematique }}</span>
+      </h1>
+      <div class="background--white border fr-p-2w border-radius--md">
+        <QuizQuestion
+          :questions="listeDesReponses"
+          :question="quizViewModel.question.intitule"
+          @quiz-termine="verifierLaReponse"
+        />
+        <QuizArticle
+          v-if="isValide"
+          :texte-explication-o-k="quizViewModel.question.texteExplicationOK"
+          :texte-explication-k-o="quizViewModel.question.texteExplicationKO"
+          :reponse-correcte="estBienRepondu"
+          :article-associe="articleAssocie"
+          :points="quizViewModel.nombreDePointsAGagner"
+          :quiz-id="quizViewModel.articleAssocie?.id!"
+          :est-enchainement-mission="estEnchainementMission"
+          :on-click-continuer="onClickContinuer"
+        />
       </div>
     </div>
   </div>
@@ -47,15 +29,12 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useRoute } from 'vue-router';
   import QuizArticle from '@/components/custom/Quiz/QuizArticle.vue';
   import QuizQuestion from '@/components/custom/Quiz/QuizQuestion.vue';
-  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import { QuizViewModel } from '@/domaines/quiz/adapters/chargementQuiz.presenter.impl';
   import { QuizRepositoryAxios } from '@/domaines/quiz/adapters/quizRepository.axios';
   import { EnvoyerDonneesQuizInteractionUsecase } from '@/domaines/quiz/envoyerDonneesQuizInteraction.usecase';
   import { ArticleDuQuiz } from '@/domaines/quiz/ports/quizRepository';
-  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { ToDoListEventBusImpl } from '@/domaines/toDoList/toDoListEventBusImpl';
 
   const props = defineProps<{
@@ -64,6 +43,8 @@
     isModePrevisualisation: boolean;
     idQuiz: string;
     articleAssocie: ArticleDuQuiz | null;
+    estEnchainementMission?: boolean;
+    onClickContinuer?: () => void;
   }>();
 
   const isValide = ref<boolean>(false);
diff --git a/src/components/custom/Quiz/QuizArticle.vue b/src/components/custom/Quiz/QuizArticle.vue
index f1df30bb5..dca18bf6b 100644
--- a/src/components/custom/Quiz/QuizArticle.vue
+++ b/src/components/custom/Quiz/QuizArticle.vue
@@ -10,7 +10,9 @@
     <span class="fr-m-0 fr-text--bold fr-text--md">Comment avez-vous trouvé ce quiz ?</span>
     <Notation @rated="noterLeQuiz" />
   </div>
-  <router-link class="fr-btn fr-mt-3w" :to="useBoutonRetour().url"> {{ useBoutonRetour().label }}</router-link>
+  <button v-if="estEnchainementMission" class="fr-btn fr-mt-3w" @click="onClickContinuer">Continuer</button>
+
+  <router-link v-else class="fr-btn fr-mt-3w" :to="useBoutonRetour().url"> {{ useBoutonRetour().label }}</router-link>
 </template>
 
 <script setup lang="ts">
@@ -29,6 +31,8 @@
     articleAssocie: ArticleDuQuiz | null;
     points: string;
     quizId: string;
+    estEnchainementMission?: boolean;
+    onClickContinuer?: () => void;
   }>();
 
   const noterLeQuiz = note => {
diff --git a/src/components/pages/PageArticle.vue b/src/components/pages/PageArticle.vue
index 62db619a3..47d788ffc 100644
--- a/src/components/pages/PageArticle.vue
+++ b/src/components/pages/PageArticle.vue
@@ -1,20 +1,45 @@
 <template>
-  <PageArticleComposant v-if="articleAAfficher" :article="articleAAfficher" @update:article-modifie="onArticleModifie">
-  </PageArticleComposant>
+  <div class="fr-container fr-mb-6w">
+    <p v-if="isLoading">Chargement en cours ...</p>
+    <div v-else-if="articleAAfficher">
+      <FilDAriane
+        :page-courante="`Article: ${articleAAfficher.titre}`"
+        :page-hierarchie="
+          useRoute().params.thematiqueId && useRoute().params.missionId
+            ? [
+                {
+                  label: `${MenuThematiques.getFromUrl(useRoute().params.thematiqueId as string).labelDansLeMenu}`,
+                  url: `/thematique/${useRoute().params.thematiqueId}`,
+                },
+                {
+                  label: `Mission`,
+                  url: `/thematique/${useRoute().params.thematiqueId}/mission/${useRoute().params.missionId}`,
+                },
+              ]
+            : []
+        "
+      />
+      <PageArticleComposant :article="articleAAfficher" @update:article-modifie="onArticleModifie" />
+    </div>
+  </div>
 </template>
+
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
+  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import PageArticleComposant from '@/components/PageArticleComposant.vue';
   import { ArticleRepositoryAxios } from '@/domaines/article/adapters/article.repository.axios';
   import { PasserUnArticleCommeLuUsecase } from '@/domaines/article/passerUnArticleCommeLu.usecase';
   import { Article, RecupererArticleUsecase } from '@/domaines/article/recupererArticle.usecase';
+  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { ToDoListEventBusImpl } from '@/domaines/toDoList/toDoListEventBusImpl';
   import { RouteCommuneName } from '@/router';
   import { utilisateurStore } from '@/store/utilisateur';
 
   const router = useRouter();
 
+  const isLoading = ref<boolean>(true);
   const articleAAfficher = ref<Article | null>(null);
 
   onMounted(() => {
@@ -32,6 +57,7 @@
           idArticle,
           utilisateurId,
         );
+        isLoading.value = false;
       })
       .catch(async () => {
         await router.push({ name: RouteCommuneName.NOT_FOUND });
diff --git a/src/components/pages/PageMission.vue b/src/components/pages/PageMission.vue
index 3ca25c6e6..177130196 100644
--- a/src/components/pages/PageMission.vue
+++ b/src/components/pages/PageMission.vue
@@ -2,25 +2,80 @@
   <div v-if="isLoading">Chargement en cours ...</div>
   <div v-else-if="!missionViewModel">Une erreur est survenue</div>
   <div v-else class="fr-container fr-pb-4w">
-    <MissionPageComposant
+    <FilDAriane
+      :page-courante="`Mission : ${missionViewModel.titre}`"
+      :page-hierarchie="
+        useRoute().params.id && useRoute().params.missionId
+          ? [
+              {
+                label: `${MenuThematiques.getFromUrl(useRoute().params.id as string).labelDansLeMenu}`,
+                url: `/thematique/${useRoute().params.id}`,
+              },
+            ]
+          : []
+      "
+    />
+    <MissionIntroduction
+      v-if="etapeCourante.type === 'INTRO'"
+      :titre="missionViewModel.titre"
+      :url-image="missionViewModel.urlImage"
+      texte="lorem"
+      :tag="missionViewModel.tag"
+      :on-click-continuer="() => miseAJourEtatCourant('KYC', 0)"
+    />
+    <PageMissionQuestionsKyc
+      v-if="etapeCourante.type === 'KYC'"
       :mission-id="missionId"
-      :clef-thematique-a-p-i="clefThematiqueAPI"
-      :mission-view-model="missionViewModel"
+      :on-click-fin-k-y-c="() => miseAJourEtatCourant('QUIZ_ARTICLE', 0)"
+      :on-click-revenir-etape-precedente="() => miseAJourEtatCourant('INTRO', 0)"
+      :etape-courante-defaut="etapeCourante.etapeDansLetape"
+      :nombre-etapes-mission="missionViewModel.nombreEtapesMission"
+    />
+    <MissionQuizArticles
+      v-if="etapeCourante.type === 'QUIZ_ARTICLE'"
+      :missions="missionViewModel.articleEtQuiz"
+      :on-click-fin-quiz-article="() => miseAJourEtatCourant('DEFI', 0)"
+      :on-click-revenir-etape-precedente="() => miseAJourEtatCourant('KYC', missionViewModel!.kyc.length)"
+      :etape-courante-defaut="etapeCourante.etapeDansLetape"
+      :nombre-etapes-mission="missionViewModel.nombreEtapesMission"
+      :nombre-detapes-precendentes="missionViewModel?.kyc[0].progression.etapeTotal"
     />
+    <MissionDefis
+      v-if="etapeCourante.type === 'DEFI'"
+      :defis="missionViewModel.defis"
+      :on-click-retour="() => miseAJourEtatCourant('QUIZ_ARTICLE', missionViewModel!.articleEtQuiz.length - 1)"
+      :on-click-fin-defis="() => miseAJourEtatCourant('FIN', 0)"
+      :nombre-etapes-mission="missionViewModel.nombreEtapesMission"
+      :afficher-terminer-mission="missionViewModel.estTerminable && !missionViewModel.estTerminee"
+    />
+    <MissionTerminee v-if="etapeCourante.type === 'FIN'" :titre="missionViewModel.titre" />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, onUnmounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useRoute } from 'vue-router';
-  import MissionPageComposant from '@/components/custom/Mission/MissionPageComposant.vue';
+  import MissionDefis from '@/components/custom/Mission/MissionDefis.vue';
+  import MissionIntroduction from '@/components/custom/Mission/MissionIntroduction.vue';
+  import MissionQuizArticles from '@/components/custom/Mission/MissionQuizArticles.vue';
+  import MissionTerminee from '@/components/custom/Mission/MissionTerminee.vue';
+  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
+  import PageMissionQuestionsKyc from '@/components/pages/PageMissionQuestionsKyc.vue';
   import { MissionPresenterImpl, MissionViewModel } from '@/domaines/missions/adapters/mission.presenter.impl';
   import { MissionsRepositoryAxios } from '@/domaines/missions/adapters/missions.repository.axios';
-  import { MissionEvent, MissionEventBusImpl } from '@/domaines/missions/missionEventBus.impl';
   import { RecupererDetailMissionUsecase } from '@/domaines/missions/recupererDetailMission.usecase';
-  import { ClefThematiqueAPI, MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
+  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { utilisateurStore } from '@/store/utilisateur';
 
+  interface EtapeCourante {
+    etapeDansLetape: number;
+    type: EtatsPossible;
+  }
+
+  type EtatsPossible = 'INTRO' | 'KYC' | 'QUIZ_ARTICLE' | 'DEFI' | 'FIN';
+
+  const etapeCourante = ref<EtapeCourante>({ etapeDansLetape: 0, type: 'INTRO' });
+
   const isLoading = ref<boolean>(true);
   const missionViewModel = ref<MissionViewModel>();
 
@@ -29,26 +84,32 @@
   }
 
   const missionId = useRoute().params.missionId as string;
-  const clefThematiqueAPI = MenuThematiques.getFromUrl(useRoute().params.id as ClefThematiqueAPI)!.clefTechniqueAPI;
 
   const utilisateurId = utilisateurStore().utilisateur.id;
-  const subscriberName = 'PageMission';
 
   onMounted(async () => {
     const usecase = new RecupererDetailMissionUsecase(new MissionsRepositoryAxios());
     await usecase.execute(missionId, utilisateurId, new MissionPresenterImpl(onMissionPretAAffchee));
 
-    MissionEventBusImpl.getInstance().subscribe(
-      subscriberName,
-      MissionEvent.OBJECTIF_MISSION_POINTS_ONT_ETE_RECUPERE,
-      () => {
-        usecase.execute(missionId, utilisateurId, new MissionPresenterImpl(onMissionPretAAffchee));
-      },
-    );
     isLoading.value = false;
-  });
 
-  onUnmounted(() => {
-    MissionEventBusImpl.getInstance().unsubscribeToAllEvents(subscriberName);
+    const quizArticleAAfficher = missionViewModel.value?.articleEtQuiz.find(elem => elem.aEteRealisee);
+    if (missionViewModel.value?.estTerminee) {
+      miseAJourEtatCourant('INTRO', 0);
+    } else if (missionViewModel.value?.kyc[0].progression.etapeCourante === 0) {
+      miseAJourEtatCourant('INTRO', 0);
+    } else if (
+      missionViewModel.value?.kyc[0].progression.etapeCourante !== missionViewModel.value?.kyc[0].progression.etapeTotal
+    ) {
+      miseAJourEtatCourant('KYC', missionViewModel.value!.kyc[0].progression.etapeCourante);
+    } else if (!quizArticleAAfficher) {
+      miseAJourEtatCourant('QUIZ_ARTICLE', 0);
+    } else {
+      miseAJourEtatCourant('DEFI', 0);
+    }
   });
+
+  const miseAJourEtatCourant = (etat: EtatsPossible, indexEtape: number): void => {
+    etapeCourante.value = { etapeDansLetape: indexEtape, type: etat };
+  };
 </script>
diff --git a/src/components/pages/PageMissionQuestionsKyc.vue b/src/components/pages/PageMissionQuestionsKyc.vue
index 6b6aa7d17..a6b9ebda2 100644
--- a/src/components/pages/PageMissionQuestionsKyc.vue
+++ b/src/components/pages/PageMissionQuestionsKyc.vue
@@ -1,26 +1,14 @@
 <template>
   <div class="fr-container fr-mb-6w">
-    <FilDAriane
-      page-courante="Question pour mieux vous connaître"
-      :page-hierarchie="
-        useRoute().params.thematiqueId && useRoute().params.missionId
-          ? [
-              {
-                label: `${MenuThematiques.getFromUrl(useRoute().params.thematiqueId as string).labelDansLeMenu}`,
-                url: `/thematique/${useRoute().params.thematiqueId}`,
-              },
-              {
-                label: `Mission`,
-                url: `/thematique/${useRoute().params.thematiqueId}/mission/${useRoute().params.missionId}`,
-              },
-            ]
-          : []
-      "
-    />
-    <h1 class="fr-h2 fr-mb-1w">Question pour mieux vous connaître</h1>
     <CarteSkeleton v-if="isLoading" />
-    <div v-else-if="questionsViewModel" class="background--white border fr-p-4w border-radius--md">
-      <MissionQuestionsKyc v-model:questions-view-model="questionsViewModel" />
+    <div v-else-if="questionsViewModel" class="fr-p-4w">
+      <MissionQuestionsKyc
+        v-model:questions-view-model="questionsViewModel"
+        :on-click-fin-k-y-c="onClickFinKYC"
+        :on-click-revenir-etape-precedente="onClickRevenirEtapePrecedente"
+        :etape-courante-defaut="props.etapeCouranteDefaut"
+        :nombre-etapes-mission="props.nombreEtapesMission"
+      />
     </div>
     <div v-else>Une erreur est survenue</div>
   </div>
@@ -28,28 +16,32 @@
 
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
-  import { useRoute } from 'vue-router';
   import CarteSkeleton from '@/components/CarteSkeleton.vue';
   import MissionQuestionsKyc from '@/components/custom/Mission/MissionQuestionsKyc.vue';
-  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import {
     ListesQuestionsThematiquePresenter,
     QuestionsViewModel,
   } from '@/domaines/kyc/adapters/listeQuestionsThematique.presenter.impl';
   import { QuestionRepositoryAxios } from '@/domaines/kyc/adapters/question.repository.axios';
   import { RecupererQuestionsThematiqueUsecase } from '@/domaines/kyc/recupererQuestionsThematique.usecase';
-  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { utilisateurStore } from '@/store/utilisateur';
 
   const isLoading = ref<boolean>(true);
   const questionsViewModel = ref<QuestionsViewModel>();
 
+  const props = defineProps<{
+    missionId: string;
+    onClickFinKYC: () => void;
+    onClickRevenirEtapePrecedente: () => void;
+    etapeCouranteDefaut?: number;
+    nombreEtapesMission: number;
+  }>();
+
   onMounted(async () => {
-    const route = useRoute();
     const usecase = new RecupererQuestionsThematiqueUsecase(new QuestionRepositoryAxios());
-    usecase.execute(
+    await usecase.execute(
       utilisateurStore().utilisateur.id,
-      route.params.missionId as string,
+      props.missionId,
       new ListesQuestionsThematiquePresenter(vm => (questionsViewModel.value = vm)),
     );
     isLoading.value = false;
diff --git a/src/components/pages/PageQuiz.vue b/src/components/pages/PageQuiz.vue
index ea0b02e6e..32bdb5dc5 100644
--- a/src/components/pages/PageQuiz.vue
+++ b/src/components/pages/PageQuiz.vue
@@ -1,24 +1,44 @@
 <template>
   <div v-if="isLoading">Chargement...</div>
   <div v-else-if="!quizViewModel">Une erreur est survenue</div>
-  <PageQuizComposant
-    v-else
-    :quiz-view-model="quizViewModel"
-    :id-utilisateur="store.utilisateur.id"
-    :is-mode-previsualisation="false"
-    :id-quiz="idQuiz"
-    :article-associe="quizViewModel.articleAssocie"
-  >
-  </PageQuizComposant>
+  <div v-else class="fr-container fr-pb-6w">
+    <FilDAriane
+      :page-courante="`Question : ${quizViewModel.titre}`"
+      :page-hierarchie="
+        useRoute().params.thematiqueId && useRoute().params.missionId
+          ? [
+              {
+                label: `${MenuThematiques.getFromUrl(useRoute().params.thematiqueId as string).labelDansLeMenu}`,
+                url: `/thematique/${useRoute().params.thematiqueId}`,
+              },
+              {
+                label: `Mission`,
+                url: `/thematique/${useRoute().params.thematiqueId}/mission/${useRoute().params.missionId}`,
+              },
+            ]
+          : []
+      "
+    />
+    <PageQuizComposant
+      :quiz-view-model="quizViewModel"
+      :id-utilisateur="store.utilisateur.id"
+      :is-mode-previsualisation="false"
+      :id-quiz="idQuiz"
+      :article-associe="quizViewModel.articleAssocie"
+    >
+    </PageQuizComposant>
+  </div>
 </template>
 
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
   import { useRoute } from 'vue-router';
   import PageQuizComposant from '@/components/custom/Quiz/PageQuizComposant.vue';
+  import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import { ChargementQuizPresenterImpl, QuizViewModel } from '@/domaines/quiz/adapters/chargementQuiz.presenter.impl';
   import { QuizRepositoryAxios } from '@/domaines/quiz/adapters/quizRepository.axios';
   import { ChargementQuizUsecase } from '@/domaines/quiz/chargementQuiz.usecase';
+  import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
   import { utilisateurStore } from '@/store/utilisateur';
 
   const quizViewModel = ref<QuizViewModel>();
diff --git a/src/domaines/missions/adapters/mission.presenter.impl.ts b/src/domaines/missions/adapters/mission.presenter.impl.ts
index 3da38e33c..25efd5b35 100644
--- a/src/domaines/missions/adapters/mission.presenter.impl.ts
+++ b/src/domaines/missions/adapters/mission.presenter.impl.ts
@@ -1,6 +1,7 @@
 import { MissionItem, DetailMission } from '../recupererDetailMission.usecase';
 import { MissionPresenter } from '@/domaines/missions/ports/missionPresenter';
 import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
+import { TagStyle, TagThematique } from '@/domaines/thematiques/TagThematique';
 import { RouteArticlePath } from '@/router/articles/routes';
 import { RouteDefiPath } from '@/router/defis/routes';
 import { RouteKycPath } from '@/router/kyc/routes';
@@ -41,6 +42,7 @@ export interface MissionKycViewModel extends MissionBaseViewModel {
 
 export interface MissionQuizArticleViewModel extends MissionBaseViewModel {
   idDuContenu: string;
+  type: 'quiz' | 'article';
 }
 export interface MissionViewModel {
   titre: string;
@@ -50,6 +52,11 @@ export interface MissionViewModel {
   kyc: MissionKycViewModel[];
   articleEtQuiz: MissionQuizArticleViewModel[];
   defis: MissionDefiViewModel[];
+  tag: {
+    label: string;
+    style: TagStyle;
+  };
+  nombreEtapesMission: number;
 }
 
 export class MissionPresenterImpl implements MissionPresenter {
@@ -61,6 +68,10 @@ export class MissionPresenterImpl implements MissionPresenter {
       urlImage: mission.urlImage,
       estTerminee: mission.estTerminee,
       estTerminable: mission.estTerminable,
+      tag: {
+        label: MenuThematiques.getThematiqueData(mission.clefApiThematique).labelDansLeMenu,
+        style: TagThematique.getTagThematiqueUtilitaire(mission.clefApiThematique),
+      },
       kyc: [
         {
           id: mission.items.filter(item => item.type === InteractionType.KYC)[0].id,
@@ -97,6 +108,8 @@ export class MissionPresenterImpl implements MissionPresenter {
             mission.missionId,
           ),
         ),
+      nombreEtapesMission:
+        mission.items.length - mission.items.filter(item => item.type === InteractionType.DEFIS).length + 1,
     });
   }
 
@@ -111,6 +124,7 @@ export class MissionPresenterImpl implements MissionPresenter {
       url: this.determineUrl(item, thematiqueUrl, missionId),
       picto: this.determinePicto(item),
       pointAEteRecolte: item.pointAEteRecolte,
+      type: item.type === InteractionType.ARTICLE ? 'article' : 'quiz',
     };
   }
 
diff --git a/tests/missions/recupererDetailMission.usecase.spec.ts b/tests/missions/recupererDetailMission.usecase.spec.ts
index 290ede879..8d61961fc 100644
--- a/tests/missions/recupererDetailMission.usecase.spec.ts
+++ b/tests/missions/recupererDetailMission.usecase.spec.ts
@@ -8,6 +8,7 @@ import {
 import { expect } from 'vitest';
 import { InteractionType } from '@/shell/interactionType';
 import { ClefThematiqueAPI } from '@/domaines/thematiques/MenuThematiques';
+import { TagStyle } from '@/domaines/thematiques/TagThematique';
 
 const mission: DetailMission = {
   titre: 'Thematique 1',
@@ -81,8 +82,17 @@ describe("Fichier de tests concernant la récupération d'une mission", () => {
     // THEN
     function expectation(mission) {
       expect(mission).toStrictEqual<MissionViewModel>({
+        nombreEtapesMission: 3,
         estTerminee: false,
         estTerminable: false,
+        tag: {
+          label: 'Me nourrir',
+          style: {
+            backgroundColor: '#E3FBAF',
+            color: '#175202',
+            emoji: '🥗',
+          },
+        },
         articleEtQuiz: [
           {
             id: 'id1',
@@ -94,6 +104,7 @@ describe("Fichier de tests concernant la récupération d'une mission", () => {
             url: '/thematique/me-nourrir/mission/1/quiz/1',
             picto: '/ic_mission_article.svg',
             pointAEteRecolte: false,
+            type: 'quiz',
           },
         ],
         defis: [