diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index 74466733a..b78483bc5 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,16 +1,54 @@
 <template>
-  hello
+  
+  <teleport to="#add-persons">
+     <add-persons 
+        buttonTitle="activities.add_persons"
+        modalTitle="activities.add_persons"
+        v-bind:key="addPersons.key"
+        v-bind:options="addPersons.options"
+        @addNewPersons="addNewPersons"
+        ref="addPersons"> <!-- to cast child method -->
+     </add-persons>
+  </teleport>
+ 
 </template>
 
 <script>
 import { mapState } from 'vuex';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 
 export default {
    name: "App",
-   components: {},
+   components: {
+      AddPersons
+   },
+   data() {
+      return {
+         addPersons: {
+            key: 'activity',
+            options: {
+               type: ['person', 'thirdparty'],
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
    computed: mapState([
       'activity'
-   ])
+   ]),
+   methods: {
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               //this.$store.dispatch('addResource', item);
+               console.log('item', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+      }
+   }
 }
 </script>
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index b38767780..91699e320 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -1,8 +1,15 @@
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+
 const appMessages = {
    fr: {
-      
+      activities: {
+         add_persons: "Ajouter des personnes"
+      }
    }
 }
+
+Object.assign(appMessages.fr, personMessages.fr);
+
 export {
    appMessages
 };
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
index 902278874..068ae2db7 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
@@ -37,6 +37,8 @@
     {{ form_row(edit_form.users) }}
 {% endif %}
 
+<div id="add-persons"></div>
+
 <h2 class="chill-red">{{ 'Activity data'|trans }}</h2>
 
 {%- if edit_form.date is defined -%}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
index 83d8a6c58..44897a331 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
@@ -38,6 +38,8 @@
     {{ form_row(form.users) }}
 {% endif %}
 
+<div id="add-persons"></div>
+
 <h2 class="chill-red">{{ 'Activity data'|trans }}</h2>
 
 {%- if form.date is defined -%}