diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index c1727eaf5..8c3b24b9e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -2,7 +2,8 @@
    <accompanying-course></accompanying-course>
    <persons-associated></persons-associated>
    <requestor></requestor>
-   <test></test>
+   <interlocutors></interlocutors>
+   <!--test></test-->
 </template>
 
 <script>
@@ -11,7 +12,8 @@ import { mapState } from 'vuex'
 import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
-import Test from './components/Test.vue';
+import Interlocutors from './components/Interlocutors.vue';
+//import Test from './components/Test.vue';
 
 export default {
    name: 'App',
@@ -19,7 +21,8 @@ export default {
       AccompanyingCourse,
       PersonsAssociated, 
       Requestor,
-      Test
+      Interlocutors,
+      //Test
    },
    computed: mapState([
       'accompanyingCourse'
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Interlocutors.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Interlocutors.vue
new file mode 100644
index 000000000..cc3fcd89e
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Interlocutors.vue
@@ -0,0 +1,78 @@
+<template>
+<div class="vue-component">
+  
+   <h3>{{ $t('interlocutors.title')}}</h3>
+   
+   <label>{{ $tc('interlocutors.counter', counter) }}</label>
+   <table class="rounded">
+      <thead>
+         <tr>
+            <th class="chill-orange">{{ $t('interlocutors.firstname') }}</th>
+            <th class="chill-orange">{{ $t('interlocutors.lastname') }}</th>
+            <th class="chill-orange">{{ $t('action.actions') }}</th>
+         </tr>
+      </thead>
+      <tbody>
+         <!--person-item
+            v-for="interlocutor in interlocutors"
+            v-bind:interlocutor="interlocutor"
+            v-bind:key="interlocutor.id"
+            @remove="removeInterlocutor"
+         </person-item-->
+      </tbody>
+   </table>
+   
+   <add-persons 
+     buttonTitle="interlocutor.add_interlocutor"
+     modalTitle="interlocutor.add_interlocutor"
+     v-bind:key="addPersons.key"
+     v-bind:options="addPersons.options"
+     @addNewPersons="addNewPersons"
+     ref="addPersons"> <!-- to cast child method -->
+   </add-persons>
+
+</div>
+</template>
+
+<script>
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
+
+export default {
+   name: 'Interlocutors',
+   components: {
+      AddPersons,
+   },
+   data() {
+      return {
+         addPersons: {
+            key: 'interlocutors',
+            options: {
+               type: ['person', 'thirdparty'],
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   },
+   methods: {
+      removeInterlocutor() {
+         console.log('@@ CLICK remove interlocutor: item');
+         this.$store.dispatch('removeInterlocutor');
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addInterlocutor', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+      }
+   }
+}
+</script>