diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
index 5295e25e4..3b7c67dc9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
@@ -4,18 +4,21 @@
       :class="classAction"
       :title="$t(titleAction)"
       @click="openModal">
+      {{ buttonText }}
    </a>
   
    <teleport to="body">
       <modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
-   
+         
          <template v-slot:header>
-            <h3 class="modal-title">{{ $t(modalTitle) }}</h3>
+            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
          </template>
          <template v-slot:body>
-            
+            {{ action }}
+            {{ type }}
+            {{ id }}
          </template>
          <template v-slot:footer>
             <button class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
@@ -36,7 +39,7 @@ export default {
    components: {
       Modal
    },
-   props: ['type', 'id', 'action'],
+   props: ['type', 'id', 'action', 'buttonText'],
    data() {
       return {
          modal: {
@@ -50,20 +53,30 @@ export default {
          switch (this.action) {
             case 'show':
                return 'bt-show';
-            case 'create':
-               return 'bt-create';
             case 'edit':
                return 'bt-update';
+            case 'create':
+               return 'bt-create';
          }
       },
       titleAction() {
          switch (this.action) {
             case 'show':
                return 'action.show';
-            case 'create':
-               return 'action.create';
             case 'edit':
                return 'action.edit';
+            case 'create':
+               return 'action.create';
+         }
+      },
+      titleModal() {
+         switch (this.action) {
+            case 'show':
+               return 'onthefly.show.' + this.type;
+            case 'edit':
+               return 'onthefly.edit.' + this.type;
+            case 'create':
+               return 'onthefly.create.title';
          }
       },
    },
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 319378d7e..be809b322 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -46,6 +46,20 @@ const messages = {
          previous: "Précédent",
          top: "Haut",
          bottom: "Bas",
+      },
+      onthefly: {
+         show: {
+            person: "Détails de l'usager",
+            thirdparty: "Détails du tiers"
+         },
+         edit: {
+            person: "Modifier un usager",
+            thirdparty: "Modifier un tiers"
+         },
+         create: {
+            button: "Créer \"{q}\"",
+            title: "Saisir une nouvelle personne à la volée",
+         },         
       }
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
index 85ed43bce..7e3abd1ba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
@@ -14,15 +14,15 @@
       <ul class="record_actions">
          <li>
             <on-the-fly
-               :type="participation.person.type"
-               :id="participation.person.id"
+               v-bind:type="participation.person.type"
+               v-bind:id="participation.person.id"
                action="show">
             </on-the-fly>
          </li>
          <li>
             <on-the-fly
-               :type="participation.person.type"
-               :id="participation.person.id"
+               v-bind:type="participation.person.type"
+               v-bind:id="participation.person.id"
                action="edit">
             </on-the-fly>
          </li>
@@ -35,7 +35,7 @@
          <li>
             <button v-if="!participation.endDate"
                class="sc-button bt-remove"
-               :title="$t('action.remove')" 
+               v-bind:title="$t('action.remove')" 
                @click.prevent="$emit('close', participation)">
             </button>
             <button v-else class="sc-button bt-remove disabled"></button>
@@ -54,14 +54,6 @@ export default {
       OnTheFly
    },
    props: ['participation'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.participation.person.id + '/general',
-            edit: '/fr/person/' + this.participation.person.id + '/general/edit'
-         }
-      }
-   },
-   emits: ['remove', 'close']
+   emits: ['remove', 'close'],
 }
 </script>
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 32fbb86c2..67b12a14a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -41,7 +41,18 @@
 
          <ul class="record_actions">
             <li>
-               <a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
+               <on-the-fly
+                  v-bind:type="accompanyingCourse.requestor.type"
+                  v-bind:id="accompanyingCourse.requestor.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  v-bind:type="accompanyingCourse.requestor.type"
+                  v-bind:id="accompanyingCourse.requestor.id"
+                  action="edit">
+               </on-the-fly>
             </li>
          </ul>
       </div>
@@ -76,12 +87,14 @@
 </template>
 
 <script>
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 
 export default {
    name: 'Requestor',
    components: {
       AddPersons,
+      OnTheFly
    },
    data() {
       return {
@@ -107,13 +120,6 @@ export default {
          get() {
             return this.$store.state.accompanyingCourse.requestorAnonymous;
          }
-      },
-      url() {
-         return (this.accompanyingCourse.requestor.type === 'person') ? {
-            show: `/fr/person/${this.accompanyingCourse.requestor.id}/general`,
-         } : {
-            show: `/fr/thirdparty/thirdparty/${this.accompanyingCourse.requestor.id}/show`,
-         }
       }
    },
    methods: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index ffec23ddf..9b9316fec 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -21,24 +21,25 @@
    <td>
       <ul class="record_actions">
          <li>
-            <a class="sc-button bt-show" target="_blank"
-               :href="url.show"
-               :title="$t('action.show')">
-            </a>
+            <on-the-fly
+               v-bind:type="resource.resource.type"
+               v-bind:id="resource.resource.id"
+               action="show">
+            </on-the-fly>
          </li>
          <li>
-            <a class="sc-button bt-update" target="_blank"
-               :href="url.edit"
-               :title="$t('action.edit')">
-            </a>
+            <on-the-fly
+               v-bind:type="resource.resource.type"
+               v-bind:id="resource.resource.id"
+               action="edit">
+            </on-the-fly>
          </li>
          <li>
             <button
                class="sc-button bt-remove"
-               :title="$t('action.remove')" 
+               v-bind:title="$t('action.remove')" 
                @click.prevent="$emit('remove', resource)">
             </button>
-            
          </li>
       </ul>
    </td>
@@ -46,23 +47,14 @@
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'ResourceItem',
+   components: {
+      OnTheFly
+   },
    props: ['resource'],
-   emits: ['remove'],
-   computed: {
-      type() {
-         return this.resource.resource.type;
-      },
-      url() {
-         return (this.type === 'person') ? {
-            show: `/fr/person/${this.resource.resource.id}/general`,
-            edit: `/fr/person/${this.resource.resource.id}/general/edit`
-         } : {
-            show: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/show`,
-            edit: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/update`
-         }
-      }
-   }
+   emits: ['remove']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index a37f93e7e..d50c1b1ff 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -65,9 +65,14 @@
                   @updateSelected="updateSelected">
                </person-suggestion>
 
-               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
-                  {{ $t('action.create') }} "{{ query }}"
-               </button>
+               <div class="create-button">
+                  <on-the-fly
+                     v-if="query.length >= 3" 
+                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     action="create">
+                  </on-the-fly>
+               </div>
+               
             </div>
          </template>
 
@@ -84,6 +89,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
@@ -92,6 +98,7 @@ export default {
    components: {
       Modal,
       PersonSuggestion,
+      OnTheFly
    },
    props: [
       'buttonTitle',
@@ -251,4 +258,8 @@ export default {
          }
       }
    }
+   .create-button > a {
+      margin-top: 0.5em;
+      margin-left: 2.6em;
+   }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
index af5b13b16..eff860f91 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -14,22 +14,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_person') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="person"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionPerson',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.item.result.person_id + '/general',
-            edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
index 37cee7852..5a4aa9de6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -15,22 +15,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_thirdparty') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="thirdparty"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionThirdParty',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/show',
-            edit: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>