diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
index 669c225dd..5949a1e56 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
@@ -210,7 +210,6 @@ export default {
          let
             type = this.type,
             data = {} ;
-
          switch (type) {
             case 'person':
                data = this.$refs.castPerson.$data.person;
@@ -238,7 +237,7 @@ export default {
                      if (typeof data.civility !== 'undefined' && null !== data.civility) {
                         data.civility = data.civility !== null ? {type: 'chill_main_civility', id: data.civility.id} : null;
                      }
-                     if (typeof data.civility !== 'undefined' && null !== data.profession) {
+                     if (typeof data.profession !== 'undefined' && null !== data.profession) {
                         data.profession = data.profession !== null ? {type: 'third_party_profession', id: data.profession.id} : null;
                      }
                      // console.log('onthefly data', data);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
index 20ed1c8da..338094122 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
@@ -14,8 +14,13 @@ const getPersonAltNames = () =>
    fetch('/api/1.0/person/config/alt_names.json').then(response => {
       if (response.ok) { return response.json(); }
       throw Error('Error with request resource response');
-   });;
+   });
 
+const getCivilities = () =>
+   fetch('/api/1.0/main/civility.json').then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
 
 /*
 * POST a new person
@@ -56,6 +61,7 @@ const patchPerson = (id, body) => {
 export {
    getPerson,
    getPersonAltNames,
+   getCivilities,
    postPerson,
    patchPerson
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 90505a1e2..47cae34b1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -277,7 +277,7 @@ export default {
          }
       },
       saveFormOnTheFly({ type, data }) {
-         // console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
+         console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
          if (type === 'person') {
             makeFetch('POST', '/api/1.0/person/person.json', data)
                .then(response => {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
index e6fa85902..940b4de41 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -87,6 +87,20 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+   <div class="form-floating mb-3">
+      <select
+         class="form-select form-select-lg"
+         id="civility"
+         v-model="civility"
+         >
+         <option selected disabled >{{ $t('person.civility.placeholder') }}</option>
+         <option v-for="c in config.civilities" :value="c.id" :key="c.id">
+            {{ c.name.fr }}
+         </option>
+      </select>
+      <label>{{ $t('person.civility.title') }}</label>
+   </div>
+
    <div class="input-group mb-3">
       <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
       <input type="date"
@@ -134,7 +148,7 @@
 </template>
 
 <script>
-import { getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
@@ -151,7 +165,8 @@ export default {
             altNames: []
          },
          config: {
-            altNames: []
+            altNames: [],
+            civilities: []
          },
          errors: []
       }
@@ -171,6 +186,10 @@ export default {
          set(value) { this.person.gender = value; },
          get() { return this.person.gender; }
       },
+      civility: {
+         set(value) { this.person.civility = value; },
+         get() { return this.person.civility; }
+      },
       birthDate: {
          set(value) {
             if (this.person.birthdate) {
@@ -230,6 +249,13 @@ export default {
          .then(altNames => {
             this.config.altNames = altNames;
          });
+      getCivilities()
+         .then(civilities => {
+            if ('results' in civilities) {
+               this.config.civilities = civilities.results;
+            }
+         });
+
       if (this.action !== 'create') {
          this.loadData();
       }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
index 7b6a6373d..894a506c6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -38,6 +38,10 @@ const personMessages = {
             man: "Masculin",
             neuter: "Neutre, non binaire",
             undefined: "Non renseigné"
+         },
+         civility: {
+            title: "Civilité",
+            placeholder: "Choisissez la civilité",
          }
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"