diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
index 8a77ac48f..cc9c090e2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
@@ -23,7 +23,7 @@
 // @import "bootstrap/scss/button-group";
 // @import "bootstrap/scss/input-group";
 // @import "bootstrap/scss/custom-forms";
-// @import "bootstrap/scss/nav";
+@import "bootstrap/scss/nav";
 // @import "bootstrap/scss/navbar";
 // @import "bootstrap/scss/card";
 // @import "bootstrap/scss/breadcrumb";
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
index 3b7c67dc9..238b97851 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
@@ -15,11 +15,29 @@
          <template v-slot:header>
             <h3 class="modal-title">{{ $t(titleModal) }}</h3>
          </template>
-         <template v-slot:body>
-            {{ action }}
-            {{ type }}
-            {{ id }}
+         
+         <template v-slot:body v-if="type === 'person'">
+            <on-the-fly-person
+               v-bind:id="id"
+               v-bind:type="type"
+               v-bind:action="action">
+            </on-the-fly-person>
          </template>
+         
+         <template v-slot:body v-else-if="type === 'thirdparty'">
+            <on-the-fly-thirdparty
+               v-bind:id="id"
+               v-bind:type="type"
+               v-bind:action="action">
+            </on-the-fly-thirdparty>
+         </template>
+         
+         <template v-slot:body v-else>
+            <on-the-fly-create
+               v-bind:action="action">
+            </on-the-fly-create>
+         </template>
+            
          <template v-slot:footer>
             <button class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
                {{ $t('action.save')}}
@@ -33,11 +51,17 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import OnTheFlyPerson from './OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
+import OnTheFlyCreate from './OnTheFly/Create.vue';
 
 export default {
    name: 'OnTheFly',
    components: {
-      Modal
+      Modal,
+      OnTheFlyPerson,
+      OnTheFlyThirdparty,
+      OnTheFlyCreate
    },
    props: ['type', 'id', 'action', 'buttonText'],
    data() {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
new file mode 100644
index 000000000..eea25ad6d
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
@@ -0,0 +1,73 @@
+<template>   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('person') }">
+            <label for="person">
+               <input type="radio" name="person" v-model="radioType" value="person">
+               {{ $t('onthefly.create.person') }}
+            </label>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+            <label for="thirdparty">
+               <input type="radio" name="thirdparty" v-model="radioType" value="thirdparty">
+               {{ $t('onthefly.create.thirdparty') }}
+            </label>
+         </a>
+      </li>
+   </ul>
+   
+   <div class="my-4">
+      <on-the-fly-person
+         v-if="type === 'person'"
+         v-bind:action="action">
+      </on-the-fly-person>
+      
+      <on-the-fly-thirdparty
+         v-if="type === 'thirdparty'"
+         v-bind:action="action">
+      </on-the-fly-thirdparty>
+   </div>      
+</template>
+
+<script>
+import OnTheFlyPerson from './Person.vue';
+import OnTheFlyThirdparty from './ThirdParty.vue';
+
+export default {
+   name: "OnTheFlyCreate",
+   props: ['action'], 
+   components: {
+      OnTheFlyPerson,
+      OnTheFlyThirdparty
+   },
+   data() {
+      return {
+         type: 'person'
+      }
+   },
+   computed: {
+      radioType: {
+         set(type) {
+            this.type = type;
+         },
+         get() {
+            return this.type;
+         }
+      }
+   },
+   methods: {
+      isActive(tab) {
+         return (this.type === tab) ? true : false; 
+      }
+      
+   }
+}
+</script>
+
+<style lang="css" scoped>
+label {
+   cursor: pointer;
+}
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
new file mode 100644
index 000000000..78bf4fdf9
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -0,0 +1,22 @@
+<template>
+   <div v-if="action === 'show'">
+      show
+      person
+      {{ id }}
+   </div>
+   <div v-else-if="action === 'edit' || action === 'create'">
+      {{ action }}
+      person 
+      {{ id }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: "OnTheFlyPerson",
+   props: ['id', 'type', 'action']
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
new file mode 100644
index 000000000..768954778
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -0,0 +1,22 @@
+<template>
+   <div v-if="action === 'show'">
+      show
+      thirdparty
+      {{ id }}
+   </div>
+   <div v-else-if="action === 'edit' || action === 'create'">
+      {{ action }}
+      thirdparty 
+      {{ id }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: "OnTheFlyThirdParty",
+   props: ['id', 'type', 'action']
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index be809b322..ed8d8154f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -58,7 +58,9 @@ const messages = {
          },
          create: {
             button: "Créer \"{q}\"",
-            title: "Saisir une nouvelle personne à la volée",
+            title: "Saisir à la volée…",
+            person: "un nouvel usager",
+            thirdparty: "un nouveau tiers"
          },         
       }
    }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 79c325c88..f5741b34a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -74,7 +74,7 @@ const appMessages = {
       comment: {
          title: "Observations",
          label: "Ajout d'une note",
-         content: "Rédigez une première note...",
+         content: "Rédigez une première note…",
          created_by: "créé par {0}, le {1}" 
       },
       confirm: {