diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 480b882dc..c1727eaf5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -2,6 +2,7 @@
    <accompanying-course></accompanying-course>
    <persons-associated></persons-associated>
    <requestor></requestor>
+   <test></test>
 </template>
 
 <script>
@@ -10,13 +11,15 @@ 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';
 
 export default {
    name: 'App',
    components: { 
       AccompanyingCourse,
       PersonsAssociated, 
-      Requestor
+      Requestor,
+      Test
    },
    computed: mapState([
       'accompanyingCourse'
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 6086ab515..9931535fc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -4,55 +4,6 @@
    {{ accompanyingCourse.id }}
    {{ accompanyingCourse.remark }}<br><br>
    
-   <!-- TESTS AREA -->
-   <ul class="record_actions">
-      <li>
-         <button class="sc-button bt-create" @click="modal1.showModal = true">
-            {{ $t('action.show_modal') }}
-         </button>
-      </li>
-      <li>
-         <button class="sc-button bt-create" @click="modal2.showModal = true">
-            Ouvrir une seconde modale
-         </button>
-      </li>
-   </ul>
-   
-   <teleport to="body">
-   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
-      <template v-slot:header>
-         <h3 class="modal-title">Le titre de ma modale</h3>
-      </template>
-      <template v-slot:body>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-      </template>
-      <template v-slot:footer>
-         <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
-            {{ $t('action.next')}}</button>
-      </template>
-   </modal>
-   </teleport>
-   
-   <teleport to="body">
-   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
-      <template v-slot:header>
-         <h3 class="modal-title">Une autre modale</h3>
-      </template>
-      <template v-slot:body>
-         <p>modal 2</p>
-      </template>
-      <template v-slot:footer>
-         <button class="sc-button green" @click="modal2.showModal = false">
-            {{ $t('action.save')}}</button>
-      </template>
-   </modal>
-   </teleport>
-   <!-- END TESTS -->
    
 </div>
 </template>
@@ -67,13 +18,9 @@ export default {
    },
    data() {
       return {
-         modal1: {
+         modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
-         },
-         modal2: {
-            showModal: false,
-            modalDialogClass: "modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
          }
       }
    },
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
new file mode 100644
index 000000000..7f3a49f1c
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
@@ -0,0 +1,81 @@
+<template>
+<div class="vue-component">
+   <h3>Tests</h3>
+   
+   <!-- Modal -->
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-create" @click="modal1.showModal = true">
+            {{ $t('action.show_modal') }}
+         </button>
+      </li>
+      <li>
+         <button class="sc-button bt-create" @click="modal2.showModal = true">
+            Ouvrir une seconde modale
+         </button>
+      </li>
+   </ul>
+   
+   <teleport to="body">
+   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
+      <template v-slot:header>
+         <h3 class="modal-title">Le titre de ma modale</h3>
+      </template>
+      <template v-slot:body>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+      </template>
+      <template v-slot:footer>
+         <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
+            {{ $t('action.next')}}</button>
+      </template>
+   </modal>
+   </teleport>
+   
+   <teleport to="body">
+   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
+      <template v-slot:header>
+         <h3 class="modal-title">Une autre modale</h3>
+      </template>
+      <template v-slot:body>
+         <p>modal 2</p>
+      </template>
+      <template v-slot:footer>
+         <button class="sc-button green" @click="modal2.showModal = false">
+            {{ $t('action.save')}}</button>
+      </template>
+   </modal>
+   </teleport>
+   <!-- END Modal -->
+   
+</div>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal'
+
+export default {
+   name: 'Test',
+   components: {
+      Modal,
+   },
+   data() {
+      return {
+         modal1: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
+         },
+         modal2: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
+         }
+      }
+   },
+   computed: {
+   }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 53600da1c..3c40f04f3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -119,7 +119,7 @@ export default {
          })
       },
       addNewPersons() {
-         console.log('@@@ CLICK button addPersons')
+         console.log('@@@ CLICK button addNewPersons')
          this.selected.forEach(function(item) {
                //console.log('# dispatch action for each item', item); 
                this.$store.dispatch('addParticipation', item);