diff --git a/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
new file mode 100644
index 000000000..b06dba5b9
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
@@ -0,0 +1,47 @@
+import {createApp} from 'vue';
+import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
+import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
+  let
+    periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
+
+  const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
+  fetchResults(url).then(suggested => {
+    const app = createApp({
+      components: {
+        SetReferrer,
+      },
+      template:
+        '<set-referrer :suggested="this.suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
+      data() {
+        return {
+          suggested, periodId,
+        }
+      },
+      methods: {
+        onReferrerSet(ref) {
+          const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
+          if (bloc === null) {
+            console.error('bloc not found');
+            return;
+          }
+
+          const label = bloc.querySelector('[data-referrer-text]');
+
+          if (label === null) {
+            console.error('label not found');
+            return;
+          }
+
+          label.textContent = ref.text;
+          label.classList.remove('chill-no-data-statement');
+
+        }
+      }
+    });
+
+    app.mount(el);
+
+  })
+})
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
new file mode 100644
index 000000000..049dabff6
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
@@ -0,0 +1,44 @@
+<template>
+<ul class="list-suggest add-items" v-if="this.suggested.length > 0">
+  <li v-for="r in this.suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
+</ul>
+</template>
+
+<script>
+
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+  name: "SetReferrer",
+  props: {
+    suggested: {
+      type: Array,
+      required: false,
+      default: [],
+    },
+    periodId: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ['referrerSet'],
+  methods: {
+    setReferrer: function(ref) {
+      const url = `/api/1.0/person/accompanying-course/${this.periodId}.json`;
+      const body = { type: "accompanying_period", user: { id: ref.id, type: ref.type }};
+
+      return makeFetch('PATCH', url, body)
+          .then((response) => {
+            this.$emit('referrerSet', ref);
+          })
+          .catch((error) => {
+            throw error;
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
index f346c6bab..b53631e86 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
@@ -1,4 +1,4 @@
-<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}" {% if itemAttrs is defined %}{{ itemAttrs }}{% endif %}>
     <div class="item-row">
         <div class="wrap-header">
             <div class="wh-row">
@@ -45,9 +45,9 @@
                     {% if chill_accompanying_periods.fields.user == 'visible'  %}
                         {% if period.user %}
                             <abbr class="referrer" title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans }}:</abbr>
-                            {{ period.user|chill_entity_render_box }}
+                            <span data-referrer-text="data-referrer-text">{{ period.user|chill_entity_render_box }}</span>
                         {% else %}
-                            <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
+                            <span class="chill-no-data-statement" data-referrer-text="data-referrer-text">{{ 'No accompanying user'|trans }}</span>
                         {% endif %}
                     {% endif %}
                 </div>
diff --git a/src/Bundle/ChillPersonBundle/chill.webpack.config.js b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
index 0b83f8e41..d57483992 100644
--- a/src/Bundle/ChillPersonBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
@@ -14,6 +14,8 @@ module.exports = function(encore, entries)
     encore.addEntry('vue_accourse_work_edit', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkEdit/index.js');
     encore.addEntry('vue_visgraph', __dirname + '/Resources/public/vuejs/VisGraph/index.js');
 
+    encore.addEntry('mod_set_referrer', __dirname + '/Resources/public/mod/AccompanyingPeriod/setReferrer.js');
+
     encore.addEntry('page_household_edit_metadata', __dirname + '/Resources/public/page/household_edit_metadata/index.js');
     encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
     encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');