diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php
index 9bc732d87..05a1934e6 100644
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php
@@ -121,7 +121,7 @@ class AccompanyingCourseController extends Controller
      * @Route(
      *     "/{_locale}/person/api/1.0/accompanying-course/{accompanying_period_id}/participation.{_format}",
      *     name="chill_person_accompanying_course_api_add_participation",
-     *     methods={"POST"},
+     *     methods={"POST","DELETE"},
      *     format="json",
      *     requirements={
      *         "_format": "json",
@@ -129,7 +129,7 @@ class AccompanyingCourseController extends Controller
      * )
      * @ParamConverter("accompanyingCourse", options={"id": "accompanying_period_id"})
      */
-    public function addParticipationAPI(Request $request, AccompanyingPeriod $accompanyingCourse, $_format): Response
+    public function participationAPI(Request $request, AccompanyingPeriod $accompanyingCourse, $_format): Response
     {
         switch ($_format) {
             case 'json':
@@ -146,7 +146,9 @@ class AccompanyingCourseController extends Controller
         }
 
         // TODO add acl
-        $accompanyingCourse->addPerson($person);
+        $participation = ($request->getMethod() === 'POST') ?
+            $accompanyingCourse->addPerson($person) : $accompanyingCourse->removePerson($person);
+
         $errors = $this->validator->validate($accompanyingCourse);
 
         if ($errors->count() > 0) {
@@ -156,6 +158,6 @@ class AccompanyingCourseController extends Controller
 
         $this->getDoctrine()->getManager()->flush();
 
-        return new JsonResponse();
+        return $this->json($participation);
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
index 18ee535b8..fcf0c6cda 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@@ -351,7 +351,7 @@ class AccompanyingPeriod
     {
         foreach ($this->participations as $participation) {
             /** @var AccompanyingPeriodParticipation $participation */
-            if ($person === $participation->getPerson()) {
+            if ($person === $participation->getPerson() && $participation->getClosingDate() === NULL) {
                 return $participation;
         }}
 
@@ -369,25 +369,26 @@ class AccompanyingPeriod
     /**
      * Add Person
      */
-    public function addPerson(Person $person = null): self
+    public function addPerson(Person $person = null): AccompanyingPeriodParticipation
     {
         $participation = new AccompanyingPeriodParticipation($this, $person);
         $this->participations[] = $participation;
 
-        return $this;
+        return $participation;
     }
 
     /**
      * Remove Person
      */
-    public function removePerson(Person $person): void
+    public function removePerson(Person $person): AccompanyingPeriodParticipation
     {
         $participation = $this->participationsContainsPerson($person);
 
         if (! null === $participation) {
             $participation->setEndDate(new \DateTimeImmutable('now'));
-            $this->participations->removeElement($participation);
         }
+        
+        return $participation;
     }
 
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 2c9f2b545..dc94159cf 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -4,7 +4,13 @@ const
    , accompanying_period_id = window.accompanyingCourseId //tmp
 ;
 
-// 1. chill_person_accompanying_course_api_show (GET)
+/*
+* Endpoint chill_person_accompanying_course_api_show
+* method GET, get AccompanyingCourse Object
+*
+*  @accompanying_period_id___  integer 
+*  @TODO var is not used but necessary in method signature
+*/
 let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
    return fetch(url)
@@ -14,11 +20,17 @@ let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
       });
 };
 
-// 2. chill_person_accompanying_course_api_add_participation (POST)
-let postParticipation = (accompanying_period_id, person_id) => {
+/*
+* Endpoint chill_person_accompanying_course_api_add_participation, 
+* method POST, add a participation to the accompanyingCourse
+*
+*  @accompanying_period_id integer - id of accompanyingCourse
+*  @person_id integer - id of person
+*/
+let postParticipation = (accompanying_period_id, person_id, method) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
    return fetch(url, {
-         method: 'POST',
+         method: method,
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
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 c3a868950..515df1169 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -30,22 +30,31 @@ let getDataPromise = getAccompanyingCourse(id)
                   participation => participation !== item
                );
             },
-            addParticipation(state, item) {
-               //console.log('add new item');
-               state.accompanying_course.participations.push(item);
+            addParticipation(state, participation) {
+               console.log('### mutation: add participation', participation);
+               state.accompanying_course.participations.push(participation);
+               console.log('count participations from state', state.accompanying_course.participations.length);
+               
+               let item = { id: participation.person.id, text: participation.person.firstName + ' ' + participation.person.lastName };
+               console.log('item', item);
+               console.log('avant', state.add_persons.selected.length);
+               state.add_persons.selected = state.add_persons.selected.filter(value => value !== item);
+               console.log('après', state.add_persons.selected.length);
+            },
+            resetQuery() {
+               console.log('### mutation: reset query');
+               state.add_persons.query = "";
             },
             setQuery(state, query) {
                //console.log('q=', query);
                state.add_persons = Object.assign({}, state.add_persons, query);
             },
-            loadSuggestions(state, suggested) {
-               console.log('suggested', suggested);
-               // doublons si on ré-affiche des suggestions avec certains selected
-               //suggested.results.filter(selected => selected !== suggested.results);
+            loadSuggestions(state, suggested) { 
+               // doublons qd on ré-affiche des suggestions avec certains selected
                state.add_persons.suggested = suggested;
             },
             updateSelected(state, value) {
-               console.log('update value', value);
+               console.log('update selected values', value);
                state.add_persons.selected = value;
             }
          },
@@ -54,18 +63,23 @@ let getDataPromise = getAccompanyingCourse(id)
                commit('removeParticipation', payload);
             },
             addParticipation({ commit }, payload) {
-               commit('addParticipation', payload);               
-               postParticipation(id, payload.id).catch((error) => {
-                  commit('removeParticipation', payload);
-                  state.errorMsg.push(error.message); // result action ??  
-               }); 
+               console.log('## action: fetch post participation: payload', payload.id);
+               postParticipation(id, payload.id, 'POST')
+                  .then(participation => new Promise((resolve, reject) => {
+                     commit('addParticipation', participation);
+                     resolve();
+                  }))
+                  .catch((error) => { // si y a une erreur
+                     //commit('removeParticipation', payload);
+                     state.errorMsg.push(error.message); 
+                  }); 
             },
             setQuery({ commit }, payload) {
                commit('setQuery', payload);
                if (payload.query.length >= 3) {
                   searchPersons(payload.query)
                      .then(suggested => new Promise((resolve, reject) => {
-                        commit('loadSuggestions', suggested.results); // <====
+                        commit('loadSuggestions', suggested.results);
                         resolve();
                   }));
                } else {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
index ed288d092..d5ac91ac5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
@@ -3,6 +3,11 @@ const
    format = 'json'
 ;
 
+/* 
+* Endpoint chill_person_search, method GET, get a list of persons
+* 
+*  @query string - the query to search for
+*/
 let searchPersons =  (query) => {
    let url = `/${locale}/search.${format}?name=person_regular&q=${query}`;
    return fetch(url)
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 7367d1406..5f7eacc82 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -28,7 +28,7 @@
          </template>
                
          <template v-slot:body>
-            <!--span class="discret">Selection: {{ selected }}</span-->
+            <span class="discret">Selection: {{ selected }}</span>
             <div class="results">
                <div class="count">
                   <span v-if="suggestedCounter > 0" style="">
@@ -61,6 +61,8 @@ import { mapState } from 'vuex';
 import Modal from 'ChillPersonAssets/vuejs/_components/Modal';
 import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
 
+const SimpsonId = 10000;
+
 export default {
    name: 'AddPersons',
    components: {
@@ -75,14 +77,6 @@ export default {
          }
       }
    },
-   methods: {
-      openModal() {
-         this.modal.showModal = true;
-         this.$nextTick(function() {
-            this.$refs.search.focus();
-         })
-      }
-   },
    computed: {
       ...mapState(['add_persons']),
       query: {
@@ -109,20 +103,21 @@ export default {
       selectedAndSuggested() {
          return [...new Set([...this.selected, ...this.suggested])];
       },
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+         this.$nextTick(function() {
+            this.$refs.search.focus();
+         })
+      },
       addPersons() {
-         console.log('add persons');
-         // code here
-         /*
-         addPerson() {
-            console.log('[wip] opening add persons modal');
-            this.$store.dispatch('addParticipation', {
-               id: SimpsonId++,
-               person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
-               startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
-               endDate: { datetime: "1975-09-28T00:00:00+0100" }, 
-            })
-         },
-         */
+         console.log('@@@ CLICK button addPersons')
+         this.selected.forEach(function(item) {
+               console.log('# dispatch action for each item', item); 
+               this.$store.dispatch('addParticipation', item);
+            }, this
+         );
          this.modal.showModal = false;
       }
    }