diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
index ec6e5ced9..ebb36ae39 100644
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
@@ -211,8 +211,13 @@ $workflow = $this->registry->get($accompanyingPeriod);
 
         $total = $this->referralAvailable->countReferralAvailable($period);
         $paginator = $this->getPaginatorFactory()->create($total);
-        $users = $this->referralAvailable->findReferralAvailable($period, $paginator->getItemsPerPage(),
-            $paginator->getCurrentPageFirstItemNumber());
+
+        if (0 < $total) {
+            $users = $this->referralAvailable->findReferralAvailable($period, $paginator->getItemsPerPage(),
+                $paginator->getCurrentPageFirstItemNumber());
+        } else {
+            $users = [];
+        }
 
         return $this->json(new Collection($users, $paginator), Response::HTTP_OK,
             [], [ AbstractNormalizer::GROUPS => [ 'read' ]]);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index ee4c3e11b..c3b554dc4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -1,3 +1,5 @@
+import { fetchResults } from 'ChillMainAssets/lib/api/download.js';
+
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity
 * method GET/HEAD, get AccompanyingCourse Instance
@@ -216,8 +218,6 @@ const addScope = (id, scope) => {
 
 const removeScope = (id, scope) => {
   const url = `/api/1.0/person/accompanying-course/${id}/scope.json`;
-  console.log(url);
-  console.log(scope);
 
   return fetch(url, {
     method: 'DELETE',
@@ -235,6 +235,12 @@ const removeScope = (id, scope) => {
     });
 };
 
+const getAvailableReferrals = (course) => {
+  const url = `/api/1.0/person/accompanying-course/${course.id}/referral-availables.json`;
+
+  return fetchResults(url);
+}
+
 export {
    getAccompanyingCourse,
    patchAccompanyingCourse,
@@ -249,4 +255,5 @@ export {
    postSocialIssue,
    addScope,
    removeScope,
+   getAvailableReferrals
 };
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 d1ecfbed1..169d8c3bb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -15,7 +15,7 @@
          v-bind:searchable="true"
          v-bind:placeholder="$t('referrer.placeholder')"
          v-model="value"
-         v-bind:options="options"
+         v-bind:options="referrersAvailable"
          @select="updateReferrer">
       </VueMultiselect>
    </div>
@@ -45,26 +45,13 @@ import { mapState } from 'vuex';
 export default {
    name: "Referrer",
    components: { VueMultiselect },
-   data() {
-      return {
-         options: []
-      }
-   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.user,
+         referrersAvailable: state => state.referrersAvailable,
       }),
    },
-   mounted() {
-      this.getOptions();
-   },
    methods: {
-      getOptions() {
-         getUsers().then(response => new Promise((resolve, reject) => {
-            this.options = response.results;
-            resolve();
-         }));
-      },
       updateReferrer(value) {
          //console.log('value', value);
          this.$store.dispatch('updateReferrer', value);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index ca1a89aa9..e944aa496 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -10,6 +10,7 @@ import { getAccompanyingCourse,
    postSocialIssue,
    addScope,
    removeScope,
+   getAvailableReferrals,
 } from '../api';
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
@@ -38,6 +39,8 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             scopesAtStart: accompanyingCourse.scopes.map(scope => scope),
             // the scope states at server side
             scopesAtBackend: accompanyingCourse.scopes.map(scope => scope),
+            // the users which are available for referrer
+            referrersAvailable: [],
          },
          getters: {
             isParticipationValid(state) {
@@ -170,6 +173,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('value', value);
                state.accompanyingCourse.user = value;
             },
+            setReferrersAvailables(state, users) {
+               state.referrersAvailable = users;
+            },
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
                state.accompanyingCourse.step = response.step;
@@ -272,6 +278,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                })).catch((error) => { commit('catchError', error) });
             },
             patchOnTheFly({ commit }, payload) {
+               // TODO should be into the dedicated component, no ? JF
                console.log('## action: patch OnTheFly', payload);
                let body = { type: payload.type };
                if (payload.type === 'person') {
@@ -313,10 +320,12 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             },
             toggleEmergency({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
-               .then(course => new Promise((resolve, reject) => {
-                  commit('toggleEmergency', course.emergency);
-                  resolve();
-               })).catch((error) => { commit('catchError', error) });
+                  .then(course => new Promise((resolve, reject) => {
+                     commit('toggleEmergency', course.emergency);
+                     return dispatch('setRefererresAvailable');
+                  }))
+                 .then(() => Promise.resolve())
+                 .catch((error) => { commit('catchError', error) });
             },
             toggleConfidential({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", confidential: payload })
@@ -387,11 +396,15 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                      // check/uncheck in the UI. I do not know of to avoid it.
                      commit('setScopes', scopes);
                      return Promise.resolve();
+                  }).then(() => {
+                     return dispatch('fetchReferrersAvailable');
                   });
                } else {
                   return dispatch('setScopes', state.scopesAtStart).then(() => {
                      commit('setScopes', scopes);
                      return Promise.resolve();
+                  }).then(() => {
+                     return dispatch('fetchReferrersAvailable');
                   });
                }
             },
@@ -434,7 +447,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            updateSocialIssues({ state, commit }, { payload, body, method }) {
+            updateSocialIssues({ state, commit, dispatch }, { payload, body, method }) {
                //console.log('## action: payload', { payload, body, method });
                postSocialIssue(id, body, method)
                .then(response => new Promise((resolve, reject) => {
@@ -445,6 +458,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   return getAccompanyingCourse(state.accompanyingCourse.id);
                }).then(accompanying_course => {
                   commit('refreshSocialIssues', accompanying_course.socialIssues);
+                  dispatch('fetchReferrersAvailable');
                })
                    .catch((error) => { commit('catchError', error) });
             },
@@ -462,7 +476,21 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            updateLocation({ commit }, payload) {
+            async fetchReferrersAvailable({ state, commit}) {
+               let users = await getAvailableReferrals(state.accompanyingCourse);
+               commit('setReferrersAvailables', users);
+               let userIds = users.map(u => u.id);
+               if (
+                 null !== state.accompanyingCourse.user
+                 && !state.accompanyingCourse.confidential
+                 && !state.accompanyingCourse.step === 'DRAFT'
+               ) {
+                  if (!userIds.include(state.accompanyingCourse.user.id)) {
+                     commit('updateReferrer', null);
+                  }
+               }
+            },
+            updateLocation({ commit, dispatch }, payload) {
                //console.log('## action: updateLocation', payload.locationStatusTo);
                let body = { 'type': payload.target, 'id': payload.targetId };
                let location = {};
@@ -484,6 +512,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                         personLocation: accompanyingCourse.personLocation
                      });
                      resolve();
+                     dispatch('fetchReferrersAvailable');
                   })).catch((error) => { commit('catchError', error) });
             },
             confirmAccompanyingCourse({ commit }) {
@@ -498,6 +527,8 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             }
          }
       });
+
+      store.dispatch('fetchReferrersAvailable');
       resolve(store);
    }));