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 9f1729dd4..8f2f8dbba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -21,14 +21,19 @@
 
 <div v-else-if="action === 'edit' || action === 'create'">
 
+   <div class="form-floating mb-3">
+      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <label for="lastname">{{ $t('person.lastname') }}</label>
+   </div>
+
    <div class="form-floating mb-3">
       <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
-   <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
-      <label for="lastname">{{ $t('person.lastname') }}</label>
+   <div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
+      <input class="form-control form-control-lg" :id="a.key" v-model="altNames[i]" />
+      <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
 
    <!--  TODO fix placeholder if undefined
@@ -43,11 +48,6 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
-   <div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
-      <input class="form-control form-control-lg" :id="a.key" v-model="altNames[i]" />
-      <label :for="a.key">{{ a.labels.fr }}</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"
@@ -76,6 +76,15 @@
          aria-describedby="mobilenumber" />
    </div>
 
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
+      <input class="form-control form-control-lg"
+         v-model="email"
+         v-bind:placeholder="$t('person.email')"
+         v-bind:aria-label="$t('person.email')"
+         aria-describedby="email" />
+   </div>
+
 </div>
 </template>
 
@@ -145,6 +154,10 @@ export default {
          set(value) { this.person.mobilenumber = value; },
          get() { return this.person.mobilenumber; }
       },
+      email: {
+         set(value) { this.person.email = value; },
+         get() { return this.person.email; }
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
index 43224ef6e..9682c1d95 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -30,6 +30,7 @@ const personMessages = {
          phonenumber: "Téléphone",
          mobilenumber: "Mobile",
          altnames: "Autres noms",
+         email: "Courriel",
          gender: {
             title: "Genre",
             placeholder: "Choisissez le genre de l'usager",