diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index c0093fa77..b16e8828a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -2,6 +2,29 @@
   <div class="vue-component">
     <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
 
+    <teleport to="body">
+      <modal v-if="modal.showModal"
+             :modalDialogClass="modal.modalDialogClass"
+             @close="cancelChange">
+        <template v-slot:header>
+          <h3 class="modal-title">{{ $t('confirm.title') }}</h3>
+        </template>
+
+        <template v-slot:body-head>
+          <div class="modal-body">
+            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })"></p>
+          </div>
+        </template>
+
+        <template v-slot:footer>
+          <button class="btn btn-save"
+                  @click.prevent="this.confirmReferrer">
+            {{ $t('confirm.ok_referrer')}}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+
     <div>
 
       <label class="col-form-label" for="selectJob">
@@ -35,6 +58,7 @@
           :searchable="true"
           :placeholder="$t('referrer.placeholder')"
           v-model="value"
+          @select="updateReferrer"
           :options="users"
           :select-label="$t('multiselect.select_label')"
           :deselect-label="$t('multiselect.deselect_label')"
@@ -78,16 +102,24 @@ import VueMultiselect from 'vue-multiselect';
 import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
 import {mapState, mapGetters} from 'vuex';
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 export default {
   name: "Referrer",
   components: {
     UserRenderBoxBadge,
     VueMultiselect,
+    Modal
   },
   data() {
     return {
-      jobs: []
+      jobs: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl"
+      },
+      value: this.$store.state.accompanyingCourse.user,
+      confirmed: false
     }
   },
   computed: {
@@ -118,22 +150,6 @@ export default {
             });
       }
     },
-    value: {
-      get() {
-        return this.$store.state.accompanyingCourse.user;
-      },
-      set(value) {
-        console.log('set referrer', value);
-        this.$store.dispatch('updateReferrer', value)
-            .catch(({name, violations}) => {
-              if (name === 'ValidationException' || name === 'AccessException') {
-                violations.forEach((violation) => this.$toast.open({message: violation}));
-              } else {
-                this.$toast.open({message: 'An error occurred'})
-              }
-            });
-      }
-    },
   },
   mounted() {
     this.getJobs();
@@ -141,6 +157,7 @@ export default {
   methods: {
     updateReferrer(value) {
       this.value = value;
+      this.toggleModal();
     },
     getJobs() {
       const url = '/api/1.0/main/user-job.json';
@@ -159,12 +176,27 @@ export default {
       const url = `/api/1.0/main/whoami.json`;
       makeFetch('GET', url)
           .then(user => {
-            this.value = user
+            // this.value = user
+            this.updateReferrer(user);
           })
-      /*.catch((error) => {
-         commit('catchError', error);
-         this.$toast.open({message: error.body})
-      })*/
+    },
+    toggleModal() {
+      this.modal.showModal = !this.modal.showModal;
+    },
+    confirmReferrer() {
+      this.$store.dispatch('updateReferrer', this.value)
+          .catch(({name, violations}) => {
+            if (name === 'ValidationException' || name === 'AccessException') {
+              violations.forEach((violation) => this.$toast.open({message: violation}));
+            } else {
+              this.$toast.open({message: 'An error occurred'})
+            }
+          });
+      this.toggleModal()
+    },
+    cancelChange() {
+      this.value = this.$store.state.accompanyingCourse.user
+      this.toggleModal()
     }
   }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 170e19bf9..8bbd5c4ca 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -139,8 +139,10 @@ const appMessages = {
          set_a_scope: "indiquez au moins un service",
          sure: "Êtes-vous sûr ?",
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
+         sure_referrer: "Êtes-vous sûr de vouloir assigner ce parcours à <b>{referrer}</b>",
          ok: "Confirmer le parcours",
          delete: "Supprimer le parcours",
+         ok_referrer: "Confirmer le référent",
          no_suggested_referrer: "Il n'y a aucun référent qui puisse être suggéré pour ce parcours. Vérifiez la localisation du parcours, les métiers et service indiqués. Si les données sont correctes, vous pouvez confirmer ce parcours.",
          one_suggested_referrer: "Un unique référent peut être suggéré pour ce parcours",
          choose_suggested_referrer: "Voulez-vous le désigner directement ?",