diff --git a/src/Bundle/ChillPersonBundle/Entity/Person.php b/src/Bundle/ChillPersonBundle/Entity/Person.php
index a477f9adb..3843a960f 100644
--- a/src/Bundle/ChillPersonBundle/Entity/Person.php
+++ b/src/Bundle/ChillPersonBundle/Entity/Person.php
@@ -1567,7 +1567,7 @@ class Person implements HasCenterInterface, TrackCreationInterface, TrackUpdateI
      *
      * @return $this
      */
-    public function setCenter(Center $center): self
+    public function setCenter(?Center $center): self
     {
         $modification = new DateTimeImmutable('now');
 
@@ -1577,7 +1577,11 @@ class Person implements HasCenterInterface, TrackCreationInterface, TrackUpdateI
             }
         }
 
-        $this->centerHistory[] = $new = new PersonCenterHistory($this, $center, $modification);
+        if (null === $center) {
+            return $this;
+        }
+
+        $this->centerHistory[] =  new PersonCenterHistory($this, $center, $modification);
 
         return $this;
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/index.js
index c9f5bb111..d2b271e17 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/index.js
@@ -2,6 +2,8 @@ import { createApp } from 'vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import { appMessages } from './js/i18n';
 import { store } from './store';
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
 import App from './App.vue';
 
@@ -12,5 +14,11 @@ const app = createApp({
 })
 .use(store)
 .use(i18n)
+.use(VueToast, {
+ position: "bottom-right",
+ type: "error",
+ duration: 5000,
+ dismissible: true
+})
 .component('app', App)
 .mount('#household_members_editor');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
index 338094122..c9c77991f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
@@ -1,3 +1,5 @@
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
+
 /*
 * GET a person by id
 */
@@ -22,6 +24,8 @@ const getCivilities = () =>
       throw Error('Error with request resource response');
    });
 
+const getCentersForPersonCreation = () => makeFetch('GET', '/api/1.0/person/creation/authorized-centers', null);
+
 /*
 * POST a new person
 */
@@ -59,6 +63,7 @@ const patchPerson = (id, body) => {
 };
 
 export {
+    getCentersForPersonCreation,
    getPerson,
    getPersonAltNames,
    getCivilities,
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 4f8909233..8694da651 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,18 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+  <div class="form-floating mb-3" v-if="showCenters && config.centers.length > 1">
+    <select
+         class="form-select form-select-lg"
+         id="center"
+         v-model="center"
+         >
+         <option selected disabled>{{ $t('person.center.placeholder') }}</option>
+         <option v-for="c in config.centers" :value="c" :key="c.id" >{{ c.name }}</option>
+    </select>
+    <label>{{ $t('person.center.title') }}</label>
+  </div>
+
    <div class="form-floating mb-3">
       <select
          class="form-select form-select-lg"
@@ -166,7 +178,7 @@
 </template>
 
 <script>
-import { getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCentersForPersonCreation, getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 
@@ -182,13 +194,18 @@ export default {
       return {
          person: {
             type: 'person',
+            lastName: '',
+            firstName: '',
             altNames: [],
-            addressId: null
+            addressId: null,
+            center: null,
          },
          config: {
             altNames: [],
-            civilities: []
+            civilities: [],
+            centers: [],
          },
+         showCenters: false, // NOTE: must remains false if the form is not in create mode
          showAddressFormValue: false,
          addAddress: {
             options: {
@@ -254,6 +271,19 @@ export default {
          set(value) { this.showAddressFormValue = value; },
          get() { return this.showAddressFormValue; }
       },
+      center: {
+         set(value) {
+           console.log('will set center', value);
+           this.person.center = {id: value.id, type: value.type};
+         },
+         get() {
+           const center = this.config.centers.find(c => this.person.center !== null && this.person.center.id === c.id);
+
+           console.log('center get', center);
+
+           return typeof center === 'undefined' ? null : center;
+         },
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -295,23 +325,35 @@ export default {
                this.config.civilities = civilities.results;
             }
          });
-
       if (this.action !== 'create') {
          this.loadData();
+      } else {
+        getCentersForPersonCreation()
+            .then(params => {
+              this.config.centers = params.centers;
+              this.showCenters = params.showCenters;
+
+              if (this.showCenters && this.config.centers.length === 1) {
+                this.person.center = this.config.centers[0];
+              }
+            });
       }
    },
    methods: {
       checkErrors(e) {
          this.errors = [];
-         if (!this.person.lastName) {
+         if (this.person.lastName === "") {
             this.errors.push("Le nom ne doit pas être vide.");
          }
-         if (!this.person.firstName) {
+         if (this.person.firstName === "") {
             this.errors.push("Le prénom ne doit pas être vide.");
          }
          if (!this.person.gender) {
             this.errors.push("Le genre doit être renseigné");
          }
+         if (this.showCenters && this.person.center === null) {
+           this.errors.push("Le centre doit être renseigné");
+         }
       },
       loadData() {
          getPerson(this.id)
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
index d7ac10676..721ac8d0e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -47,6 +47,10 @@ const personMessages = {
             create_address: "Ajouter une adresse",
             show_address_form: "Ajouter une adresse pour un usager non suivi et seul dans un ménage",
             warning: "Un nouveau ménage va être créé. L'usager sera membre de ce ménage."
+         },
+         center: {
+            placeholder: "Choisissez un centre",
+            title: "Centre",
          }
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"