diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index 4809a5fae..bcd8f2db1 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,7 +1,7 @@
 <template>
-   <concerned-groups v-if="hasPerson"></concerned-groups>
-   <social-issues-acc v-if="hasSocialIssues"></social-issues-acc>
-   <location v-if="hasLocation"></location>
+  <concerned-groups v-if="hasPerson" />
+  <social-issues-acc v-if="hasSocialIssues" />
+  <location v-if="hasLocation" />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
index 7ec62d07d..83f6be91c 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -1,38 +1,49 @@
 <template>
-   <teleport to="#add-persons" v-if="isComponentVisible">
-
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc
-               v-for="bloc in contextPersonsBlocs"
-               v-bind:key="bloc.key"
-               v-bind:bloc="bloc"
-               v-bind:blocWidth="getBlocWidth"
-               v-bind:setPersonsInBloc="setPersonsInBloc">
-         </persons-bloc>
-      </div>
-      <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
-         <ul class="list-suggest add-items inline">
-               <li v-for="(p, i) in suggestedEntities" @click="addSuggestedEntity(p)" :key="`suggestedEntities-${i}`">
-                  <person-text v-if="p.type === 'person'" :person="p"></person-text>
-                  <span v-else>{{ p.text }}</span>
-               </li>
-         </ul>
-      </div>
-
-      <ul class="record_actions">
-         <li class="add-persons">
-            <add-persons
-               buttonTitle="activity.add_persons"
-               modalTitle="activity.add_persons"
-               v-bind:key="addPersons.key"
-               v-bind:options="addPersonsOptions"
-               @addNewPersons="addNewPersons"
-               ref="addPersons">
-            </add-persons>
-         </li>
+  <teleport
+    to="#add-persons"
+    v-if="isComponentVisible"
+  >
+    <div
+      class="flex-bloc concerned-groups"
+      :class="getContext"
+    >
+      <persons-bloc
+        v-for="bloc in contextPersonsBlocs"
+        :key="bloc.key"
+        :bloc="bloc"
+        :bloc-width="getBlocWidth"
+        :set-persons-in-bloc="setPersonsInBloc"
+      />
+    </div>
+    <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="(p, i) in suggestedEntities"
+          @click="addSuggestedEntity(p)"
+          :key="`suggestedEntities-${i}`"
+        >
+          <person-text
+            v-if="p.type === 'person'"
+            :person="p"
+          />
+          <span v-else>{{ p.text }}</span>
+        </li>
       </ul>
+    </div>
 
-   </teleport>
+    <ul class="record_actions">
+      <li class="add-persons">
+        <add-persons
+          button-title="activity.add_persons"
+          modal-title="activity.add_persons"
+          :key="addPersons.key"
+          :options="addPersonsOptions"
+          @add-new-persons="addNewPersons"
+          ref="addPersons"
+        />
+      </li>
+    </ul>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
index 11b8063a3..ed2086648 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
@@ -1,11 +1,17 @@
 <template>
-   <li>
-      <span :title="person.text" @click.prevent="$emit('remove', person)">
-         <span class="chill_denomination">
-            <person-text :person="person" :isCut="true"></person-text>
-         </span>
+  <li>
+    <span
+      :title="person.text"
+      @click.prevent="$emit('remove', person)"
+    >
+      <span class="chill_denomination">
+        <person-text
+          :person="person"
+          :is-cut="true"
+        />
       </span>
-   </li>
+    </span>
+  </li>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
index 13ad54027..7c96cf718 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
@@ -1,21 +1,24 @@
 <template>
-   <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
-      <div class="item-row">
-         <div class="item-col">
-            <h4>{{ $t(bloc.title) }}</h4>
-         </div>
-         <div class="item-col">
-            <ul class="list-suggest remove-items">
-               <person-badge
-                  v-for="person in bloc.persons"
-                  v-bind:key="person.id"
-                  v-bind:person="person"
-                  @remove="removePerson">
-               </person-badge>
-            </ul>
-         </div>
+  <div
+    class="item-bloc"
+    :style="{ 'flex-basis': blocWidth }"
+  >
+    <div class="item-row">
+      <div class="item-col">
+        <h4>{{ $t(bloc.title) }}</h4>
       </div>
-   </div>
+      <div class="item-col">
+        <ul class="list-suggest remove-items">
+          <person-badge
+            v-for="person in bloc.persons"
+            :key="person.id"
+            :person="person"
+            @remove="removePerson"
+          />
+        </ul>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
index 42a69e4c5..71a4621d7 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
@@ -1,33 +1,32 @@
 <template>
-    <teleport to="#location">
-        <div class="mb-3 row">
-            <label :class="locationClassList">
-                {{ $t("activity.location") }}
-            </label>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    name="selectLocation"
-                    id="selectLocation"
-                    label="name"
-                    track-by="id"
-                    open-direction="top"
-                    :multiple="false"
-                    :searchable="true"
-                    :placeholder="$t('activity.choose_location')"
-                    :custom-label="customLabel"
-                    :select-label="$t('multiselect.select_label')"
-                    :deselect-label="$t('multiselect.deselect_label')"
-                    :selected-label="$t('multiselect.selected_label')"
-                    :options="availableLocations"
-                    group-values="locations"
-                    group-label="locationGroup"
-                    v-model="location"
-                >
-                </VueMultiselect>
-                <new-location v-bind:availableLocations="availableLocations"></new-location>
-            </div>
-        </div>
-    </teleport>
+  <teleport to="#location">
+    <div class="mb-3 row">
+      <label :class="locationClassList">
+        {{ $t("activity.location") }}
+      </label>
+      <div class="col-sm-8">
+        <VueMultiselect
+          name="selectLocation"
+          id="selectLocation"
+          label="name"
+          track-by="id"
+          open-direction="top"
+          :multiple="false"
+          :searchable="true"
+          :placeholder="$t('activity.choose_location')"
+          :custom-label="customLabel"
+          :select-label="$t('multiselect.select_label')"
+          :deselect-label="$t('multiselect.deselect_label')"
+          :selected-label="$t('multiselect.selected_label')"
+          :options="availableLocations"
+          group-values="locations"
+          group-label="locationGroup"
+          v-model="location"
+        />
+        <new-location :available-locations="availableLocations" />
+      </div>
+    </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
index 568c8747a..d7247a003 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
@@ -1,78 +1,135 @@
 <template>
-    <div>
-        <ul class="record_actions">
-            <li>
-                <a class="btn btn-sm btn-create" @click="openModal">
-                    {{ $t('activity.create_new_location') }}
-                </a>
-            </li>
-        </ul>
+  <div>
+    <ul class="record_actions">
+      <li>
+        <a
+          class="btn btn-sm btn-create"
+          @click="openModal"
+        >
+          {{ $t('activity.create_new_location') }}
+        </a>
+      </li>
+    </ul>
 
-        <teleport to="body">
-            <modal v-if="modal.showModal"
-                :modalDialogClass="modal.modalDialogClass"
-                @close="modal.showModal = false">
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ $t('activity.create_new_location') }}
+          </h3>
+        </template>
+        <template #body>
+          <form>
+            <div
+              class="alert alert-warning"
+              v-if="errors.length"
+            >
+              <ul>
+                <li
+                  v-for="(e, i) in errors"
+                  :key="i"
+                >
+                  {{ e }}
+                </li>
+              </ul>
+            </div>
 
-                <template v-slot:header>
-                    <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
-                </template>
-                <template v-slot:body>
-                    <form>
-                        <div class="alert alert-warning" v-if="errors.length">
-                            <ul>
-                                <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
-                            </ul>
-                        </div>
+            <div class="form-floating mb-3">
+              <select
+                class="form-select form-select-lg"
+                id="type"
+                required
+                v-model="selectType"
+              >
+                <option
+                  selected
+                  disabled
+                  value=""
+                >
+                  {{ $t('activity.choose_location_type') }}
+                </option>
+                <option
+                  v-for="t in locationTypes"
+                  :value="t"
+                  :key="t.id"
+                >
+                  {{ t.title.fr }}
+                </option>
+              </select>
+              <label>{{ $t('activity.location_fields.type') }}</label>
+            </div>
 
-                        <div class="form-floating mb-3">
-                            <select class="form-select form-select-lg" id="type" required v-model="selectType">
-                                <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
-                                <option v-for="t in locationTypes" :value="t" :key="t.id">
-                                    {{ t.title.fr }}
-                                </option>
-                            </select>
-                            <label>{{ $t('activity.location_fields.type') }}</label>
-                        </div>
+            <div class="form-floating mb-3">
+              <input
+                class="form-control form-control-lg"
+                id="name"
+                v-model="inputName"
+                placeholder
+              >
+              <label for="name">{{ $t('activity.location_fields.name') }}</label>
+            </div>
 
-                        <div class="form-floating mb-3">
-                            <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
-                            <label for="name">{{ $t('activity.location_fields.name') }}</label>
-                        </div>
+            <add-address
+              :context="addAddress.context"
+              :options="addAddress.options"
+              :address-changed-callback="submitNewAddress"
+              v-if="showAddAddress"
+              ref="addAddress"
+            />
 
-                        <add-address
-                            :context="addAddress.context"
-                            :options="addAddress.options"
-                            :addressChangedCallback="submitNewAddress"
-                            v-if="showAddAddress"
-                            ref="addAddress">
-                        </add-address>
-
-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
-                            <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="hasPhonenumber1">
-                            <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
-                            <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
-                            <label for="email">{{ $t('activity.location_fields.email') }}</label>
-                        </div>
-
-                    </form>
-                </template>
-                <template v-slot:footer>
-                    <button class="btn btn-save"
-                        @click.prevent="saveNewLocation"
-                    >
-                        {{ $t('action.save') }}
-                    </button>
-                </template>
-
-            </modal>
-        </teleport>
-    </div>
+            <div
+              class="form-floating mb-3"
+              v-if="showContactData"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber1"
+                v-model="inputPhonenumber1"
+                placeholder
+              >
+              <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
+            </div>
+            <div
+              class="form-floating mb-3"
+              v-if="hasPhonenumber1"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber2"
+                v-model="inputPhonenumber2"
+                placeholder
+              >
+              <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
+            </div>
+            <div
+              class="form-floating mb-3"
+              v-if="showContactData"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="email"
+                v-model="inputEmail"
+                placeholder
+              >
+              <label for="email">{{ $t('activity.location_fields.email') }}</label>
+            </div>
+          </form>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-save"
+            @click.prevent="saveNewLocation"
+          >
+            {{ $t('action.save') }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 4691a860a..a3bcea765 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -1,79 +1,78 @@
 <template>
-   <teleport to="#social-issues-acc">
-
-      <div class="mb-3 row">
-         <div class="col-4">
-            <label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
-         </div>
-         <div class="col-8">
-
-            <check-social-issue
-               v-for="issue in socialIssuesList"
-               :key="issue.id"
-               :issue="issue"
-               :selection="socialIssuesSelected"
-               @updateSelected="updateIssuesSelected">
-            </check-social-issue>
-
-            <div class="my-3">
-            <VueMultiselect
-               name="otherIssues"
-               label="text"
-               track-by="id"
-               open-direction="bottom"
-               :close-on-select="true"
-               :preserve-search="false"
-               :reset-after="true"
-               :hide-selected="true"
-               :taggable="false"
-               :multiple="false"
-               :searchable="true"
-               :allow-empty="true"
-               :show-labels="false"
-               :loading="issueIsLoading"
-               :placeholder="$t('activity.choose_other_social_issue')"
-               :options="socialIssuesOther"
-               @select="addIssueInList">
-            </VueMultiselect>
-            </div>
-
-         </div>
+  <teleport to="#social-issues-acc">
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
       </div>
+      <div class="col-8">
+        <check-social-issue
+          v-for="issue in socialIssuesList"
+          :key="issue.id"
+          :issue="issue"
+          :selection="socialIssuesSelected"
+          @update-selected="updateIssuesSelected"
+        />
 
-      <div class="mb-3 row">
-         <div class="col-4">
-            <label :class="socialActionsClassList">{{ $t('activity.social_actions') }}</label>
-         </div>
-         <div class="col-8">
-
-            <div v-if="actionIsLoading === true">
-               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
-            </div>
-
-            <span v-else-if="socialIssuesSelected.length === 0" class="inline-choice chill-no-data-statement mt-3">
-               {{ $t('activity.select_first_a_social_issue') }}
-            </span>
-
-            <template v-else-if="socialActionsList.length > 0">
-               <check-social-action
-                  v-if="socialIssuesSelected.length || socialActionsSelected.length"
-                  v-for="action in socialActionsList"
-                  :key="action.id"
-                  :action="action"
-                  :selection="socialActionsSelected"
-                  @updateSelected="updateActionsSelected">
-               </check-social-action>
-            </template>
-
-            <span v-else-if="actionAreLoaded && socialActionsList.length === 0" class="inline-choice chill-no-data-statement mt-3">
-               {{ $t('activity.social_action_list_empty') }}
-            </span>
-
-
-         </div>
+        <div class="my-3">
+          <VueMultiselect
+            name="otherIssues"
+            label="text"
+            track-by="id"
+            open-direction="bottom"
+            :close-on-select="true"
+            :preserve-search="false"
+            :reset-after="true"
+            :hide-selected="true"
+            :taggable="false"
+            :multiple="false"
+            :searchable="true"
+            :allow-empty="true"
+            :show-labels="false"
+            :loading="issueIsLoading"
+            :placeholder="$t('activity.choose_other_social_issue')"
+            :options="socialIssuesOther"
+            @select="addIssueInList"
+          />
+        </div>
       </div>
+    </div>
 
-   </teleport>
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialActionsClassList">{{ $t('activity.social_actions') }}</label>
+      </div>
+      <div class="col-8">
+        <div v-if="actionIsLoading === true">
+          <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg" />
+        </div>
+
+        <span
+          v-else-if="socialIssuesSelected.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ $t('activity.select_first_a_social_issue') }}
+        </span>
+
+        <template v-else-if="socialActionsList.length > 0">
+          <check-social-action
+            v-if="socialIssuesSelected.length || socialActionsSelected.length"
+            v-for="action in socialActionsList"
+            :key="action.id"
+            :action="action"
+            :selection="socialActionsSelected"
+            @update-selected="updateActionsSelected"
+          />
+        </template>
+
+        <span
+          v-else-if="actionAreLoaded && socialActionsList.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ $t('activity.social_action_list_empty') }}
+        </span>
+      </div>
+    </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
index ac209ac71..e6f47134c 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
@@ -1,20 +1,24 @@
 <template>
-   <span class="inline-choice">
-      <div class="form-check">
+  <span class="inline-choice">
+    <div class="form-check">
 
-         <input class="form-check-input"
-            type="checkbox"
-            v-model="selected"
-            name="action"
-            v-bind:id="action.id"
-            v-bind:value="action"
-            />
-         <label class="form-check-label" v-bind:for="action.id">
-            <span class="badge bg-light text-dark">{{ action.text }}</span>
-         </label>
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="action"
+        :id="action.id"
+        :value="action"
+      >
+      <label
+        class="form-check-label"
+        :for="action.id"
+      >
+        <span class="badge bg-light text-dark">{{ action.text }}</span>
+      </label>
 
-      </div>
-   </span>
+    </div>
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
index 8d902818f..5fcdd00ac 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
@@ -1,20 +1,24 @@
 <template>
-   <span class="inline-choice">
-      <div class="form-check">
+  <span class="inline-choice">
+    <div class="form-check">
 
-         <input class="form-check-input"
-            type="checkbox"
-            v-model="selected"
-            name="issue"
-            v-bind:id="issue.id"
-            v-bind:value="issue"
-            />
-         <label class="form-check-label" v-bind:for="issue.id">
-            <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
-         </label>
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="issue"
+        :id="issue.id"
+        :value="issue"
+      >
+      <label
+        class="form-check-label"
+        :for="issue.id"
+      >
+        <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
+      </label>
 
-      </div>
-   </span>
+    </div>
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index dcd3d721c..c75c3b1e0 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,32 +1,35 @@
 <template>
-
   <teleport to="#mainUser">
-
-    <h2 class="chill-red">Utilisateur principal</h2>
+    <h2 class="chill-red">
+      Utilisateur principal
+    </h2>
     <div>
       <div>
         <div v-if="null !== this.$store.getters.getMainUser">
-          <calendar-active :user="this.$store.getters.getMainUser" ></calendar-active>
+          <calendar-active :user="this.$store.getters.getMainUser" />
         </div>
         <pick-entity
           :multiple="false"
           :types="['user']"
           :uniqid="'main_user_calendar'"
           :picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
-          :removableIfSet="false"
-          :displayPicked="false"
+          :removable-if-set="false"
+          :display-picked="false"
           :suggested="this.suggestedUsers"
           :label="'main_user'"
-          @addNewEntity="setMainUser"
-        ></pick-entity>
+          @add-new-entity="setMainUser"
+        />
       </div>
     </div>
   </teleport>
 
-  <concerned-groups></concerned-groups>
+  <concerned-groups />
 
   <teleport to="#schedule">
-    <div class="row mb-3" v-if="activity.startDate !== null">
+    <div
+      class="row mb-3"
+      v-if="activity.startDate !== null"
+    >
       <label class="col-form-label col-sm-4">Date</label>
       <div class="col-sm-8">
         {{ $d(activity.startDate, 'long') }} - {{ $d(activity.endDate, 'hoursOnly') }}
@@ -36,83 +39,185 @@
     </div>
   </teleport>
 
-  <location></location>
+  <location />
 
 
 
-    <teleport to="#fullCalendar">
-      <div class="calendar-actives">
-        <template class="" v-for="u in getActiveUsers" :key="u.id">
-          <calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
-        </template>
-      </div>
-      <div class="display-options row justify-content-between" style="margin-top: 1rem;">
-        <div class="col-sm-9 col-xs-12">
-          <div class="input-group mb-3">
-            <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
-            <select v-model="slotDuration" id="slotDuration" class="form-select">
-              <option value="00:05:00">5 minutes</option>
-              <option value="00:10:00">10 minutes</option>
-              <option value="00:15:00">15 minutes</option>
-              <option value="00:30:00">30 minutes</option>
-            </select>
-            <label class="input-group-text" for="slotMinTime">De</label>
-            <select v-model="slotMinTime" id="slotMinTime" class="form-select">
-              <option value="00:00:00">0h</option>
-              <option value="01:00:00">1h</option>
-              <option value="02:00:00">2h</option>
-              <option value="03:00:00">3h</option>
-              <option value="04:00:00">4h</option>
-              <option value="05:00:00">5h</option>
-              <option value="06:00:00">6h</option>
-              <option value="07:00:00">7h</option>
-              <option value="08:00:00">8h</option>
-              <option value="09:00:00">9h</option>
-              <option value="10:00:00">10h</option>
-              <option value="11:00:00">11h</option>
-              <option value="12:00:00">12h</option>
-            </select>
-            <label class="input-group-text" for="slotMaxTime">À</label>
-            <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
-              <option value="12:00:00">12h</option>
-              <option value="13:00:00">13h</option>
-              <option value="14:00:00">14h</option>
-              <option value="15:00:00">15h</option>
-              <option value="16:00:00">16h</option>
-              <option value="17:00:00">17h</option>
-              <option value="18:00:00">18h</option>
-              <option value="19:00:00">19h</option>
-              <option value="20:00:00">20h</option>
-              <option value="21:00:00">21h</option>
-              <option value="22:00:00">22h</option>
-              <option value="23:00:00">23h</option>
-              <option value="23:59:59">24h</option>
-            </select>
-          </div>
+  <teleport to="#fullCalendar">
+    <div class="calendar-actives">
+      <template
+        class=""
+        v-for="u in getActiveUsers"
+        :key="u.id"
+      >
+        <calendar-active
+          :user="u"
+          :invite="this.$store.getters.getInviteForUser(u)"
+        />
+      </template>
+    </div>
+    <div
+      class="display-options row justify-content-between"
+      style="margin-top: 1rem;"
+    >
+      <div class="col-sm-9 col-xs-12">
+        <div class="input-group mb-3">
+          <label
+            class="input-group-text"
+            for="slotDuration"
+          >Durée des créneaux</label>
+          <select
+            v-model="slotDuration"
+            id="slotDuration"
+            class="form-select"
+          >
+            <option value="00:05:00">
+              5 minutes
+            </option>
+            <option value="00:10:00">
+              10 minutes
+            </option>
+            <option value="00:15:00">
+              15 minutes
+            </option>
+            <option value="00:30:00">
+              30 minutes
+            </option>
+          </select>
+          <label
+            class="input-group-text"
+            for="slotMinTime"
+          >De</label>
+          <select
+            v-model="slotMinTime"
+            id="slotMinTime"
+            class="form-select"
+          >
+            <option value="00:00:00">
+              0h
+            </option>
+            <option value="01:00:00">
+              1h
+            </option>
+            <option value="02:00:00">
+              2h
+            </option>
+            <option value="03:00:00">
+              3h
+            </option>
+            <option value="04:00:00">
+              4h
+            </option>
+            <option value="05:00:00">
+              5h
+            </option>
+            <option value="06:00:00">
+              6h
+            </option>
+            <option value="07:00:00">
+              7h
+            </option>
+            <option value="08:00:00">
+              8h
+            </option>
+            <option value="09:00:00">
+              9h
+            </option>
+            <option value="10:00:00">
+              10h
+            </option>
+            <option value="11:00:00">
+              11h
+            </option>
+            <option value="12:00:00">
+              12h
+            </option>
+          </select>
+          <label
+            class="input-group-text"
+            for="slotMaxTime"
+          >À</label>
+          <select
+            v-model="slotMaxTime"
+            id="slotMaxTime"
+            class="form-select"
+          >
+            <option value="12:00:00">
+              12h
+            </option>
+            <option value="13:00:00">
+              13h
+            </option>
+            <option value="14:00:00">
+              14h
+            </option>
+            <option value="15:00:00">
+              15h
+            </option>
+            <option value="16:00:00">
+              16h
+            </option>
+            <option value="17:00:00">
+              17h
+            </option>
+            <option value="18:00:00">
+              18h
+            </option>
+            <option value="19:00:00">
+              19h
+            </option>
+            <option value="20:00:00">
+              20h
+            </option>
+            <option value="21:00:00">
+              21h
+            </option>
+            <option value="22:00:00">
+              22h
+            </option>
+            <option value="23:00:00">
+              23h
+            </option>
+            <option value="23:59:59">
+              24h
+            </option>
+          </select>
         </div>
-        <div class="col-sm-3 col-xs-12">
-          <div class="float-end">
-            <div class="form-check input-group">
-          <span class="input-group-text">
-            <input id="showHideWE" class="mt-0" type="checkbox" v-model="hideWeekends">
-          </span>
-              <label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
-            </div>
+      </div>
+      <div class="col-sm-3 col-xs-12">
+        <div class="float-end">
+          <div class="form-check input-group">
+            <span class="input-group-text">
+              <input
+                id="showHideWE"
+                class="mt-0"
+                type="checkbox"
+                v-model="hideWeekends"
+              >
+            </span>
+            <label
+              for="showHideWE"
+              class="form-check-label input-group-text"
+            >Week-ends</label>
           </div>
         </div>
       </div>
-      <FullCalendar ref="fullCalendar" :options="calendarOptions">
-        <template v-slot:eventContent='arg'>
-          <span>
-            <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
-            <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
-            <b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected')}} </b>
-            <b v-else-if="arg.event.extendedProps.is === 'local'">{{ arg.event.title}}</b>
-            <b v-else>{{ arg.timeText }} {{ $t('current_selected')}} </b>
-          </span>
-        </template>
-      </FullCalendar>
-    </teleport>
+    </div>
+    <FullCalendar
+      ref="fullCalendar"
+      :options="calendarOptions"
+    >
+      <template #eventContent="arg">
+        <span>
+          <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title }}</b>
+          <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
+          <b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected') }} </b>
+          <b v-else-if="arg.event.extendedProps.is === 'local'">{{ arg.event.title }}</b>
+          <b v-else>{{ arg.timeText }} {{ $t('current_selected') }} </b>
+        </span>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
index cd6e52815..26311101c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
@@ -1,22 +1,55 @@
 <template>
-  <div :style="style" class="calendar-active">
+  <div
+    :style="style"
+    class="calendar-active"
+  >
     <span class="badge-user">
       {{ user.text }}
       <template v-if="invite !== null">
-        <i v-if="invite.status === 'accepted'" class="fa fa-check"></i>
-        <i v-else-if="invite.status === 'declined'" class="fa fa-times"></i>
-        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o"></i>
-        <i v-else-if="invite.status === 'tentative'" class="fa fa-question"></i>
+        <i
+          v-if="invite.status === 'accepted'"
+          class="fa fa-check"
+        />
+        <i
+          v-else-if="invite.status === 'declined'"
+          class="fa fa-times"
+        />
+        <i
+          v-else-if="invite.status === 'pending'"
+          class="fa fa-question-o"
+        />
+        <i
+          v-else-if="invite.status === 'tentative'"
+          class="fa fa-question"
+        />
         <span v-else="">{{ invite.status }}</span>
       </template>
     </span>
     <span class="form-check-inline form-switch">
-      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
-      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="rangeShow"
+      >
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Disponibilités"
+      ><i class="fa fa-calendar-check-o" /></label>
     </span>
     <span class="form-check-inline form-switch">
-      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
-      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="remoteShow"
+      >
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Agenda"
+      ><i class="fa fa-calendar" /></label>
     </span>
   </div>
 </template>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 494fde96c..6ed65791b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,36 +1,53 @@
 <template>
   <div>
-     <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
+    <h2 class="chill-red">
+      {{ $t('choose_your_calendar_user') }}
+    </h2>
     <VueMultiselect
-        name="field"
-        id="calendarUserSelector"
-        v-model="value"
-        track-by="id"
-        label="value"
-        :custom-label="transName"
-        :placeholder="$t('select_user')"
-        :multiple="true"
-        :close-on-select="false"
-        :allow-empty="true"
-        :model-value="value"
-        :select-label="$t('multiselect.select_label')"
-        :deselect-label="$t('multiselect.deselect_label')"
-        :selected-label="$t('multiselect.selected_label')"
-        @select="selectUsers"
-        @remove="unSelectUsers"
-        @close="coloriseSelectedValues"
-        :options="options">
-    </VueMultiselect>
+      name="field"
+      id="calendarUserSelector"
+      v-model="value"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_user')"
+      :multiple="true"
+      :close-on-select="false"
+      :allow-empty="true"
+      :model-value="value"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      @select="selectUsers"
+      @remove="unSelectUsers"
+      @close="coloriseSelectedValues"
+      :options="options"
+    />
   </div>
   <div class="form-check">
-    <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
-    <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
+    <input
+      type="checkbox"
+      id="myCalendar"
+      class="form-check-input"
+      v-model="showMyCalendarWidget"
+    >
+    <label
+      class="form-check-label"
+      for="myCalendar"
+    >{{ $t('show_my_calendar') }}</label>
   </div>
   <div class="form-check">
-    <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
-    <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    <input
+      type="checkbox"
+      id="weekends"
+      class="form-check-input"
+      @click="toggleWeekends"
+    >
+    <label
+      class="form-check-label"
+      for="weekends"
+    >{{ $t('show_weekends') }}</label>
   </div>
-  
 </template>
 <script>
 
diff --git a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
index 2ab033f2e..4094de5a4 100644
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
+++ b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
@@ -1,40 +1,65 @@
 <template>
-    <div>
-        <template v-if="templates.length > 0">
-            <slot name="title">
-                <h2>{{ $t('generate_document')}}</h2>
+  <div>
+    <template v-if="templates.length > 0">
+      <slot name="title">
+        <h2>{{ $t('generate_document') }}</h2>
+      </slot>
+
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4">
+            <slot name="label">
+              <label>{{ $t('select_a_template') }}</label>
             </slot>
-
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-4">
-                        <slot name="label">
-                            <label>{{ $t('select_a_template') }}</label>
-                        </slot>
-                    </div>
-                    <div class="col-md-8">
-                        <div class="input-group mb-3">
-                            <select class="form-select" v-model="template">
-                                <option disabled selected value="">{{ $t('choose_a_template') }}</option>
-                                <template v-for="t in templates" :key="t.id">
-                                    <option :value="t.id" >{{ t.name.fr || 'Aucun nom défini' }}</option>
-                                </template>
-                            </select>
-                            <a v-if="canGenerate" class="btn btn-update btn-sm change-icon" :href="buildUrlGenerate" @click.prevent="clickGenerate($event, buildUrlGenerate)"><i class="fa fa-fw fa-cog"></i></a>
-                            <a v-else class="btn btn-update btn-sm change-icon" href="#" disabled ><i class="fa fa-fw fa-cog"></i></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="row" v-if="hasDescription">
-                    <div class="col-md-8 align-self-end">
-                        <p>{{ getDescription }}</p>
-                    </div>
-                </div>
-
+          </div>
+          <div class="col-md-8">
+            <div class="input-group mb-3">
+              <select
+                class="form-select"
+                v-model="template"
+              >
+                <option
+                  disabled
+                  selected
+                  value=""
+                >
+                  {{ $t('choose_a_template') }}
+                </option>
+                <template
+                  v-for="t in templates"
+                  :key="t.id"
+                >
+                  <option :value="t.id">
+                    {{ t.name.fr || 'Aucun nom défini' }}
+                  </option>
+                </template>
+              </select>
+              <a
+                v-if="canGenerate"
+                class="btn btn-update btn-sm change-icon"
+                :href="buildUrlGenerate"
+                @click.prevent="clickGenerate($event, buildUrlGenerate)"
+              ><i class="fa fa-fw fa-cog" /></a>
+              <a
+                v-else
+                class="btn btn-update btn-sm change-icon"
+                href="#"
+                disabled
+              ><i class="fa fa-fw fa-cog" /></a>
             </div>
-        </template>
-    </div>
-
+          </div>
+        </div>
+        <div
+          class="row"
+          v-if="hasDescription"
+        >
+          <div class="col-md-8 align-self-end">
+            <p>{{ getDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue
index 634e9ed45..8bff5bc14 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue
@@ -1,69 +1,79 @@
 <template>
-   <a :class="btnClasses" :title="$t(buttonTitle)" @click="openModal">
-      <span>{{ $t(buttonTitle) }}</span>
-   </a>
-   <teleport to="body">
-      <div>
-         <modal v-if="modal.showModal"
-            :modalDialogClass="modal.modalDialogClass"
-            @close="modal.showModal = false">
+  <a
+    :class="btnClasses"
+    :title="$t(buttonTitle)"
+    @click="openModal"
+  >
+    <span>{{ $t(buttonTitle) }}</span>
+  </a>
+  <teleport to="body">
+    <div>
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          {{ $t('upload_a_document') }}
+        </template>
 
-            <template v-slot:header>
-               {{ $t('upload_a_document') }}
-            </template>
+        <template #body>
+          <div
+            id="dropZoneWrapper"
+            ref="dropZoneWrapper"
+          >
+            <div
+              data-stored-object="data-stored-object"
+              :data-label-preparing="$t('data_label_preparing')"
+              :data-label-quiet-button="$t('data_label_quiet_button')"
+              :data-label-ready="$t('data_label_ready')"
+              :data-dict-file-too-big="$t('data_dict_file_too_big')"
+              :data-dict-default-message="$t('data_dict_default_message')"
+              :data-dict-remove-file="$t('data_dict_remove_file')"
+              :data-dict-max-files-exceeded="$t('data_dict_max_files_exceeded')"
+              :data-dict-cancel-upload="$t('data_dict_cancel_upload')"
+              :data-dict-cancel-upload-confirm="$t('data_dict_cancel_upload_confirm')"
+              :data-dict-upload-canceled="$t('data_dict_upload_canceled')"
+              :data-dict-remove="$t('data_dict_remove')"
+              :data-allow-remove="!options.required"
+              data-temp-url-generator="/asyncupload/temp_url/generate/GET"
+            >
+              <input
+                type="hidden"
+                data-async-file-upload="data-async-file-upload"
+                data-generate-temp-url-post="/asyncupload/temp_url/generate/post?expires_delay=180&amp;submit_delay=3600"
+                data-temp-url-get="/asyncupload/temp_url/generate/GET"
+                :data-max-files="options.maxFiles"
+                :data-max-post-size="options.maxPostSize"
+                :v-model="dataAsyncFileUpload"
+              >
+              <input
+                type="hidden"
+                data-stored-object-key="1"
+              >
+              <input
+                type="hidden"
+                data-stored-object-iv="1"
+              >
+              <input
+                type="hidden"
+                data-async-file-type="1"
+              >
+            </div>
+          </div>
+        </template>
 
-            <template v-slot:body>
-                <div id="dropZoneWrapper" ref="dropZoneWrapper">
-                    <div
-                        data-stored-object="data-stored-object"
-                        :data-label-preparing="$t('data_label_preparing')"
-                        :data-label-quiet-button="$t('data_label_quiet_button')"
-                        :data-label-ready="$t('data_label_ready')"
-                        :data-dict-file-too-big="$t('data_dict_file_too_big')"
-                        :data-dict-default-message="$t('data_dict_default_message')"
-                        :data-dict-remove-file="$t('data_dict_remove_file')"
-                        :data-dict-max-files-exceeded="$t('data_dict_max_files_exceeded')"
-                        :data-dict-cancel-upload="$t('data_dict_cancel_upload')"
-                        :data-dict-cancel-upload-confirm="$t('data_dict_cancel_upload_confirm')"
-                        :data-dict-upload-canceled="$t('data_dict_upload_canceled')"
-                        :data-dict-remove="$t('data_dict_remove')"
-                        :data-allow-remove="!options.required"
-                        data-temp-url-generator="/asyncupload/temp_url/generate/GET">
-                        <input
-                           type="hidden"
-                           data-async-file-upload="data-async-file-upload"
-                           data-generate-temp-url-post="/asyncupload/temp_url/generate/post?expires_delay=180&amp;submit_delay=3600"
-                           data-temp-url-get="/asyncupload/temp_url/generate/GET"
-                           :data-max-files="options.maxFiles"
-                           :data-max-post-size="options.maxPostSize"
-                           :v-model="dataAsyncFileUpload"
-                        >
-                        <input
-                           type="hidden"
-                           data-stored-object-key="1"
-                        >
-                        <input
-                           type="hidden"
-                           data-stored-object-iv="1"
-                        >
-                        <input
-                           type="hidden"
-                           data-async-file-type="1"
-                        >
-                    </div>
-                </div>
-            </template>
-
-            <template v-slot:footer>
-               <button class="btn btn-create"
-                  @click.prevent="saveDocument">
-                  {{ $t('action.add')}}
-            </button>
-            </template>
-
-         </modal>
-      </div>
-   </teleport>
+        <template #footer>
+          <button
+            class="btn btn-create"
+            @click.prevent="saveDocument"
+          >
+            {{ $t('action.add') }}
+          </button>
+        </template>
+      </modal>
+    </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue
index 781c47d6f..c06a160a0 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue
@@ -2,14 +2,14 @@
   <a
     class="btn btn-download"
     :title="$t(buttonTitle)"
-    :data-key=JSON.stringify(storedObject.keyInfos)
-    :data-iv=JSON.stringify(storedObject.iv)
-    :data-mime-type=storedObject.type
+    :data-key="JSON.stringify(storedObject.keyInfos)"
+    :data-iv="JSON.stringify(storedObject.iv)"
+    :data-mime-type="storedObject.type"
     :data-label-preparing="$t('dataLabelPreparing')"
     :data-label-ready="$t('dataLabelReady')"
     :data-temp-url-get-generator="url"
-    @click.once="downloadDocument">
-  </a>
+    @click.once="downloadDocument"
+  />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index fecfa69c6..e91150d8e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -1,11 +1,11 @@
 <template>
-   <add-address
-      v-bind:key="key"
-      v-bind:context="context"
-      v-bind:options="options"
-      v-bind:addressChangedCallback="submitAddress"
-      ref="addAddress">
-   </add-address>
+  <add-address
+    :key="key"
+    :context="context"
+    :options="options"
+    :address-changed-callback="submitAddress"
+    ref="addAddress"
+  />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
index a90cb4bb9..759e0235e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -1,18 +1,26 @@
 <template>
-   <ul class="record_actions" v-if="!options.onlyButton"
-      :class="{ 'sticky-form-buttons': isStickyForm }">
-
-      <li v-if="isStickyForm" class="cancel">
-         <slot name="before"></slot>
-      </li>
-      <li>
-        <slot name="action"></slot>
-      </li>
-      <li v-if="isStickyForm">
-         <slot name="after"></slot>
-      </li>
-   </ul>
-    <slot v-else name="action"></slot>
+  <ul
+    class="record_actions"
+    v-if="!options.onlyButton"
+    :class="{ 'sticky-form-buttons': isStickyForm }"
+  >
+    <li
+      v-if="isStickyForm"
+      class="cancel"
+    >
+      <slot name="before" />
+    </li>
+    <li>
+      <slot name="action" />
+    </li>
+    <li v-if="isStickyForm">
+      <slot name="after" />
+    </li>
+  </ul>
+  <slot
+    v-else
+    name="action"
+  />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index 41279771f..e944ce397 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -1,230 +1,295 @@
 <template>
+  <!-- step0 -->
+  <show-pane
+    v-if="flag.showPane"
+    :context="this.context"
+    :options="this.options"
+    :defaultz="this.defaultz"
+    :entity="this.entity"
+    :flag="this.flag"
+    :use-date-pane="this.useDatePane"
+    @open-edit-pane="openEditPane"
+    ref="showAddress"
+  />
 
-   <!-- step0 -->
-   <show-pane v-if="flag.showPane"
-      v-bind:context="this.context"
-      v-bind:options="this.options"
-      v-bind:defaultz="this.defaultz"
-      v-bind:entity="this.entity"
-      v-bind:flag="this.flag"
-      v-bind:useDatePane="this.useDatePane"
-      @openEditPane="openEditPane"
-      ref="showAddress">
-   </show-pane>
+  <!-- step 1 -->
+  <teleport
+    to="body"
+    v-if="inModal"
+  >
+    <modal
+      v-if="flag.suggestPane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span
+            v-if="flag.loading"
+            class="loading"
+          >
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t('loading') }}</span>
+          </span>
+        </h2>
+      </template>
 
-   <!-- step 1 -->
-   <teleport to="body" v-if="inModal">
-      <modal v-if="flag.suggestPane"
-         modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="resetPane">
+      <template #body>
+        <suggest-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          @pick-address="this.pickAddress"
+          ref="suggestAddress"
+        />
+      </template>
 
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
-               <span v-if="flag.loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                  <span class="sr-only">{{ $t('loading') }}</span>
-               </span>
-            </h2>
-         </template>
-
-         <template v-slot:body>
-            <suggest-pane
-               v-bind:context="this.context"
-               v-bind:options="this.options"
-               v-bind:defaultz="this.defaultz"
-               v-bind:entity="this.entity"
-               v-bind:flag="this.flag"
-               @pick-address="this.pickAddress"
-               ref="suggestAddress">
-            </suggest-pane>
-         </template>
-
-         <template v-slot:footer>
-            <button @click="openEditPane"
-               class="btn btn-create">
-               {{ $t('create_a_new_address')}}
+      <template #footer>
+        <button
+          @click="openEditPane"
+          class="btn btn-create"
+        >
+          {{ $t('create_a_new_address') }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div
+      v-if="flag.suggestPane"
+      class="mt-4 flex-grow-1"
+    >
+      <suggest-pane
+        :context="this.context"
+        :options="this.options"
+        :defaultz="this.defaultz"
+        :entity="this.entity"
+        :flag="this.flag"
+        :inside-modal="false"
+        @pick-address="this.pickAddress"
+        ref="suggestAddress"
+      >
+        <template
+          #before
+          v-if="!bypassFirstStep"
+        >
+          <a
+            class="btn btn-cancel"
+            @click="resetPane"
+          >
+            {{ $t('action.cancel') }}
+          </a>
+        </template>
+        <template #action>
+          <li>
+            <button
+              @click="openEditPane"
+              class="btn btn-create"
+            >
+              {{ $t('create_a_new_address') }}
             </button>
-         </template>
+          </li>
+        </template>
+      </suggest-pane>
+    </div>
+  </template>
 
-      </modal>
-   </teleport>
-   <template v-else>
-      <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
-         <suggest-pane
-            v-bind:context="this.context"
-            v-bind:options="this.options"
-            v-bind:defaultz="this.defaultz"
-            v-bind:entity="this.entity"
-            v-bind:flag="this.flag"
-            v-bind:insideModal="false"
-            @pick-address="this.pickAddress"
-            ref="suggestAddress">
+  <!-- step 2 -->
+  <teleport
+    to="body"
+    v-if="inModal"
+  >
+    <modal
+      v-if="flag.editPane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span
+            v-if="flag.loading"
+            class="loading"
+          >
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t('loading') }}</span>
+          </span>
+        </h2>
+      </template>
 
-            <template v-slot:before v-if="!bypassFirstStep">
-               <a class="btn btn-cancel" @click="resetPane">
-                  {{ $t('action.cancel') }}
-               </a>
-            </template>
-            <template v-slot:action>
-               <li>
-                  <button @click="openEditPane"
-                     class="btn btn-create">
-                     {{ $t('create_a_new_address')}}
-                  </button>
-               </li>
-            </template>
+      <template #body>
+        <edit-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          :errors="this.errors"
+          :check-errors="this.checkErrors"
+          @get-cities="getCities"
+          @get-reference-addresses="getReferenceAddresses"
+        />
+      </template>
 
-         </suggest-pane>
-      </div>
-   </template>
-
-   <!-- step 2 -->
-   <teleport to="body" v-if="inModal">
-      <modal v-if="flag.editPane"
-         modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="resetPane">
-
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
-               <span v-if="flag.loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                  <span class="sr-only">{{ $t('loading') }}</span>
-               </span>
-            </h2>
-         </template>
-
-         <template v-slot:body>
-            <edit-pane
-               v-bind:context="this.context"
-               v-bind:options="this.options"
-               v-bind:defaultz="this.defaultz"
-               v-bind:entity="this.entity"
-               v-bind:flag="this.flag"
-               v-bind:errors="this.errors"
-               v-bind:checkErrors="this.checkErrors"
-               @getCities="getCities"
-               @getReferenceAddresses="getReferenceAddresses">
-            </edit-pane>
-         </template>
-
-         <template v-slot:footer>
-            <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
-            <button v-if="!this.context.edit && this.useDatePane" class="btn btn-update change-icon" @click="closeEditPane">
-               {{ $t('nav.next')}}
-               <i class="fa fa-fw fa-arrow-right"></i>
+      <template #footer>
+        <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
+        <button
+          v-if="!this.context.edit && this.useDatePane"
+          class="btn btn-update change-icon"
+          @click="closeEditPane"
+        >
+          {{ $t('nav.next') }}
+          <i class="fa fa-fw fa-arrow-right" />
+        </button>
+        <button
+          v-else
+          class="btn btn-save"
+          @click="closeEditPane"
+        >
+          {{ $t('action.save') }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div
+      v-if="flag.editPane"
+      class="mt-4 flex-grow-1"
+    >
+      <edit-pane
+        :context="this.context"
+        :options="this.options"
+        :defaultz="this.defaultz"
+        :entity="this.entity"
+        :flag="this.flag"
+        :errors="this.errors"
+        :check-errors="this.checkErrors"
+        :inside-modal="false"
+        @get-cities="getCities"
+        @get-reference-addresses="getReferenceAddresses"
+      >
+        <template #before>
+          <a
+            class="btn btn-cancel"
+            @click="resetPane"
+          >
+            {{ $t('action.cancel') }}
+          </a>
+        </template>
+        <template #action>
+          <li v-if="!this.context.edit && this.useDatePane">
+            <button
+              class="btn btn-update change-icon"
+              @click="closeEditPane"
+            >
+              {{ $t('nav.next') }}
+              <i class="fa fa-fw fa-arrow-right" />
             </button>
-            <button v-else class="btn btn-save" @click="closeEditPane">
-               {{ $t('action.save')}}
+          </li>
+          <li v-else>
+            <button
+              class="btn btn-save"
+              @click="closeEditPane"
+            >
+              {{ $t('action.save') }}
             </button>
-         </template>
+          </li>
+        </template>
+      </edit-pane>
+    </div>
+  </template>
 
-      </modal>
-   </teleport>
-   <template v-else>
-      <div v-if="flag.editPane" class="mt-4 flex-grow-1">
-         <edit-pane
-            v-bind:context="this.context"
-            v-bind:options="this.options"
-            v-bind:defaultz="this.defaultz"
-            v-bind:entity="this.entity"
-            v-bind:flag="this.flag"
-            v-bind:errors="this.errors"
-            v-bind:checkErrors="this.checkErrors"
-            v-bind:insideModal="false"
-            @getCities="getCities"
-            @getReferenceAddresses="getReferenceAddresses">
+  <!-- step 3 -->
+  <teleport
+    to="body"
+    v-if="inModal"
+  >
+    <modal
+      v-if="flag.datePane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span
+            v-if="flag.loading"
+            class="loading"
+          >
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t('loading') }}</span>
+          </span>
+        </h2>
+      </template>
 
-            <template v-slot:before>
-               <a class="btn btn-cancel" @click="resetPane">
-                  {{ $t('action.cancel') }}
-               </a>
-            </template>
-            <template v-slot:action>
-               <li v-if="!this.context.edit && this.useDatePane">
-                  <button class="btn btn-update change-icon" @click="closeEditPane">
-                     {{ $t('nav.next')}}
-                     <i class="fa fa-fw fa-arrow-right"></i>
-                  </button>
-               </li>
-               <li v-else>
-                  <button class="btn btn-save" @click="closeEditPane">
-                     {{ $t('action.save')}}
-                  </button>
-               </li>
-            </template>
+      <template #body>
+        <date-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          ref="dateAddress"
+        />
+      </template>
 
-         </edit-pane>
-      </div>
-   </template>
-
-   <!-- step 3 -->
-   <teleport to="body" v-if="inModal">
-      <modal v-if="flag.datePane"
-             modalDialogClass="modal-dialog-scrollable modal-xl"
-             @close="resetPane">
-
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
-               <span v-if="flag.loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                  <span class="sr-only">{{ $t('loading') }}</span>
-               </span>
-            </h2>
-         </template>
-
-         <template v-slot:body>
-            <date-pane
-               v-bind:context="this.context"
-               v-bind:options="this.options"
-               v-bind:defaultz="this.defaultz"
-               v-bind:entity="this.entity"
-               v-bind:flag="this.flag"
-               ref="dateAddress">
-            </date-pane>
-         </template>
-
-         <template v-slot:footer>
-            <button class="btn btn-misc" @click="openEditPane">
-               <i class="fa fa-fw fa-arrow-left"></i>
-               {{ $t('nav.previous')}}
+      <template #footer>
+        <button
+          class="btn btn-misc"
+          @click="openEditPane"
+        >
+          <i class="fa fa-fw fa-arrow-left" />
+          {{ $t('nav.previous') }}
+        </button>
+        <button
+          class="btn btn-save"
+          @click="closeDatePane"
+        >
+          {{ $t('action.save') }}
+        </button>
+        <!-- -->
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div
+      v-if="flag.datePane"
+      class="mt-4 flex-grow-1"
+    >
+      <date-pane
+        :context="this.context"
+        :options="this.options"
+        :defaultz="this.defaultz"
+        :entity="this.entity"
+        :flag="this.flag"
+        :inside-modal="false"
+        ref="dateAddress"
+      >
+        <template #before>
+          <button
+            class="btn btn-misc"
+            @click="openEditPane"
+          >
+            <i class="fa fa-fw fa-arrow-left" />
+            {{ $t('nav.previous') }}
+          </button>
+        </template>
+        <template #action>
+          <li>
+            <button
+              class="btn btn-save"
+              @click="closeDatePane"
+            >
+              {{ $t('action.save') }}
             </button>
-            <button class="btn btn-save" @click="closeDatePane">
-               {{ $t('action.save')}}
-            </button>
-            <!-- -->
-         </template>
-
-      </modal>
-   </teleport>
-   <template v-else>
-      <div v-if="flag.datePane" class="mt-4 flex-grow-1">
-         <date-pane
-            v-bind:context="this.context"
-            v-bind:options="this.options"
-            v-bind:defaultz="this.defaultz"
-            v-bind:entity="this.entity"
-            v-bind:flag="this.flag"
-            v-bind:insideModal="false"
-            ref="dateAddress">
-
-            <template v-slot:before>
-               <button class="btn btn-misc" @click="openEditPane">
-                  <i class="fa fa-fw fa-arrow-left"></i>
-                  {{ $t('nav.previous')}}
-               </button>
-            </template>
-            <template v-slot:action>
-               <li>
-                  <button class="btn btn-save" @click="closeDatePane">
-                     {{ $t('action.save')}}
-                  </button>
-               </li>
-            </template>
-
-         </date-pane>
-      </div>
-   </template>
-
+          </li>
+        </template>
+      </date-pane>
+    </div>
+  </template>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
index d3c04260f..133c94dcf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
@@ -1,5 +1,5 @@
 <template>
-   <div id="address_map"></div>
+  <div id="address_map" />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
index a26478126..e4b4e94e0 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
@@ -1,70 +1,95 @@
 <template>
-   <h4 class="h3">{{ $t('fill_an_address') }}</h4>
-   <div class="row my-3">
-      <div class="col-lg-6" v-if="!isNoAddress">
-         <div class="form-floating my-1">
-            <input class="form-control"
-            type="text"
-            name="floor"
-            :placeholder="$t('floor')"
-            v-model="floor"/>
-            <label for="floor">{{ $t('floor') }}</label>
-         </div>
-         <div class="form-floating my-1">
-            <input class="form-control"
-            type="text"
-            name="corridor"
-            :placeholder="$t('corridor')"
-            v-model="corridor"/>
-            <label for="corridor">{{ $t('corridor') }}</label>
-         </div>
-         <div class="form-floating my-1">
-            <input class="form-control"
-            type="text"
-            name="steps"
-            :placeholder="$t('steps')"
-            v-model="steps"/>
-            <label for="steps">{{ $t('steps') }}</label>
-         </div>
-         <div class="form-floating my-1">
-            <input class="form-control"
-            type="text"
-            name="flat"
-            :placeholder="$t('flat')"
-            v-model="flat"/>
-            <label for="flat">{{ $t('flat') }}</label>
-         </div>
+  <h4 class="h3">
+    {{ $t('fill_an_address') }}
+  </h4>
+  <div class="row my-3">
+    <div
+      class="col-lg-6"
+      v-if="!isNoAddress"
+    >
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="floor"
+          :placeholder="$t('floor')"
+          v-model="floor"
+        >
+        <label for="floor">{{ $t('floor') }}</label>
       </div>
-      <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
-         <div class="form-floating my-1" v-if="!isNoAddress">
-            <input class="form-control"
-            type="text"
-            name="buildingName"
-            maxlength=255
-            :placeholder="$t('buildingName')"
-            v-model="buildingName"/>
-            <label for="buildingName">{{ $t('buildingName') }}</label>
-         </div>
-         <div class="form-floating my-1">
-            <input class="form-control"
-            type="text"
-            name="extra"
-            maxlength=255
-            :placeholder="$t('extra')"
-            v-model="extra"/>
-            <label for="extra">{{ $t('extra') }}</label>
-         </div>
-         <div class="form-floating my-1" v-if="!isNoAddress">
-            <input class="form-control"
-            type="text"
-            name="distribution"
-            maxlength=255
-            :placeholder="$t('distribution')"
-            v-model="distribution"/>
-            <label for="distribution">{{ $t('distribution') }}</label>
-         </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="corridor"
+          :placeholder="$t('corridor')"
+          v-model="corridor"
+        >
+        <label for="corridor">{{ $t('corridor') }}</label>
       </div>
-   </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="steps"
+          :placeholder="$t('steps')"
+          v-model="steps"
+        >
+        <label for="steps">{{ $t('steps') }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="flat"
+          :placeholder="$t('flat')"
+          v-model="flat"
+        >
+        <label for="flat">{{ $t('flat') }}</label>
+      </div>
+    </div>
+    <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
+      <div
+        class="form-floating my-1"
+        v-if="!isNoAddress"
+      >
+        <input
+          class="form-control"
+          type="text"
+          name="buildingName"
+          maxlength="255"
+          :placeholder="$t('buildingName')"
+          v-model="buildingName"
+        >
+        <label for="buildingName">{{ $t('buildingName') }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="extra"
+          maxlength="255"
+          :placeholder="$t('extra')"
+          v-model="extra"
+        >
+        <label for="extra">{{ $t('extra') }}</label>
+      </div>
+      <div
+        class="form-floating my-1"
+        v-if="!isNoAddress"
+      >
+        <input
+          class="form-control"
+          type="text"
+          name="distribution"
+          maxlength="255"
+          :placeholder="$t('distribution')"
+          v-model="distribution"
+        >
+        <label for="distribution">{{ $t('distribution') }}</label>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
index 2c8e17687..7dcdf1ad9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
@@ -1,53 +1,63 @@
 <template>
-   <div class="my-1">
-      <label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
-      <VueMultiselect
-         id="addressSelector"
-         v-model="value"
-         :placeholder="$t('select_address')"
-         :tag-placeholder="$t('create_address')"
-         :select-label="$t('multiselect.select_label')"
-         :deselect-label="$t('create_address')"
-         :selected-label="$t('multiselect.selected_label')"
-         @search-change="listenInputSearch"
-         :internal-search="false"
-         ref="addressSelector"
-         @select="selectAddress"
-         @remove="remove"
-         name="field"
-         track-by="id"
-         label="value"
-         :custom-label="transName"
-         :taggable="true"
-         :multiple="false"
-         @tag="addAddress"
-         :loading="isLoading"
-         :options="addresses">
-      </VueMultiselect>
-   </div>
+  <div class="my-1">
+    <label
+      class="col-form-label"
+      for="addressSelector"
+    >{{ $t('address') }}</label>
+    <VueMultiselect
+      id="addressSelector"
+      v-model="value"
+      :placeholder="$t('select_address')"
+      :tag-placeholder="$t('create_address')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('create_address')"
+      :selected-label="$t('multiselect.selected_label')"
+      @search-change="listenInputSearch"
+      :internal-search="false"
+      ref="addressSelector"
+      @select="selectAddress"
+      @remove="remove"
+      name="field"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :taggable="true"
+      :multiple="false"
+      @tag="addAddress"
+      :loading="isLoading"
+      :options="addresses"
+    />
+  </div>
 
-   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)">
-      <div class="col-10">
-         <div class="form-floating">
-            <input class="form-control"
-               type="text"
-               name="street"
-               :placeholder="$t('street')"
-               v-model="street"/>
-            <label for="street">{{ $t('street') }}</label>
-         </div>
+  <div
+    class="custom-address row g-1"
+    v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)"
+  >
+    <div class="col-10">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          name="street"
+          :placeholder="$t('street')"
+          v-model="street"
+        >
+        <label for="street">{{ $t('street') }}</label>
       </div>
-      <div class="col-2">
-         <div class="form-floating">
-            <input class="form-control"
-               type="text"
-               name="streetNumber"
-               :placeholder="$t('streetNumber')"
-               v-model="streetNumber"/>
-            <label for="streetNumber">{{ $t('streetNumber') }}</label>
-         </div>
+    </div>
+    <div class="col-2">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          name="streetNumber"
+          :placeholder="$t('streetNumber')"
+          v-model="streetNumber"
+        >
+        <label for="streetNumber">{{ $t('streetNumber') }}</label>
       </div>
-   </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
index ca10285d1..90fb47af6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
@@ -1,53 +1,60 @@
 <template>
-   <div class="my-1">
-      <label class="col-form-label">{{ $t('city') }}</label>
-      <VueMultiselect
-         id="citySelector"
-         v-model="value"
-         @search-change="listenInputSearch"
-         ref="citySelector"
-         @select="selectCity"
-         @remove="remove"
-         name="field"
-         track-by="id"
-         label="value"
-         :custom-label="transName"
-         :placeholder="$t('select_city')"
-         :select-label="$t('multiselect.select_label')"
-         :deselect-label="$t('create_postal_code')"
-         :selected-label="$t('multiselect.selected_label')"
-         :taggable="true"
-         :multiple="false"
-         :internal-search="false"
-         @tag="addPostcode"
-         :tagPlaceholder="$t('create_postal_code')"
-         :loading="isLoading"
-         :options="cities">
-      </VueMultiselect>
-   </div>
+  <div class="my-1">
+    <label class="col-form-label">{{ $t('city') }}</label>
+    <VueMultiselect
+      id="citySelector"
+      v-model="value"
+      @search-change="listenInputSearch"
+      ref="citySelector"
+      @select="selectCity"
+      @remove="remove"
+      name="field"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_city')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('create_postal_code')"
+      :selected-label="$t('multiselect.selected_label')"
+      :taggable="true"
+      :multiple="false"
+      :internal-search="false"
+      @tag="addPostcode"
+      :tag-placeholder="$t('create_postal_code')"
+      :loading="isLoading"
+      :options="cities"
+    />
+  </div>
 
-   <div class="custom-postcode row g-1" v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)">
-      <div class="col-4">
-         <div class="form-floating">
-            <input class="form-control"
-               type="text"
-               id="code"
-               :placeholder="$t('postalCode_code')"
-               v-model="code"/>
-            <label for="code">{{ $t('postalCode_code') }}</label>
-         </div>
+  <div
+    class="custom-postcode row g-1"
+    v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
+  >
+    <div class="col-4">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          id="code"
+          :placeholder="$t('postalCode_code')"
+          v-model="code"
+        >
+        <label for="code">{{ $t('postalCode_code') }}</label>
       </div>
-      <div class="col-8">
-         <div class="form-floating">
-            <input class="form-control"
-               type="text"
-               id="name"
-               :placeholder="$t('postalCode_name')"
-               v-model="name"/>
-            <label for="name">{{ $t('postalCode_name') }}</label>
-         </div>
+    </div>
+    <div class="col-8">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          id="name"
+          :placeholder="$t('postalCode_name')"
+          v-model="name"
+        >
+        <label for="name">{{ $t('postalCode_name') }}</label>
       </div>
-   </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
index 1b220ff00..d8578dab7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
@@ -1,22 +1,24 @@
 <template>
-   <div class="my-1">
-      <label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
-      <VueMultiselect
-         id="countrySelect"
-         label="name"
-         track-by="id"
-         :custom-label="transName"
-         :placeholder="$t('select_country')"
-         :options="sortedCountries"
-         v-model="value"
-         :select-label="$t('multiselect.select_label')"
-         :deselect-label="$t('multiselect.deselect_label')"
-         :selected-label="$t('multiselect.selected_label')"
-         @select="selectCountry"
-         @remove="remove"
-      >
-      </VueMultiselect>
-   </div>
+  <div class="my-1">
+    <label
+      class="col-form-label"
+      for="countrySelect"
+    >{{ $t('country') }}</label>
+    <VueMultiselect
+      id="countrySelect"
+      label="name"
+      track-by="id"
+      :custom-label="transName"
+      :placeholder="$t('select_country')"
+      :options="sortedCountries"
+      v-model="value"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      @select="selectCountry"
+      @remove="remove"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
index eb76604d4..9ebb78c9d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -1,56 +1,83 @@
 <template>
+  <div
+    v-if="insideModal === false"
+    class="loading"
+  >
+    <i
+      v-if="flag.loading"
+      class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
+    />
+    <span class="sr-only">{{ $t('loading') }}</span>
+  </div>
 
-   <div v-if="insideModal === false" class="loading">
-      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-      <span class="sr-only">{{ $t('loading') }}</span>
-   </div>
+  <div
+    v-if="errorMsg && errorMsg.length > 0"
+    class="alert alert-danger"
+  >
+    {{ errorMsg }}
+  </div>
 
-   <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-      {{ errorMsg }}
-   </div>
+  <address-render-box :address="selectedAddress" />
 
-   <address-render-box :address="selectedAddress"></address-render-box>
-
-   <div class="row">
-      <div v-if="showDateFrom" class='col-lg-6 address-valid date-since'>
-         <h3>{{ $t(getValidFromDateText) }}</h3>
-         <div class="input-group mb-3">
-            <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
-            <input type="date" class="form-control form-control-lg" name="validFrom"
-                   v-bind:placeholder="$t(getValidFromDateText)"
-                   v-model="validFrom"
-                   aria-describedby="validFrom"
-            />
-         </div>
+  <div class="row">
+    <div
+      v-if="showDateFrom"
+      class="col-lg-6 address-valid date-since"
+    >
+      <h3>{{ $t(getValidFromDateText) }}</h3>
+      <div class="input-group mb-3">
+        <span
+          class="input-group-text"
+          id="validFrom"
+        ><i class="fa fa-fw fa-calendar" /></span>
+        <input
+          type="date"
+          class="form-control form-control-lg"
+          name="validFrom"
+          :placeholder="$t(getValidFromDateText)"
+          v-model="validFrom"
+          aria-describedby="validFrom"
+        >
       </div>
+    </div>
 
-      <div v-if="showDateTo" class='col-lg-6 address-valid date-until'>
-         <h3>{{ $t(getValidToDateText) }}</h3>
-         <div class="input-group mb-3">
-            <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
-            <input type="date" class="form-control form-control-lg" name="validTo"
-                   v-bind:placeholder="$t(getValidToDateText)"
-                   v-model="validTo"
-                   aria-describedby="validTo"
-            />
-         </div>
+    <div
+      v-if="showDateTo"
+      class="col-lg-6 address-valid date-until"
+    >
+      <h3>{{ $t(getValidToDateText) }}</h3>
+      <div class="input-group mb-3">
+        <span
+          class="input-group-text"
+          id="validTo"
+        ><i class="fa fa-fw fa-calendar" /></span>
+        <input
+          type="date"
+          class="form-control form-control-lg"
+          name="validTo"
+          :placeholder="$t(getValidToDateText)"
+          v-model="validTo"
+          aria-describedby="validTo"
+        >
       </div>
-   </div>
-
-   <action-buttons v-if="insideModal === false"
-      :options="this.options"
-      :defaultz="this.defaultz">
-      <template v-slot:before>
-         <slot name="before"></slot>
-      </template>
-      <template v-slot:action>
-         <slot name="action"></slot>
-      </template>
-      <template v-slot:after>
-         <slot name="after"></slot>
-      </template>
-   </action-buttons>
+    </div>
+  </div>
 
+  <action-buttons
+    v-if="insideModal === false"
+    :options="this.options"
+    :defaultz="this.defaultz"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #action>
+      <slot name="action" />
+    </template>
+    <template #after>
+      <slot name="after" />
+    </template>
+  </action-buttons>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index c0e42a7b1..375e2ff4c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -1,100 +1,123 @@
 <template>
-   <div class="address-form">
+  <div class="address-form">
+    <!-- Not display in modal -->
+    <div
+      v-if="insideModal === false"
+      class="loading"
+    >
+      <i
+        v-if="flag.loading"
+        class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
+      />
+      <span class="sr-only">Loading...</span>
+    </div>
 
-      <!-- Not display in modal -->
-      <div v-if="insideModal === false" class="loading">
-         <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-         <span class="sr-only">Loading...</span>
+    <div
+      v-if="errors.length"
+      class="alert alert-warning"
+    >
+      <ul>
+        <li
+          v-for="(e, i) in errors"
+          :key="i"
+        >
+          {{ e }}
+        </li>
+      </ul>
+    </div>
+
+    <h4 class="h3">
+      {{ $t('select_an_address_title') }}
+    </h4>
+    <div class="row my-3">
+      <div class="col-lg-6">
+        <div class="form-check">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="isConfidential"
+            v-model="isConfidential"
+            :value="valueConfidential"
+          >
+          <label
+            class="form-check-label"
+            for="isConfidential"
+          >
+            {{ $t('isConfidential') }}
+          </label>
+        </div>
+        <div class="form-check">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="isNoAddress"
+            v-model="isNoAddress"
+            :value="value"
+          >
+          <label
+            class="form-check-label"
+            for="isNoAddress"
+          >
+            {{ $t('isNoAddress') }}
+          </label>
+        </div>
+
+        <country-selection
+          :context="context"
+          :entity="entity"
+          :flag="flag"
+          :check-errors="checkErrors"
+          @get-cities="$emit('getCities', selected.country)"
+        />
+
+        <city-selection
+          :entity="entity"
+          :context="context"
+          :focus-on-address="focusOnAddress"
+          :update-map-center="updateMapCenter"
+          :flag="flag"
+          :check-errors="checkErrors"
+          @get-reference-addresses="$emit('getReferenceAddresses', selected.city)"
+        />
+
+        <address-selection
+          v-if="!isNoAddress"
+          :entity="entity"
+          :context="context"
+          :update-map-center="updateMapCenter"
+          :flag="flag"
+          :check-errors="checkErrors"
+        />
       </div>
-
-      <div v-if="errors.length" class="alert alert-warning" >
-         <ul>
-            <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
-         </ul>
+      <div class="col-lg-6 mt-3 mt-lg-0">
+        <address-map
+          :entity="entity"
+          ref="addressMap"
+        />
       </div>
+    </div>
 
-      <h4 class="h3">{{ $t('select_an_address_title') }}</h4>
-      <div class="row my-3">
-         <div class="col-lg-6">
+    <address-more
+      :entity="entity"
+      :is-no-address="isNoAddress"
+    />
 
-            <div class="form-check">
-               <input type="checkbox"
-                  class="form-check-input"
-                  id="isConfidential"
-                  v-model="isConfidential"
-                  :value="valueConfidential" />
-               <label class="form-check-label" for="isConfidential">
-                  {{ $t('isConfidential') }}
-               </label>
-            </div>
-            <div class="form-check">
-               <input type="checkbox"
-                  class="form-check-input"
-                  id="isNoAddress"
-                  v-model="isNoAddress"
-                  :value="value" />
-               <label class="form-check-label" for="isNoAddress">
-                  {{ $t('isNoAddress') }}
-               </label>
-            </div>
-
-            <country-selection
-               v-bind:context="context"
-               v-bind:entity="entity"
-               v-bind:flag="flag"
-               v-bind:checkErrors="checkErrors"
-               @getCities="$emit('getCities', selected.country)">
-            </country-selection>
-
-            <city-selection
-               v-bind:entity="entity"
-               v-bind:context="context"
-               v-bind:focusOnAddress="focusOnAddress"
-               v-bind:updateMapCenter="updateMapCenter"
-               v-bind:flag="flag"
-               v-bind:checkErrors="checkErrors"
-               @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
-            </city-selection>
-
-            <address-selection v-if="!isNoAddress"
-               v-bind:entity="entity"
-               v-bind:context="context"
-               v-bind:updateMapCenter="updateMapCenter"
-               v-bind:flag="flag"
-               v-bind:checkErrors="checkErrors">
-            </address-selection>
-
-         </div>
-         <div class="col-lg-6 mt-3 mt-lg-0">
-
-            <address-map
-               v-bind:entity="entity"
-               ref="addressMap">
-            </address-map>
-
-         </div>
-      </div>
-
-      <address-more
-         v-bind:entity="entity"
-         v-bind:isNoAddress="isNoAddress">
-      </address-more>
-
-      <action-buttons v-if="insideModal === false"
-         :options="this.options"
-         :defaultz="this.defaultz">
-         <template v-slot:before>
-            <slot name="before"></slot>
-         </template>
-         <template v-slot:action>
-            <slot name="action"></slot>
-         </template>
-         <template v-slot:after>
-            <slot name="after"></slot>
-         </template>
-      </action-buttons>
-
-   </div>
+    <action-buttons
+      v-if="insideModal === false"
+      :options="this.options"
+      :defaultz="this.defaultz"
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+      <template #action>
+        <slot name="action" />
+      </template>
+      <template #after>
+        <slot name="after" />
+      </template>
+    </action-buttons>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index 5048815e2..e54cf0f56 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -1,75 +1,112 @@
 <template>
+  <div
+    v-if="!onlyButton"
+    class="mt-4 flex-grow-1"
+  >
+    <div class="loading">
+      <i
+        v-if="flag.loading"
+        class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
+      />
+      <span class="sr-only">{{ $t('loading') }}</span>
+    </div>
 
-   <div v-if="!onlyButton" class="mt-4 flex-grow-1">
-      <div class="loading">
-         <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-         <span class="sr-only">{{ $t('loading') }}</span>
-      </div>
+    <div
+      v-if="errorMsg && errorMsg.length > 0"
+      class="alert alert-danger"
+    >
+      {{ errorMsg }}
+    </div>
 
-      <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-         {{ errorMsg }}
-      </div>
+    <div
+      v-if="flag.success"
+      class="alert alert-success"
+    >
+      {{ $t(getSuccessText) }}
+      <span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
+    </div>
 
-      <div v-if="flag.success" class="alert alert-success">
-         {{ $t(getSuccessText) }}
-         <span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
-      </div>
+    <div
+      v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')"
+      class="mt-5"
+    >
+      <div class="no-address-yet">
+        <i
+          class="fa fa-map-marker"
+          aria-hidden="true"
+        />
+        <p class="chill-no-data-statement">
+          {{ $t('not_yet_address') }}
+        </p>
 
-      <div v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')" class="mt-5">
-         <div class="no-address-yet">
-            <i class="fa fa-map-marker" aria-hidden="true"></i>
-            <p class="chill-no-data-statement">
-               {{ $t('not_yet_address') }}
-            </p>
-
-            <action-buttons
-               :options="this.options"
-               :defaultz="this.defaultz"
-               class="add-address-btn">
-               <template v-slot:action>
-                  <button @click.prevent="$emit('openEditPane')"
-                     class="btn" :class="getClassButton"
-                     type="button" name="button" :title="$t(getTextButton)">
-                     <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-                  </button>
-               </template>
-            </action-buttons>
-         </div>
-      </div>
-   
-      <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
-   
-      <div v-if="this.context.target.name === 'household' || this.context.edit">
-         <action-buttons
-            :options="this.options"
-            :defaultz="this.defaultz">
-            <template v-slot:action>
-               <button @click.prevent="$emit('openEditPane')"
-                  class="btn" :class="getClassButton"
-                  type="button" name="button" :title="$t(getTextButton)">
-                  <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-               </button>
-            </template>
-         </action-buttons>
-      </div>
-
-   </div>
-
-   <div v-if="onlyButton">
-      <action-buttons
-         :options="this.options"
-         :defaultz="this.defaultz"
-         class="add-address-btn">
-         <template v-slot:action>
-            <button @click.prevent="$emit('openEditPane')"
-               class="btn" :class="getClassButton"
-               type="button" name="button" :title="$t(getTextButton)">
-               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+        <action-buttons
+          :options="this.options"
+          :defaultz="this.defaultz"
+          class="add-address-btn"
+        >
+          <template #action>
+            <button
+              @click.prevent="$emit('openEditPane')"
+              class="btn"
+              :class="getClassButton"
+              type="button"
+              name="button"
+              :title="$t(getTextButton)"
+            >
+              <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
             </button>
-         </template>
+          </template>
+        </action-buttons>
+      </div>
+    </div>
+   
+    <address-render-box
+      :address="address"
+      :is-multiline="false"
+      :use-date-pane="useDatePane"
+    />
+   
+    <div v-if="this.context.target.name === 'household' || this.context.edit">
+      <action-buttons
+        :options="this.options"
+        :defaultz="this.defaultz"
+      >
+        <template #action>
+          <button
+            @click.prevent="$emit('openEditPane')"
+            class="btn"
+            :class="getClassButton"
+            type="button"
+            name="button"
+            :title="$t(getTextButton)"
+          >
+            <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+          </button>
+        </template>
       </action-buttons>
-   </div>
+    </div>
+  </div>
 
+  <div v-if="onlyButton">
+    <action-buttons
+      :options="this.options"
+      :defaultz="this.defaultz"
+      class="add-address-btn"
+    >
+      <template #action>
+        <button
+          @click.prevent="$emit('openEditPane')"
+          class="btn"
+          :class="getClassButton"
+          type="button"
+          name="button"
+          :title="$t(getTextButton)"
+        >
+          <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+        </button>
+      </template>
+    </action-buttons>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
index 798835a76..3ccf59358 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
@@ -1,53 +1,73 @@
 <template>
+  <div
+    v-if="insideModal === false"
+    class="loading"
+  >
+    <i
+      v-if="flag.loading"
+      class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
+    />
+    <span class="sr-only">{{ $t('loading') }}</span>
+  </div>
 
-   <div v-if="insideModal === false" class="loading">
-      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-      <span class="sr-only">{{ $t('loading') }}</span>
-   </div>
+  <div
+    v-if="errorMsg && errorMsg.length > 0"
+    class="alert alert-danger"
+  >
+    {{ errorMsg }}
+  </div>
 
-   <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">{{ errorMsg }}</div>
+  <h4 class="h3">
+    {{ $t('address_suggestions') }}
+  </h4>
 
-   <h4 class="h3">{{ $t('address_suggestions') }}</h4>
-
-   <div class="flex-table AddressSuggestionList">
-      <div v-for="(a, i) in context.suggestions" class="item-bloc" :key="`suggestions-${i}`">
-         <div class="float-button bottom">
-            <div class="box">
-               <div class="action">
-                 <!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
-                  <ul class="record_actions">
-                     <li>
-                        <button class="btn btn-sm btn-choose" @click="this.pickAddress(a)">
-                           {{ $t('use_this_address') }}
-                        </button>
-                     </li>
-                  </ul>
-               </div>
-               <ul class="list-content fa-ul">
-                  <li>
-                     <i class="fa fa-li fa-map-marker"></i>
-                     <address-render-box :address="a"></address-render-box>
-                  </li>
-               </ul>
-            </div>
-         </div>
+  <div class="flex-table AddressSuggestionList">
+    <div
+      v-for="(a, i) in context.suggestions"
+      class="item-bloc"
+      :key="`suggestions-${i}`"
+    >
+      <div class="float-button bottom">
+        <div class="box">
+          <div class="action">
+            <!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
+            <ul class="record_actions">
+              <li>
+                <button
+                  class="btn btn-sm btn-choose"
+                  @click="this.pickAddress(a)"
+                >
+                  {{ $t('use_this_address') }}
+                </button>
+              </li>
+            </ul>
+          </div>
+          <ul class="list-content fa-ul">
+            <li>
+              <i class="fa fa-li fa-map-marker" />
+              <address-render-box :address="a" />
+            </li>
+          </ul>
+        </div>
       </div>
-   </div>
-
-   <action-buttons v-if="insideModal === false"
-      :options="this.options"
-      :defaultz="this.defaultz">
-      <template v-slot:before>
-         <slot name="before"></slot>
-      </template>
-      <template v-slot:action>
-         <slot name="action"></slot>
-      </template>
-      <template v-slot:after>
-         <slot name="after"></slot>
-      </template>
-   </action-buttons>
+    </div>
+  </div>
 
+  <action-buttons
+    v-if="insideModal === false"
+    :options="this.options"
+    :defaultz="this.defaultz"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #action>
+      <slot name="action" />
+    </template>
+    <template #after>
+      <slot name="after" />
+    </template>
+  </action-buttons>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index 02763221a..7b0b79209 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -1,31 +1,36 @@
 <template>
+  <h2>{{ $t('main_title') }}</h2>
 
-   <h2>{{ $t('main_title') }}</h2>
-
-   <ul class="nav nav-tabs">
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyCustoms'}"
-            @click="selectTab('MyCustoms')">
-            <i class="fa fa-dashboard"></i>
-         </a>
-      </li>
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyNotifications'}"
-            @click="selectTab('MyNotifications')">
-            {{ $t('my_notifications.tab') }}
-            <tab-counter :count="state.notifications.count"></tab-counter>
-         </a>
-      </li>
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
-            @click="selectTab('MyAccompanyingCourses')">
-            {{ $t('my_accompanying_courses.tab') }}
-         </a>
-      </li>
-      <!-- <li class="nav-item">
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyCustoms'}"
+        @click="selectTab('MyCustoms')"
+      >
+        <i class="fa fa-dashboard" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyNotifications'}"
+        @click="selectTab('MyNotifications')"
+      >
+        {{ $t('my_notifications.tab') }}
+        <tab-counter :count="state.notifications.count" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyAccompanyingCourses'}"
+        @click="selectTab('MyAccompanyingCourses')"
+      >
+        {{ $t('my_accompanying_courses.tab') }}
+      </a>
+    </li>
+    <!-- <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyWorks'}"
             @click="selectTab('MyWorks')">
@@ -33,58 +38,70 @@
             <tab-counter :count="state.works.count"></tab-counter>
          </a>
       </li> -->
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyEvaluations'}"
-            @click="selectTab('MyEvaluations')">
-            {{ $t('my_evaluations.tab') }}
-            <tab-counter :count="state.evaluations.count"></tab-counter>
-         </a>
-      </li>
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyTasks'}"
-            @click="selectTab('MyTasks')">
-            {{ $t('my_tasks.tab') }}
-            <tab-counter :count="state.tasks.warning.count + state.tasks.alert.count"></tab-counter>
-         </a>
-      </li>
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyWorkflows'}"
-            @click="selectTab('MyWorkflows')">
-            {{ $t('my_workflows.tab') }}
-            <tab-counter :count="state.workflows.count + state.workflowsCc.count"></tab-counter>
-         </a>
-      </li>
-      <li class="nav-item loading ms-auto py-2" v-if="loading">
-         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
-      </li>
-   </ul>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyEvaluations'}"
+        @click="selectTab('MyEvaluations')"
+      >
+        {{ $t('my_evaluations.tab') }}
+        <tab-counter :count="state.evaluations.count" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyTasks'}"
+        @click="selectTab('MyTasks')"
+      >
+        {{ $t('my_tasks.tab') }}
+        <tab-counter :count="state.tasks.warning.count + state.tasks.alert.count" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{'active': activeTab === 'MyWorkflows'}"
+        @click="selectTab('MyWorkflows')"
+      >
+        {{ $t('my_workflows.tab') }}
+        <tab-counter :count="state.workflows.count + state.workflowsCc.count" />
+      </a>
+    </li>
+    <li
+      class="nav-item loading ms-auto py-2"
+      v-if="loading"
+    >
+      <i
+        class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
+        :title="$t('loading')"
+      />
+    </li>
+  </ul>
 
-   <div class="my-4">
-      <my-customs
-         v-if="activeTab === 'MyCustoms'">
-      </my-customs>
-      <my-works
-         v-else-if="activeTab === 'MyWorks'">
-      </my-works>
-      <my-evaluations
-         v-else-if="activeTab === 'MyEvaluations'">
-      </my-evaluations>
-      <my-tasks
-         v-else-if="activeTab === 'MyTasks'">
-      </my-tasks>
-      <my-accompanying-courses
-         v-else-if="activeTab === 'MyAccompanyingCourses'">
-      </my-accompanying-courses>
-      <my-notifications
-         v-else-if="activeTab === 'MyNotifications'">
-      </my-notifications>
-      <my-workflows
-         v-else-if="activeTab === 'MyWorkflows'">
-      </my-workflows>
-   </div>
+  <div class="my-4">
+    <my-customs
+      v-if="activeTab === 'MyCustoms'"
+    />
+    <my-works
+      v-else-if="activeTab === 'MyWorks'"
+    />
+    <my-evaluations
+      v-else-if="activeTab === 'MyEvaluations'"
+    />
+    <my-tasks
+      v-else-if="activeTab === 'MyTasks'"
+    />
+    <my-accompanying-courses
+      v-else-if="activeTab === 'MyAccompanyingCourses'"
+    />
+    <my-notifications
+      v-else-if="activeTab === 'MyNotifications'"
+    />
+    <my-workflows
+      v-else-if="activeTab === 'MyWorkflows'"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
index 1c3b5e152..c0efb400d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -1,48 +1,77 @@
 <template>
-   <div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('opening_date') }}</th>
-         <th scope="col">{{ $t('social_issues') }}</th>
-         <th scope="col">{{ $t('concerned_persons') }}</th>
-         <th scope="col"></th>
-         <th scope="col"></th>
-      </template>
-      <template v-slot:tbody>
-         <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
-            <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
-            <td>
-               <span v-for="i in c.socialIssues"
-                  class="chill-entity entity-social-issue">
-                  <span class="badge bg-chill-l-gray text-dark">
-                     {{ i.title.fr }}
-                  </span>
-               </span>
-            </td>
-            <td>
-               <span v-for="p in c.participations" class="me-1" :key="p.person.id">
-                  <on-the-fly
-                     :type="p.person.type"
-                     :id="p.person.id"
-                     :buttonText="p.person.textAge"
-                     :displayBadge="'true' === 'true'"
-                     action="show">
-                  </on-the-fly>
-               </span>
-            </td>
-            <td>
-               <span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{ $t('emergency') }}</span>
-               <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{ $t('confidential') }}</span>
-            </td>
-            <td>
-               <a class="btn btn-sm btn-show" :href="getUrl(c)">
-                  {{ $t('show_entity', { entity: $t('the_course') }) }}
-               </a>
-            </td>
-         </tr>
-      </template>
-   </tab-table>
+  <div class="alert alert-light">
+    {{ $t('my_accompanying_courses.description') }}
+  </div>
+  <span
+    v-if="noResults"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t('opening_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('social_issues') }}
+      </th>
+      <th scope="col">
+        {{ $t('concerned_persons') }}
+      </th>
+      <th scope="col" />
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr
+        v-for="(c, i) in accompanyingCourses.results"
+        :key="`course-${i}`"
+      >
+        <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
+        <td>
+          <span
+            v-for="i in c.socialIssues"
+            class="chill-entity entity-social-issue"
+          >
+            <span class="badge bg-chill-l-gray text-dark">
+              {{ i.title.fr }}
+            </span>
+          </span>
+        </td>
+        <td>
+          <span
+            v-for="p in c.participations"
+            class="me-1"
+            :key="p.person.id"
+          >
+            <on-the-fly
+              :type="p.person.type"
+              :id="p.person.id"
+              :button-text="p.person.textAge"
+              :display-badge="'true' === 'true'"
+              action="show"
+            />
+          </span>
+        </td>
+        <td>
+          <span
+            v-if="c.emergency"
+            class="badge rounded-pill bg-danger me-1"
+          >{{ $t('emergency') }}</span>
+          <span
+            v-if="c.confidential"
+            class="badge rounded-pill bg-danger"
+          >{{ $t('confidential') }}</span>
+        </td>
+        <td>
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(c)"
+          >
+            {{ $t('show_entity', { entity: $t('the_course') }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index 43ad31c45..1e1233f5a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -1,54 +1,105 @@
 <template>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
-   <div v-else id="dashboards" class="container g-3">
-       <div class="row">
-           <div class="mbloc col-xs-12 col-sm-4">
-               <div class="custom1">
-                   <ul class="list-unstyled">
-                       <li v-if="counter.notifications > 0">
-                           <i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
-                               <template v-slot:n><span>{{ counter.notifications }}</span></template>
-                           </i18n-t>
-                       </li>
-                       <li v-if="counter.accompanyingCourses > 0">
-                           <i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
-                               <template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
-                           </i18n-t>
-                       </li>
-                       <li v-if="counter.works > 0">
-                           <i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
-                               <template v-slot:n><span>{{ counter.works }}</span></template>
-                           </i18n-t>
-                       </li>
-                       <li v-if="counter.evaluations > 0">
-                           <i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
-                               <template v-slot:n><span>{{ counter.evaluations }}</span></template>
-                           </i18n-t>
-                       </li>
-                       <li v-if="counter.tasksAlert > 0">
-                           <i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
-                               <template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
-                           </i18n-t>
-                       </li>
-                       <li v-if="counter.tasksWarning > 0">
-                           <i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
-                               <template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
-                           </i18n-t>
-                       </li>
-                   </ul>
-               </div>
-           </div>
+  <span
+    v-if="noResults"
+    class="chill-no-data-statement"
+  >{{ $t('no_dashboard') }}</span>
+  <div
+    v-else
+    id="dashboards"
+    class="container g-3"
+  >
+    <div class="row">
+      <div class="mbloc col-xs-12 col-sm-4">
+        <div class="custom1">
+          <ul class="list-unstyled">
+            <li v-if="counter.notifications > 0">
+              <i18n-t
+                keypath="counter.unread_notifications"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.notifications"
+              >
+                <template #n>
+                  <span>{{ counter.notifications }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.accompanyingCourses > 0">
+              <i18n-t
+                keypath="counter.assignated_courses"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.accompanyingCourses"
+              >
+                <template #n>
+                  <span>{{ counter.accompanyingCourses }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.works > 0">
+              <i18n-t
+                keypath="counter.assignated_actions"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.works"
+              >
+                <template #n>
+                  <span>{{ counter.works }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.evaluations > 0">
+              <i18n-t
+                keypath="counter.assignated_evaluations"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.evaluations"
+              >
+                <template #n>
+                  <span>{{ counter.evaluations }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.tasksAlert > 0">
+              <i18n-t
+                keypath="counter.alert_tasks"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.tasksAlert"
+              >
+                <template #n>
+                  <span>{{ counter.tasksAlert }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.tasksWarning > 0">
+              <i18n-t
+                keypath="counter.warning_tasks"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.tasksWarning"
+              >
+                <template #n>
+                  <span>{{ counter.tasksWarning }}</span>
+                </template>
+              </i18n-t>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-           <template v-if="this.hasDashboardItems">
-               <template v-for="dashboardItem in this.dashboardItems">
-                   <div class="mbloc col-xs-12 col-sm-8 news" v-if="dashboardItem.type === 'news'">
-                       <News />
-                   </div>
-               </template>
-           </template>
-
-       </div>
-   </div>
+      <template v-if="this.hasDashboardItems">
+        <template v-for="dashboardItem in this.dashboardItems">
+          <div
+            class="mbloc col-xs-12 col-sm-8 news"
+            v-if="dashboardItem.type === 'news'"
+          >
+            <News />
+          </div>
+        </template>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
index bc043c666..e9e207d4d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -1,56 +1,84 @@
 <template>
-<div class="accompanying-course-work">
-   <div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('max_date') }}</th>
-         <th scope="col">{{ $t('evaluation') }}</th>
-         <th scope="col">{{ $t('SocialAction') }}</th>
-         <th scope="col"></th>
+  <div class="accompanying-course-work">
+    <div class="alert alert-light">
+      {{ $t('my_evaluations.description') }}
+    </div>
+    <span
+      v-if="noResults"
+      class="chill-no-data-statement"
+    >{{ $t('no_data') }}</span>
+    <tab-table v-else>
+      <template #thead>
+        <th scope="col">
+          {{ $t('max_date') }}
+        </th>
+        <th scope="col">
+          {{ $t('evaluation') }}
+        </th>
+        <th scope="col">
+          {{ $t('SocialAction') }}
+        </th>
+        <th scope="col" />
       </template>
-      <template v-slot:tbody>
-         <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
-            <td>{{ $d(e.maxDate.datetime, 'short') }}</td>
-            <td>
-               {{ e.evaluation.title.fr }}
-            </td>
-            <td>
-               <span class="chill-entity entity-social-issue">
-                  <span class="badge bg-chill-l-gray text-dark">
-                     {{ e.accompanyingPeriodWork.socialAction.issue.text }}
-                  </span>
-               </span>
-               <h4 class="badge-title">
-                  <span class="title_label"></span>
-                  <span class="title_action">
-                     {{ e.accompanyingPeriodWork.socialAction.text }}
-                  </span>
-               </h4>
-               <span v-for="person in e.accompanyingPeriodWork.persons" class="me-1" :key="person.id">
-                  <on-the-fly
-                     :type="person.type"
-                     :id="person.id"
-                     :buttonText="person.textAge"
-                     :displayBadge="'true' === 'true'"
-                     action="show">
-                  </on-the-fly>
-               </span>
-            </td>
-            <td>
-               <div class="btn-group-vertical" role="group" aria-label="Actions">
-                  <a class="btn btn-sm btn-show" :href="getUrl(e)">
-                     {{ $t('show_entity', { entity: $t('the_evaluation') }) }}
-                  </a>
-                  <a class="btn btn-sm btn-show" :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)">
-                     {{ $t('show_entity', { entity: $t('the_course') }) }}
-                  </a>
-               </div>
-            </td>
-         </tr>
+      <template #tbody>
+        <tr
+          v-for="(e, i) in evaluations.results"
+          :key="`evaluation-${i}`"
+        >
+          <td>{{ $d(e.maxDate.datetime, 'short') }}</td>
+          <td>
+            {{ e.evaluation.title.fr }}
+          </td>
+          <td>
+            <span class="chill-entity entity-social-issue">
+              <span class="badge bg-chill-l-gray text-dark">
+                {{ e.accompanyingPeriodWork.socialAction.issue.text }}
+              </span>
+            </span>
+            <h4 class="badge-title">
+              <span class="title_label" />
+              <span class="title_action">
+                {{ e.accompanyingPeriodWork.socialAction.text }}
+              </span>
+            </h4>
+            <span
+              v-for="person in e.accompanyingPeriodWork.persons"
+              class="me-1"
+              :key="person.id"
+            >
+              <on-the-fly
+                :type="person.type"
+                :id="person.id"
+                :button-text="person.textAge"
+                :display-badge="'true' === 'true'"
+                action="show"
+              />
+            </span>
+          </td>
+          <td>
+            <div
+              class="btn-group-vertical"
+              role="group"
+              aria-label="Actions"
+            >
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(e)"
+              >
+                {{ $t('show_entity', { entity: $t('the_evaluation') }) }}
+              </a>
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)"
+              >
+                {{ $t('show_entity', { entity: $t('the_course') }) }}
+              </a>
+            </div>
+          </td>
+        </tr>
       </template>
-   </tab-table>
-</div>
+    </tab-table>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
index b7cf2bcf0..7d9dcc885 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
@@ -1,33 +1,53 @@
 <template>
-   <div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('Date') }}</th>
-         <th scope="col">{{ $t('Subject') }}</th>
-         <th scope="col">{{ $t('From') }}</th>
-         <th scope="col"></th>
-      </template>
-      <template v-slot:tbody>
-         <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
-            <td>{{ $d(n.date.datetime, 'long') }}</td>
-            <td>
-               <span class="unread">
-                  <i class="fa fa-envelope-o"></i>
-                  <a :href="getNotificationUrl(n)">{{ n.title }}</a>
-               </span>
-            </td>
-            <td v-if="n.sender != null">{{ n.sender.text }}</td>
-            <td v-else>{{ $t('automatic_notification')}}</td>
-            <td>
-               <a class="btn btn-sm btn-show"
-                  :href="getEntityUrl(n)">
-                  {{ $t('show_entity', { entity: getEntityName(n) }) }}
-               </a>
-            </td>
-         </tr>
-      </template>
-   </tab-table>
+  <div class="alert alert-light">
+    {{ $t('my_notifications.description') }}
+  </div>
+  <span
+    v-if="noResults"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t('Date') }}
+      </th>
+      <th scope="col">
+        {{ $t('Subject') }}
+      </th>
+      <th scope="col">
+        {{ $t('From') }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr
+        v-for="(n, i) in notifications.results"
+        :key="`notify-${i}`"
+      >
+        <td>{{ $d(n.date.datetime, 'long') }}</td>
+        <td>
+          <span class="unread">
+            <i class="fa fa-envelope-o" />
+            <a :href="getNotificationUrl(n)">{{ n.title }}</a>
+          </span>
+        </td>
+        <td v-if="n.sender != null">
+          {{ n.sender.text }}
+        </td>
+        <td v-else>
+          {{ $t('automatic_notification') }}
+        </td>
+        <td>
+          <a
+            class="btn btn-sm btn-show"
+            :href="getEntityUrl(n)"
+          >
+            {{ $t('show_entity', { entity: getEntityName(n) }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
index 77a2bd34c..6ba176f7f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
@@ -1,56 +1,90 @@
 <template>
+  <div class="alert alert-light">
+    {{ $t('my_tasks.description_warning') }}
+  </div>
+  <span
+    v-if="noResultsAlert"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t('warning_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('max_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('task') }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr
+        v-for="(t, i) in tasks.alert.results"
+        :key="`task-alert-${i}`"
+      >
+        <td v-if="null !== t.warningDate">
+          {{ $d(t.warningDate.datetime, 'short') }}
+        </td>
+        <td v-else />
+        <td>
+          <span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
+        </td>
+        <td>{{ t.title }}</td>
+        <td>
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(t)"
+          >
+            {{ $t('show_entity', { entity: $t('the_task') }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 
-   <div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
-   <span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('warning_date') }}</th>
-         <th scope="col">{{ $t('max_date') }}</th>
-         <th scope="col">{{ $t('task') }}</th>
-         <th scope="col"></th>
-      </template>
-      <template v-slot:tbody>
-         <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
-            <td v-if="null !== t.warningDate">{{ $d(t.warningDate.datetime, 'short') }}</td>
-            <td v-else></td>
-            <td>
-               <span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
-            </td>
-            <td>{{ t.title }}</td>
-            <td>
-               <a class="btn btn-sm btn-show" :href="getUrl(t)">
-                  {{ $t('show_entity', { entity: $t('the_task') }) }}
-               </a>
-            </td>
-         </tr>
-      </template>
-   </tab-table>
-
-   <div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
-   <span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('warning_date') }}</th>
-         <th scope="col">{{ $t('max_date') }}</th>
-         <th scope="col">{{ $t('task') }}</th>
-         <th scope="col"></th>
-      </template>
-      <template v-slot:tbody>
-         <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
-            <td>
-               <span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
-            </td>
-            <td>{{ $d(t.endDate.datetime, 'short') }}</td>
-            <td>{{ t.title }}</td>
-            <td>
-               <a class="btn btn-sm btn-show" :href="getUrl(t)">
-                  {{ $t('show_entity', { entity: $t('the_task') }) }}
-               </a>
-            </td>
-         </tr>
-      </template>
-   </tab-table>
-
+  <div class="alert alert-light">
+    {{ $t('my_tasks.description_alert') }}
+  </div>
+  <span
+    v-if="noResultsWarning"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t('warning_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('max_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('task') }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr
+        v-for="(t, i) in tasks.warning.results"
+        :key="`task-warning-${i}`"
+      >
+        <td>
+          <span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
+        </td>
+        <td>{{ $d(t.endDate.datetime, 'short') }}</td>
+        <td>{{ t.title }}</td>
+        <td>
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(t)"
+          >
+            {{ $t('show_entity', { entity: $t('the_task') }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
index 51bda315e..78ccc78cf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
@@ -1,9 +1,13 @@
 <template>
-    <div class="alert alert-light">{{ $t('my_workflows.description') }}</div>
-    <my-workflows-table :workflows="workflows" />
+  <div class="alert alert-light">
+    {{ $t('my_workflows.description') }}
+  </div>
+  <my-workflows-table :workflows="workflows" />
 
-    <div class="alert alert-light">{{ $t('my_workflows.description_cc') }}</div>
-    <my-workflows-table :workflows="workflowsCc" />
+  <div class="alert alert-light">
+    {{ $t('my_workflows.description_cc') }}
+  </div>
+  <my-workflows-table :workflows="workflowsCc" />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
index f98d7a5cb..15337aaf0 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
@@ -1,42 +1,61 @@
 <template>
-    <span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-    <tab-table v-else>
-        <template v-slot:thead>
-            <th scope="col">{{ $t('Object_workflow') }}</th>
-            <th scope="col">{{ $t('Step') }}</th>
-            <th scope="col">{{ $t('concerned_users') }}</th>
-            <th scope="col"></th>
-        </template>
-        <template v-slot:tbody>
-            <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
-                <td>{{ w.title }}</td>
-                <td>
-                    <div class="workflow">
-                        <div class="breadcrumb">
-                            <i class="fa fa-circle me-1 text-chill-yellow mx-2"></i>
-                            <span class="mx-2">{{ getStep(w) }}</span>
-                        </div>
-                    </div>
-                </td>
-                <td v-if="w.datas.persons !== null">
-                    <span v-for="p in w.datas.persons" class="me-1" :key="p.id">
-                        <on-the-fly
-                            :type="p.type"
-                            :id="p.id"
-                            :buttonText="p.textAge"
-                            :displayBadge="'true' === 'true'"
-                            action="show">
-                        </on-the-fly>
-                    </span>
-                </td>
-                <td>
-                <a class="btn btn-sm btn-show" :href="getUrl(w)">
-                    {{ $t('show_entity', { entity: $t('the_workflow') }) }}
-                </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <span
+    v-if="hasNoResults(workflows)"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t('Object_workflow') }}
+      </th>
+      <th scope="col">
+        {{ $t('Step') }}
+      </th>
+      <th scope="col">
+        {{ $t('concerned_users') }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr
+        v-for="(w, i) in workflows.results"
+        :key="`workflow-${i}`"
+      >
+        <td>{{ w.title }}</td>
+        <td>
+          <div class="workflow">
+            <div class="breadcrumb">
+              <i class="fa fa-circle me-1 text-chill-yellow mx-2" />
+              <span class="mx-2">{{ getStep(w) }}</span>
+            </div>
+          </div>
+        </td>
+        <td v-if="w.datas.persons !== null">
+          <span
+            v-for="p in w.datas.persons"
+            class="me-1"
+            :key="p.id"
+          >
+            <on-the-fly
+              :type="p.type"
+              :id="p.id"
+              :button-text="p.textAge"
+              :display-badge="'true' === 'true'"
+              action="show"
+            />
+          </span>
+        </td>
+        <td>
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(w)"
+          >
+            {{ $t('show_entity', { entity: $t('the_workflow') }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
index 78f78300f..5a651f1a1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -1,56 +1,84 @@
 // CURRENTLY NOT IN USE
 <template>
-<div class="accompanying-course-work">
-   <div class="alert alert-light">{{ $t('my_works.description') }}</div>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
-   <tab-table v-else>
-      <template v-slot:thead>
-         <th scope="col">{{ $t('StartDate') }}</th>
-         <th scope="col">{{ $t('SocialAction') }}</th>
-         <th scope="col">{{ $t('concerned_persons') }}</th>
-         <th scope="col"></th>
+  <div class="accompanying-course-work">
+    <div class="alert alert-light">
+      {{ $t('my_works.description') }}
+    </div>
+    <span
+      v-if="noResults"
+      class="chill-no-data-statement"
+    >{{ $t('no_data') }}</span>
+    <tab-table v-else>
+      <template #thead>
+        <th scope="col">
+          {{ $t('StartDate') }}
+        </th>
+        <th scope="col">
+          {{ $t('SocialAction') }}
+        </th>
+        <th scope="col">
+          {{ $t('concerned_persons') }}
+        </th>
+        <th scope="col" />
       </template>
-      <template v-slot:tbody>
-         <tr v-for="(w, i) in works.results" :key="`works-${i}`">
-            <td>{{ $d(w.startDate.datetime, 'short') }}</td>
-            <td>
-               <span class="chill-entity entity-social-issue">
-                  <span class="badge bg-chill-l-gray text-dark">
-                     {{ w.socialAction.issue.text }}
-                  </span>
-               </span>
-               <h4 class="badge-title">
-                  <span class="title_label"></span>
-                  <span class="title_action">
-                     {{ w.socialAction.text }}
-                  </span>
-               </h4>
-            </td>
-            <td>
-               <span v-for="person in w.persons" class="me-1" :key="person.id">
-                  <on-the-fly
-                     :type="person.type"
-                     :id="person.id"
-                     :buttonText="person.textAge"
-                     :displayBadge="'true' === 'true'"
-                     action="show">
-                  </on-the-fly>
-               </span>
-            </td>
-            <td>
-               <div class="btn-group-vertical" role="group" aria-label="Actions">
-                  <a class="btn btn-sm btn-update" :href="getUrl(w)">
-                     {{ $t('show_entity', { entity: $t('the_action') }) }}
-                  </a>
-                  <a class="btn btn-sm btn-show" :href="getUrl(w.accompanyingPeriod)">
-                     {{ $t('show_entity', { entity: $t('the_course') }) }}
-                  </a>
-               </div>
-            </td>
-         </tr>
+      <template #tbody>
+        <tr
+          v-for="(w, i) in works.results"
+          :key="`works-${i}`"
+        >
+          <td>{{ $d(w.startDate.datetime, 'short') }}</td>
+          <td>
+            <span class="chill-entity entity-social-issue">
+              <span class="badge bg-chill-l-gray text-dark">
+                {{ w.socialAction.issue.text }}
+              </span>
+            </span>
+            <h4 class="badge-title">
+              <span class="title_label" />
+              <span class="title_action">
+                {{ w.socialAction.text }}
+              </span>
+            </h4>
+          </td>
+          <td>
+            <span
+              v-for="person in w.persons"
+              class="me-1"
+              :key="person.id"
+            >
+              <on-the-fly
+                :type="person.type"
+                :id="person.id"
+                :button-text="person.textAge"
+                :display-badge="'true' === 'true'"
+                action="show"
+              />
+            </span>
+          </td>
+          <td>
+            <div
+              class="btn-group-vertical"
+              role="group"
+              aria-label="Actions"
+            >
+              <a
+                class="btn btn-sm btn-update"
+                :href="getUrl(w)"
+              >
+                {{ $t('show_entity', { entity: $t('the_action') }) }}
+              </a>
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(w.accompanyingPeriod)"
+              >
+                {{ $t('show_entity', { entity: $t('the_course') }) }}
+              </a>
+            </div>
+          </td>
+        </tr>
       </template>
-   </tab-table>
-</div>
+    </tab-table>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
index 8a72c37bd..1f113b547 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
@@ -1,8 +1,10 @@
 <template>
-   <span v-if="isCounterAvailable"
-         class="badge rounded-pill bg-danger">
-      {{ count }}
-   </span>
+  <span
+    v-if="isCounterAvailable"
+    class="badge rounded-pill bg-danger"
+  >
+    {{ count }}
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
index 15a2fe632..1f6c66677 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
@@ -1,14 +1,14 @@
 <template>
-   <table class="table table-striped table-hover">
-      <thead>
-         <tr>
-            <slot name="thead"></slot>
-         </tr>
-      </thead>
-      <tbody>
-         <slot name="tbody"></slot>
-      </tbody>
-   </table>
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <slot name="thead" />
+      </tr>
+    </thead>
+    <tbody>
+      <slot name="tbody" />
+    </tbody>
+  </table>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
index 7b3b04686..5acd992bc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
@@ -1,14 +1,14 @@
 <template>
-    <on-the-fly
-        :type="context.type"
-        :id="context.id"
-        :action="context.action"
-        :buttonText="options.buttonText"
-        :displayBadge="options.displayBadge === 'true'"
-        :isDead="options.isDead"
-        :parent="options.parent"
-        @saveFormOnTheFly="saveFormOnTheFly">
-    </on-the-fly>
+  <on-the-fly
+    :type="context.type"
+    :id="context.id"
+    :action="context.action"
+    :button-text="options.buttonText"
+    :display-badge="options.displayBadge === 'true'"
+    :is-dead="options.isDead"
+    :parent="options.parent"
+    @save-form-on-the-fly="saveFormOnTheFly"
+  />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
index 22b0181e5..9823a5818 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
@@ -1,40 +1,62 @@
 <template>
-   <ul class="nav nav-tabs">
-      <li v-if="allowedTypes.includes('person')" class="nav-item">
-         <a class="nav-link" :class="{ active: isActive('person') }">
-            <label for="person">
-               <input type="radio" name="person" id="person" v-model="radioType" value="person">
-               {{ $t('onthefly.create.person') }}
-            </label>
-         </a>
-      </li>
-      <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
-         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
-            <label for="thirdparty">
-               <input type="radio" name="thirdparty" id="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'"
-         :action="action"
-         :query="query"
-         ref="castPerson"
+  <ul class="nav nav-tabs">
+    <li
+      v-if="allowedTypes.includes('person')"
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        :class="{ active: isActive('person') }"
       >
-      </on-the-fly-person>
-
-      <on-the-fly-thirdparty
-         v-if="type === 'thirdparty'"
-         :action="action"
-         :query="query"
-         ref="castThirdparty"
+        <label for="person">
+          <input
+            type="radio"
+            name="person"
+            id="person"
+            v-model="radioType"
+            value="person"
+          >
+          {{ $t('onthefly.create.person') }}
+        </label>
+      </a>
+    </li>
+    <li
+      v-if="allowedTypes.includes('thirdparty')"
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        :class="{ active: isActive('thirdparty') }"
       >
-      </on-the-fly-thirdparty>
-   </div>
+        <label for="thirdparty">
+          <input
+            type="radio"
+            name="thirdparty"
+            id="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'"
+      :action="action"
+      :query="query"
+      ref="castPerson"
+    />
+
+    <on-the-fly-thirdparty
+      v-if="type === 'thirdparty'"
+      :action="action"
+      :query="query"
+      ref="castThirdparty"
+    />
+  </div>
 </template>
 
 <script>
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 28a51c4e6..1db0b5c9f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
@@ -1,91 +1,125 @@
 <template>
-
-   <a v-if="isDisplayBadge" @click="openModal">
-      <span class="chill-entity" :class="badgeType">
-         {{ buttonText }}<span v-if="isDead"> (‡)</span>
-      </span>
-   </a>
-   <a v-else class="btn btn-sm" target="_blank"
-      :class="classAction"
-      :title="$t(titleAction)"
-      @click="openModal">
+  <a
+    v-if="isDisplayBadge"
+    @click="openModal"
+  >
+    <span
+      class="chill-entity"
+      :class="badgeType"
+    >
       {{ buttonText }}<span v-if="isDead"> (‡)</span>
-   </a>
+    </span>
+  </a>
+  <a
+    v-else
+    class="btn btn-sm"
+    target="_blank"
+    :class="classAction"
+    :title="$t(titleAction)"
+    @click="openModal"
+  >
+    {{ buttonText }}<span v-if="isDead"> (‡)</span>
+  </a>
 
-   <teleport to="body">
-      <modal v-if="modal.showModal"
-         :modalDialogClass="modal.modalDialogClass"
-         @close="modal.showModal = false">
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h3
+          v-if="parent"
+          class="modal-title"
+        >
+          {{ $t(titleModal, {q: parent.text}) }}
+        </h3>
+        <h3
+          v-else
+          class="modal-title"
+        >
+          {{ $t(titleModal) }}
+        </h3>
+      </template>
 
-         <template v-slot:header>
-            <h3 v-if="parent" class="modal-title">{{ $t(titleModal, {q: parent.text}) }}</h3>
-            <h3 v-else class="modal-title">{{ $t(titleModal) }}</h3>
-         </template>
+      <template
+        #body
+        v-if="type === 'person'"
+      >
+        <on-the-fly-person
+          :id="id"
+          :type="type"
+          :action="action"
+          ref="castPerson"
+        />
+        <div v-if="hasResourceComment">
+          <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
+          <blockquote class="chill-user-quote">
+            {{ parent.comment }}
+          </blockquote>
+        </div>
+      </template>
 
-         <template v-slot:body v-if="type === 'person'">
-            <on-the-fly-person
-               :id="id"
-               :type="type"
-               :action="action"
-               ref="castPerson">
-            </on-the-fly-person>
-            <div v-if="hasResourceComment">
-               <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
-               <blockquote class="chill-user-quote">
-                  {{ parent.comment }}
-               </blockquote>
-            </div>
-         </template>
+      <template
+        #body
+        v-else-if="type === 'thirdparty'"
+      >
+        <on-the-fly-thirdparty
+          :id="id"
+          :type="type"
+          :action="action"
+          ref="castThirdparty"
+        />
+        <div v-if="hasResourceComment">
+          <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
+          <blockquote class="chill-user-quote">
+            {{ parent.comment }}
+          </blockquote>
+        </div>
+      </template>
 
-         <template v-slot:body v-else-if="type === 'thirdparty'">
-            <on-the-fly-thirdparty
-               :id="id"
-               :type="type"
-               :action="action"
-               ref="castThirdparty">
-            </on-the-fly-thirdparty>
-            <div v-if="hasResourceComment">
-               <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
-               <blockquote class="chill-user-quote">
-                  {{ parent.comment }}
-               </blockquote>
-            </div>
-         </template>
+      <template
+        #body
+        v-else-if="parent"
+      >
+        <on-the-fly-thirdparty
+          :parent="parent"
+          :action="action"
+          type="thirdparty"
+          ref="castThirdparty"
+        />
+      </template>
 
-         <template v-slot:body v-else-if="parent">
-            <on-the-fly-thirdparty
-               :parent="parent"
-               :action="action"
-               type="thirdparty"
-               ref="castThirdparty">
-            </on-the-fly-thirdparty>
-         </template>
-
-         <template v-slot:body v-else>
-            <on-the-fly-create
-               :action="action"
-               :allowedTypes="allowedTypes"
-               :query="query"
-               ref="castNew">
-            </on-the-fly-create>
-         </template>
-
-         <template v-slot:footer>
-            <a v-if="action === 'show'"
-               :href="buildLocation(id, type)"
-               :title="$t(titleMessage)"
-               class="btn btn-show">{{ $t(buttonMessage) }}
-            </a>
-            <a v-else
-               class="btn btn-save"
-               @click="saveAction">
-               {{ $t('action.save')}}
-            </a>
-         </template>
-
-      </modal>
-   </teleport>
+      <template
+        #body
+        v-else
+      >
+        <on-the-fly-create
+          :action="action"
+          :allowed-types="allowedTypes"
+          :query="query"
+          ref="castNew"
+        />
+      </template>
 
+      <template #footer>
+        <a
+          v-if="action === 'show'"
+          :href="buildLocation(id, type)"
+          :title="$t(titleMessage)"
+          class="btn btn-show"
+        >{{ $t(buttonMessage) }}
+        </a>
+        <a
+          v-else
+          class="btn btn-save"
+          @click="saveAction"
+        >
+          {{ $t('action.save') }}
+        </a>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
index 75abc4fdd..364380159 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
@@ -1,25 +1,37 @@
 <template>
-    <ul :class="listClasses" v-if="picked.length && displayPicked">
-        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
-            <span class="chill_denomination">{{ p.text }}</span>
-        </li>
-    </ul>
-    <ul class="record_actions">
-        <li class="add-persons">
-            <add-persons
-                :options="addPersonsOptions"
-                :key="uniqid"
-                :buttonTitle="translatedListOfTypes"
-                :modalTitle="translatedListOfTypes"
-                ref="addPersons"
-                @addNewPersons="addNewEntity"
-            >
-            </add-persons>
-        </li>
-    </ul>
-    <ul class="list-suggest add-items inline">
-      <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
-    </ul>
+  <ul
+    :class="listClasses"
+    v-if="picked.length && displayPicked"
+  >
+    <li
+      v-for="p in picked"
+      @click="removeEntity(p)"
+      :key="p.type+p.id"
+    >
+      <span class="chill_denomination">{{ p.text }}</span>
+    </li>
+  </ul>
+  <ul class="record_actions">
+    <li class="add-persons">
+      <add-persons
+        :options="addPersonsOptions"
+        :key="uniqid"
+        :button-title="translatedListOfTypes"
+        :modal-title="translatedListOfTypes"
+        ref="addPersons"
+        @add-new-persons="addNewEntity"
+      />
+    </li>
+  </ul>
+  <ul class="list-suggest add-items inline">
+    <li
+      v-for="s in suggested"
+      :key="s.id"
+      @click="addNewSuggested(s)"
+    >
+      <span>{{ s.text }}</span>
+    </li>
+  </ul>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
index d5e55dbbd..456ce14bf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
@@ -1,26 +1,27 @@
 <template>
-    <div class="PickPostalCode">
-      <vue-multiselect
-       id="citySelector"
-       @search-change="listenInputSearch"
-       ref="citySelector"
-       v-model="internalPicked"
-       @select="selectCity"
-       @remove="remove"
-       name=""
-       track-by="id"
-       label="value"
-       :custom-label="transName"
-       :placeholder="$t('select_city')"
-       :select-label="$t('multiselect.select_label')"
-       :deselect-label="$t('multiselect.deselect_label')"
-       :selected-label="$t('multiselect.selected_label')"
-       :taggable="true"
-       :multiple="false"
-       :internal-search="false"
-       :loading="isLoading"
-       :options="cities"></vue-multiselect>
-    </div>
+  <div class="PickPostalCode">
+    <vue-multiselect
+      id="citySelector"
+      @search-change="listenInputSearch"
+      ref="citySelector"
+      v-model="internalPicked"
+      @select="selectCity"
+      @remove="remove"
+      name=""
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_city')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      :taggable="true"
+      :multiple="false"
+      :internal-search="false"
+      :loading="isLoading"
+      :options="cities"
+    />
+  </div>
 </template>
 
 <script lang="js">
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
index 4e99b7fd3..d72758400 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -1,34 +1,52 @@
 <template>
+  <span
+    v-if="entity.type === 'person'"
+    class="badge rounded-pill bg-person"
+  >
+    {{ $t('person') }}
+  </span>
 
-    <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
-        {{ $t('person') }}
-    </span>
+  <span
+    v-if="entity.type === 'thirdparty'"
+    class="badge rounded-pill bg-thirdparty"
+  >
+    <template v-if="options.displayLong !== true">
+      {{ $t('thirdparty.thirdparty') }}
+    </template>
 
-    <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
-        <template v-if="options.displayLong !== true">
-            {{ $t('thirdparty.thirdparty')}}
-        </template>
+    <i
+      class="fa fa-fw fa-user"
+      v-if="entity.kind === 'child'"
+    />
+    <i
+      class="fa fa-fw fa-hospital-o"
+      v-else-if="entity.kind === 'company'"
+    />
+    <i
+      class="fa fa-fw fa-user-md"
+      v-else
+    />
 
-        <i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
-        <i class="fa fa-fw fa-hospital-o" v-else-if="entity.kind === 'company'"></i>
-        <i class="fa fa-fw fa-user-md" v-else></i>
-
-        <template v-if="options.displayLong === true">
-            <span v-if="entity.kind === 'child'">{{ $t('thirdparty.child')}}</span>
-            <span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company')}}</span>
-            <span v-else>{{ $t('thirdparty.contact')}}</span>
-        </template>
-    </span>
-
-    <span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
-        {{ $t('user')}}
-    </span>
-
-    <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
-        {{ $t('household')}}
-    </span>
+    <template v-if="options.displayLong === true">
+      <span v-if="entity.kind === 'child'">{{ $t('thirdparty.child') }}</span>
+      <span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company') }}</span>
+      <span v-else>{{ $t('thirdparty.contact') }}</span>
+    </template>
+  </span>
 
+  <span
+    v-if="entity.type === 'user'"
+    class="badge rounded-pill bg-user"
+  >
+    {{ $t('user') }}
+  </span>
 
+  <span
+    v-if="entity.type === 'household'"
+    class="badge rounded-pill bg-user"
+  >
+    {{ $t('household') }}
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index 837440524..5cffd2ccd 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -1,12 +1,17 @@
 <template>
-    <div class="confidential">
-        <div :class="{ 'blur': isBlurred }">
-            <slot name="confidential-content"></slot>
-        </div>
-        <div class="toggle-container">
-            <i class="fa toggle" :class="toggleIcon" aria-hidden="true" @click="toggleBlur"></i>
-        </div>
+  <div class="confidential">
+    <div :class="{ 'blur': isBlurred }">
+      <slot name="confidential-content" />
     </div>
+    <div class="toggle-container">
+      <i
+        class="fa toggle"
+        :class="toggleIcon"
+        aria-hidden="true"
+        @click="toggleBlur"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index 00fb2b996..fb9cde4fc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -1,67 +1,101 @@
 <template>
-
-   <component :is="component" class="chill-entity entity-address">
-
-      <component :is="component" class="address" :class="multiline">
-
-         <div v-if="isConfidential">
-            <confidential :positionBtnFar="true">
-               <template v-slot:confidential-content>
-                  <div v-if="isMultiline === true">
-                     <p v-for="(l, i) in address.lines" :key="`line-${i}`">
-                        {{ l }}
-                     </p>
-                     <p v-if="showButtonDetails"><address-details-button :address_id="address.address_id" :address_ref_status="address.refStatus"></address-details-button></p>
-                  </div>
-                  <div v-else>
-                     <p v-if="'' !== address.text"
-                        class="street">
-                        {{ address.text }}
-                     </p>
-                     <p v-if="null !== address.postcode"
-                        class="postcode">
-                        {{ address.postcode.code }} {{ address.postcode.name }}
-                     </p>
-                     <p v-if="null !== address.country"
-                        class="country">
-                        {{ address.country.name.fr }}
-                     </p>
-                  </div>
-               </template>
-            </confidential>
-         </div>
-
-         <div v-if="!isConfidential">
+  <component
+    :is="component"
+    class="chill-entity entity-address"
+  >
+    <component
+      :is="component"
+      class="address"
+      :class="multiline"
+    >
+      <div v-if="isConfidential">
+        <confidential :position-btn-far="true">
+          <template #confidential-content>
             <div v-if="isMultiline === true">
-               <p v-for="(l, i) in address.lines" :key="`line-${i}`">
-                  {{ l }}
-               </p>
-               <p v-if="showButtonDetails"><address-details-button :address_id="address.address_id" :address_ref_status="address.refStatus"></address-details-button></p>
+              <p
+                v-for="(l, i) in address.lines"
+                :key="`line-${i}`"
+              >
+                {{ l }}
+              </p>
+              <p v-if="showButtonDetails">
+                <address-details-button
+                  :address_id="address.address_id"
+                  :address_ref_status="address.refStatus"
+                />
+              </p>
             </div>
             <div v-else>
-               <p v-if="address.text"
-                  class="street">
-                  {{ address.text }} <template v-if="showButtonDetails"><address-details-button :address_id="address.address_id" :address_ref_status="address.refStatus"></address-details-button></template>
-               </p>
+              <p
+                v-if="'' !== address.text"
+                class="street"
+              >
+                {{ address.text }}
+              </p>
+              <p
+                v-if="null !== address.postcode"
+                class="postcode"
+              >
+                {{ address.postcode.code }} {{ address.postcode.name }}
+              </p>
+              <p
+                v-if="null !== address.country"
+                class="country"
+              >
+                {{ address.country.name.fr }}
+              </p>
             </div>
-         </div>
-
-      </component>
-
-      <div v-if="useDatePane === true" class="address-more">
-         <div v-if="address.validFrom">
-            <span class="validFrom">
-               <b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
-            </span>
-         </div>
-         <div v-if="address.validTo">
-            <span class="validTo">
-               <b>{{ $t('validTo') }}</b>: {{ $d(address.validTo.date) }}
-            </span>
-         </div>
+          </template>
+        </confidential>
       </div>
 
-   </component>
+      <div v-if="!isConfidential">
+        <div v-if="isMultiline === true">
+          <p
+            v-for="(l, i) in address.lines"
+            :key="`line-${i}`"
+          >
+            {{ l }}
+          </p>
+          <p v-if="showButtonDetails">
+            <address-details-button
+              :address_id="address.address_id"
+              :address_ref_status="address.refStatus"
+            />
+          </p>
+        </div>
+        <div v-else>
+          <p
+            v-if="address.text"
+            class="street"
+          >
+            {{ address.text }} <template v-if="showButtonDetails">
+              <address-details-button
+                :address_id="address.address_id"
+                :address_ref_status="address.refStatus"
+              />
+            </template>
+          </p>
+        </div>
+      </div>
+    </component>
+
+    <div
+      v-if="useDatePane === true"
+      class="address-more"
+    >
+      <div v-if="address.validFrom">
+        <span class="validFrom">
+          <b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
+        </span>
+      </div>
+      <div v-if="address.validTo">
+        <span class="validTo">
+          <b>{{ $t('validTo') }}</b>: {{ $d(address.validTo.date) }}
+        </span>
+      </div>
+    </div>
+  </component>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
index 2aeb123c7..afbf3586f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
@@ -1,5 +1,5 @@
 <template>
-<i :class="gender.icon"></i>
+  <i :class="gender.icon" />
 </template>
 
 <script setup>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
index a9c2db9b4..5b10027a4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
@@ -1,8 +1,18 @@
 <template>
-<span class="chill-entity entity-user">
+  <span class="chill-entity entity-user">
     {{ user.label }}
-    <span class="user-job" v-if="user.user_job !== null">({{ user.user_job.label.fr }})</span> <span class="main-scope" v-if="user.main_scope !== null">({{ user.main_scope.name.fr }})</span> <span v-if="user.isAbsent" class="badge bg-danger rounded-pill" :title="Absent">A</span>
-</span>
+    <span
+      class="user-job"
+      v-if="user.user_job !== null"
+    >({{ user.user_job.label.fr }})</span> <span
+      class="main-scope"
+      v-if="user.main_scope !== null"
+    >({{ user.main_scope.name.fr }})</span> <span
+      v-if="user.isAbsent"
+      class="badge bg-danger rounded-pill"
+      :title="Absent"
+    >A</span>
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
index 895345b63..a890a2ad4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
@@ -1,22 +1,42 @@
 <template>
-    <div class="d-grid gap-2 my-3">
-        <button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
-            <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_final') }}
-        </button>
-        <button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
-            <i class="fa fa-times fa-fw"></i>
-            {{ $t('unsubscribe_final') }}
-        </button>
-        <button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
-            <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_all_steps') }}
-        </button>
-        <button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
-            <i class="fa fa-times fa-fw"></i>
-            {{ $t('unsubscribe_all_steps') }}
-        </button>
-    </div>
+  <div class="d-grid gap-2 my-3">
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberFinal"
+      @click="subscribeTo('subscribe', 'final')"
+    >
+      <i class="fa fa-check fa-fw" />
+      {{ $t('subscribe_final') }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberFinal"
+      @click="subscribeTo('unsubscribe', 'final')"
+    >
+      <i class="fa fa-times fa-fw" />
+      {{ $t('unsubscribe_final') }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberStep"
+      @click="subscribeTo('subscribe', 'step')"
+    >
+      <i class="fa fa-check fa-fw" />
+      {{ $t('subscribe_all_steps') }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberStep"
+      @click="subscribeTo('unsubscribe', 'step')"
+    >
+      <i class="fa fa-times fa-fw" />
+      {{ $t('unsubscribe_all_steps') }}
+    </button>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
index 0e16b522f..5f793d162 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
@@ -1,67 +1,82 @@
 <template>
-   <div class="flex-table workflow" id="workflow-list">
-      <div v-for="(w, i) in workflows" :key="`workflow-${i}`"
-         class="item-bloc">
-
-         <div>
-            <div class="item-row col">
-               <h2>{{ w.title }}</h2>
-               <div class="flex-grow-1 ms-3 h3">
-                  <div class="visually-hidden">
-                     {{ w.relatedEntityClass }}
-                     {{ w.relatedEntityId }}
-                  </div>
-               </div>
+  <div
+    class="flex-table workflow"
+    id="workflow-list"
+  >
+    <div
+      v-for="(w, i) in workflows"
+      :key="`workflow-${i}`"
+      class="item-bloc"
+    >
+      <div>
+        <div class="item-row col">
+          <h2>{{ w.title }}</h2>
+          <div class="flex-grow-1 ms-3 h3">
+            <div class="visually-hidden">
+              {{ w.relatedEntityClass }}
+              {{ w.relatedEntityId }}
             </div>
+          </div>
+        </div>
 
-            <div class="breadcrumb">
-               <template v-for="(step, j) in w.steps" :key="`step-${j}`">
-                  <span class="mx-2"
-                     tabindex="0"
-                     data-bs-trigger="focus hover"
-                     data-bs-toggle="popover"
-                     data-bs-placement="bottom"
-                     data-bs-custom-class="workflow-transition"
-                     :title="getPopTitle(step)"
-                     :data-bs-content="getPopContent(step)">
-
-                     <i v-if="step.currentStep.name === 'initial'"
-                        class="fa fa-circle me-1 text-chill-yellow">
-                     </i>
-                     <i v-if="step.isFreezed"
-                        class="fa fa-snowflake-o fa-sm me-1">
-                     </i>
-                     {{ step.currentStep.text }}
-                  </span>
-                  <span v-if="j !== Object.keys(w.steps).length - 1">
-                     →
-                  </span>
-               </template>
-            </div>
-         </div>
-
-         <div class="item-row">
-            <div class="item-col flex-grow-1">
-               <p v-if="isUserSubscribedToStep(w)">
-                  <i class="fa fa-check fa-fw"></i>
-                  {{ $t('you_subscribed_to_all_steps') }}
-               </p>
-               <p v-if="isUserSubscribedToFinal(w)">
-                  <i class="fa fa-check fa-fw"></i>
-                  {{ $t('you_subscribed_to_final_step') }}
-               </p>
-            </div>
-            <div class="item-col">
-               <ul class="record_actions">
-                  <li>
-                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
-                  </li>
-               </ul>
-            </div>
-         </div>
+        <div class="breadcrumb">
+          <template
+            v-for="(step, j) in w.steps"
+            :key="`step-${j}`"
+          >
+            <span
+              class="mx-2"
+              tabindex="0"
+              data-bs-trigger="focus hover"
+              data-bs-toggle="popover"
+              data-bs-placement="bottom"
+              data-bs-custom-class="workflow-transition"
+              :title="getPopTitle(step)"
+              :data-bs-content="getPopContent(step)"
+            >
 
+              <i
+                v-if="step.currentStep.name === 'initial'"
+                class="fa fa-circle me-1 text-chill-yellow"
+              />
+              <i
+                v-if="step.isFreezed"
+                class="fa fa-snowflake-o fa-sm me-1"
+              />
+              {{ step.currentStep.text }}
+            </span>
+            <span v-if="j !== Object.keys(w.steps).length - 1">
+              →
+            </span>
+          </template>
+        </div>
       </div>
-   </div>
+
+      <div class="item-row">
+        <div class="item-col flex-grow-1">
+          <p v-if="isUserSubscribedToStep(w)">
+            <i class="fa fa-check fa-fw" />
+            {{ $t('you_subscribed_to_all_steps') }}
+          </p>
+          <p v-if="isUserSubscribedToFinal(w)">
+            <i class="fa fa-check fa-fw" />
+            {{ $t('you_subscribed_to_final_step') }}
+          </p>
+        </div>
+        <div class="item-col">
+          <ul class="record_actions">
+            <li>
+              <a
+                :href="goToUrl(w)"
+                class="btn btn-sm btn-show"
+                :title="$t('action.show')"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
index 151bc06c7..72e4dadb4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
@@ -1,50 +1,59 @@
 <template>
+  <button
+    v-if="hasWorkflow"
+    class="btn btn-primary"
+    @click="openModal"
+  >
+    <b>{{ countWorkflows }}</b>
+    <template v-if="countWorkflows > 1">
+      {{ $t('workflows') }}
+    </template>
+    <template v-else>
+      {{ $t('workflow') }}
+    </template>
+  </button>
 
-   <button v-if="hasWorkflow"
-      class="btn btn-primary"
-      @click="openModal">
-      <b>{{ countWorkflows }}</b>
-      <template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
-      <template v-else>{{ $t('workflow') }}</template>
-   </button>
+  <pick-workflow
+    v-else-if="allowCreate"
+    :related-entity-class="this.relatedEntityClass"
+    :related-entity-id="this.relatedEntityId"
+    :workflows-availables="workflowsAvailables"
+    :prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
+    :go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
+    @go-to-generate-workflow="goToGenerateWorkflow"
+  />
 
-   <pick-workflow v-else-if="allowCreate"
-      :relatedEntityClass="this.relatedEntityClass"
-      :relatedEntityId="this.relatedEntityId"
-      :workflowsAvailables="workflowsAvailables"
-      :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
-      :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
-      @go-to-generate-workflow="goToGenerateWorkflow"
-   ></pick-workflow>
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('workflow_list') }}
+        </h2>
+      </template>
 
-   <teleport to="body">
-      <modal v-if="modal.showModal"
-         :modalDialogClass="modal.modalDialogClass"
-         @close="modal.showModal = false">
+      <template #body>
+        <list-workflow-vue
+          :workflows="workflows"
+        />
+      </template>
 
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
-         </template>
-
-         <template v-slot:body>
-            <list-workflow-vue
-               :workflows="workflows"
-            ></list-workflow-vue>
-         </template>
-
-         <template v-slot:footer>
-            <pick-workflow v-if="allowCreate"
-               :relatedEntityClass="this.relatedEntityClass"
-               :relatedEntityId="this.relatedEntityId"
-               :workflowsAvailables="workflowsAvailables"
-               :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
-               :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
-               @go-to-generate-workflow="this.goToGenerateWorkflow"
-            ></pick-workflow>
-         </template>
-
-      </modal>
-   </teleport>
+      <template #footer>
+        <pick-workflow
+          v-if="allowCreate"
+          :related-entity-class="this.relatedEntityClass"
+          :related-entity-id="this.relatedEntityId"
+          :workflows-availables="workflowsAvailables"
+          :prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
+          :go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
+          @go-to-generate-workflow="this.goToGenerateWorkflow"
+        />
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
index 9ed1ef6cc..0c804f678 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
@@ -1,16 +1,32 @@
 <template>
-    <template v-if="workflowsAvailables.length >= 1">
-        <div class="dropdown d-grid gap-2">
-            <button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
-                Créer un workflow
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
-                <li v-for="w in workflowsAvailables" :key="w.name">
-                    <a class="dropdown-item" :href="makeLink(w.name)" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
-                </li>
-            </ul>
-        </div>
-    </template>
+  <template v-if="workflowsAvailables.length >= 1">
+    <div class="dropdown d-grid gap-2">
+      <button
+        class="btn btn-primary dropdown-toggle"
+        type="button"
+        id="createWorkflowButton"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        Créer un workflow
+      </button>
+      <ul
+        class="dropdown-menu"
+        aria-labelledby="createWorkflowButton"
+      >
+        <li
+          v-for="w in workflowsAvailables"
+          :key="w.name"
+        >
+          <a
+            class="dropdown-item"
+            :href="makeLink(w.name)"
+            @click.prevent="goToGenerateWorkflow($event, w.name)"
+          >{{ w.text }}</a>
+        </li>
+      </ul>
+    </div>
+  </template>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index 11bb9db2f..bf4d12eca 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -1,31 +1,54 @@
 <template>
-   <transition name="modal">
-      <div class="modal-mask">
-         <!-- :: styles bootstrap :: -->
-        <div class="modal fade show" style="display: block" aria-modal="true" role="dialog">
-          <div class="modal-dialog" :class="modalDialogClass">
-            <div class="modal-content">
-              <div class="modal-header">
-                <slot name="header"></slot>
-                <button class="close btn" @click="$emit('close')">
-                  <i class="fa fa-times" aria-hidden="true"></i></button>
-              </div>
-              <div class="modal-body">
-                <div class="body-head">
-                  <slot name="body-head"></slot>
-                </div>
-                <slot name="body"></slot>
-              </div>
-              <div class="modal-footer" v-if="!hideFooter">
-                <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
-                <slot name="footer"></slot>
+  <transition name="modal">
+    <div class="modal-mask">
+      <!-- :: styles bootstrap :: -->
+      <div
+        class="modal fade show"
+        style="display: block"
+        aria-modal="true"
+        role="dialog"
+      >
+        <div
+          class="modal-dialog"
+          :class="modalDialogClass"
+        >
+          <div class="modal-content">
+            <div class="modal-header">
+              <slot name="header" />
+              <button
+                class="close btn"
+                @click="$emit('close')"
+              >
+                <i
+                  class="fa fa-times"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+            <div class="modal-body">
+              <div class="body-head">
+                <slot name="body-head" />
               </div>
+              <slot name="body" />
+            </div>
+            <div
+              class="modal-footer"
+              v-if="!hideFooter"
+            >
+              <button
+                class="btn btn-cancel"
+                @click="$emit('close')"
+              >
+                {{ $t('action.close') }}
+              </button>
+              <slot name="footer" />
             </div>
           </div>
         </div>
-         <!-- :: end styles bootstrap :: -->
       </div>
-   </transition>
+      <!-- :: end styles bootstrap :: -->
+    </div>
+  </transition>
 </template>
 
 <script lang="ts">
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index f2384e6f1..0b17a2143 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -1,62 +1,71 @@
 <template>
-    <div
-        :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
-        role="group"
-        aria-label="Notification actions"
+  <div
+    :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
+    role="group"
+    aria-label="Notification actions"
+  >
+    <button
+      v-if="isRead"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="$t('markAsUnread')"
+      @click="markAsUnread"
     >
-        <button
-            v-if="isRead"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="$t('markAsUnread')"
-            @click="markAsUnread"
-        >
-            <i class="fa fa-sm fa-envelope-o"></i>
-            <span v-if="!buttonNoText" class="ps-2">
-                {{ $t("markAsUnread") }}
-            </span>
-        </button>
+      <i class="fa fa-sm fa-envelope-o" />
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
+        {{ $t("markAsUnread") }}
+      </span>
+    </button>
 
-        <button
-            v-if="!isRead"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="$t('markAsRead')"
-            @click="markAsRead"
-        >
-            <i class="fa fa-sm fa-envelope-open-o"></i>
-            <span v-if="!buttonNoText" class="ps-2">
-                {{ $t("markAsRead") }}
-            </span>
-        </button>
+    <button
+      v-if="!isRead"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="$t('markAsRead')"
+      @click="markAsRead"
+    >
+      <i class="fa fa-sm fa-envelope-open-o" />
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
+        {{ $t("markAsRead") }}
+      </span>
+    </button>
 
-        <a
-            v-if="isButtonGroup"
-            type="button"
-            class="btn btn-outline-primary"
-            :href="showUrl"
-            :title="$t('action.show')"
-        >
-            <i class="fa fa-sm fa-comment-o"></i>
-        </a>
+    <a
+      v-if="isButtonGroup"
+      type="button"
+      class="btn btn-outline-primary"
+      :href="showUrl"
+      :title="$t('action.show')"
+    >
+      <i class="fa fa-sm fa-comment-o" />
+    </a>
 
-        <!-- "Mark All Read" button -->
-        <button
-            v-if="showMarkAllButton"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="$t('markAllRead')"
-            @click="markAllRead"
-        >
-            <i class="fa fa-sm fa-envelope-o"></i>
-            <span v-if="!buttonNoText" class="ps-2">
-                {{ $t("markAllRead") }}
-            </span>
-        </button>
-    </div>
+    <!-- "Mark All Read" button -->
+    <button
+      v-if="showMarkAllButton"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="$t('markAllRead')"
+      @click="markAllRead"
+    >
+      <i class="fa fa-sm fa-envelope-o" />
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
+        {{ $t("markAllRead") }}
+      </span>
+    </button>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
index 5f8a85208..9d5684655 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
@@ -1,64 +1,86 @@
 <template>
-   <a v-if="isOpenDocument"
-      class="btn" :class="[
-         isChangeIcon ? 'change-icon' : '',
-         isChangeClass ? options.changeClass : 'btn-wopilink' ]"
-      @click="openModal">
+  <a
+    v-if="isOpenDocument"
+    class="btn"
+    :class="[
+      isChangeIcon ? 'change-icon' : '',
+      isChangeClass ? options.changeClass : 'btn-wopilink' ]"
+    @click="openModal"
+  >
       
-      <i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>
+    <i
+      v-if="isChangeIcon"
+      class="fa me-2"
+      :class="options.changeIcon"
+    />
       
-      <span v-if="!noText">
-         {{ $t('online_edit_document') }}
-      </span>
-   </a>
+    <span v-if="!noText">
+      {{ $t('online_edit_document') }}
+    </span>
+  </a>
    
-   <teleport to="body">
-      <div class="wopi-frame" v-if="isOpenDocument">
-         <modal v-if="modal.showModal"
-            :modalDialogClass="modal.modalDialogClass"
-            :hideFooter=true
-            @close="modal.showModal = false">
-            
-            <template v-slot:header>
-               <img class="logo" :src="logo" height="45"/>
-                  <span class="ms-auto me-3">
-                     <span v-if="options.title">{{ options.title }}</span>
-                  </span>
-                  <!--
+  <teleport to="body">
+    <div
+      class="wopi-frame"
+      v-if="isOpenDocument"
+    >
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        :hide-footer="true"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <img
+            class="logo"
+            :src="logo"
+            height="45"
+          >
+          <span class="ms-auto me-3">
+            <span v-if="options.title">{{ options.title }}</span>
+          </span>
+          <!--
                   <a class="btn btn-outline-light">
                      <i class="fa fa-save fa-fw"></i>
                      {{ $t('save_and_quit') }}
                   </a>
                   -->
-            </template>
+        </template>
             
-            <template v-slot:body>
-               <div v-if="loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
-               </div>
-               <iframe
-                  :src="this.wopiUrl"
-                  @load="loaded"
-               ></iframe>
-            </template>
-            
-         </modal>
-      </div>
-      <div v-else>
-         <modal v-if="modal.showModal"
-            modalDialogClass="modal-sm"
-            @close="modal.showModal = false">
-            
-            <template v-slot:header>
-               <h3>{{ $t('invalid_title') }}</h3>
-            </template>
-            <template v-slot:body>
-               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
-            </template>
-   
-         </modal>
-      </div>
-   </teleport>
+        <template #body>
+          <div
+            v-if="loading"
+            class="loading"
+          >
+            <i
+              class="fa fa-circle-o-notch fa-spin fa-3x"
+              :title="$t('loading')"
+            />
+          </div>
+          <iframe
+            :src="this.wopiUrl"
+            @load="loaded"
+          />
+        </template>
+      </modal>
+    </div>
+    <div v-else>
+      <modal
+        v-if="modal.showModal"
+        modal-dialog-class="modal-sm"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h3>{{ $t('invalid_title') }}</h3>
+        </template>
+        <template #body>
+          <div class="alert alert-warning">
+            {{ $t('invalid_message') }}
+          </div>
+        </template>
+      </modal>
+    </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index c66214b0b..83524f421 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -1,24 +1,28 @@
 <template>
-   <banner></banner>
-   <sticky-nav></sticky-nav>
+  <banner />
+  <sticky-nav />
 
-   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
-   <h1 v-else>{{ $t('course.title.active') }}</h1>
+  <h1 v-if="accompanyingCourse.step === 'DRAFT'">
+    {{ $t('course.title.draft') }}
+  </h1>
+  <h1 v-else>
+    {{ $t('course.title.active') }}
+  </h1>
 
-   <persons-associated></persons-associated>
-   <course-location></course-location>
-   <origin-demand></origin-demand>
-   <admin-location></admin-location>
-   <requestor v-bind:isAnonymous="accompanyingCourse.requestorAnonymous"></requestor>
-   <social-issue></social-issue>
-   <scopes></scopes>
-   <referrer></referrer>
-   <resources></resources>
-   <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')"></start-date>
-   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
-   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
+  <persons-associated />
+  <course-location />
+  <origin-demand />
+  <admin-location />
+  <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
+  <social-issue />
+  <scopes />
+  <referrer />
+  <resources />
+  <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
+  <comment v-if="accompanyingCourse.step === 'DRAFT'" />
+  <confirm v-if="accompanyingCourse.step === 'DRAFT'" />
 
-    <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
+  <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
        <p>
           <span>{{ error.sta }} {{ error.txt }}</span><br>
           <span>{{ $t(error.msg) }}</span>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
index 35b2f8847..57ca22345 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
@@ -1,35 +1,38 @@
 <template>
-   <div class="vue-component">
-      <h2><a id="section-40"></a>{{ $t('admin_location.title') }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-40" />{{ $t('admin_location.title') }}</h2>
 
-      <div class="mb-4">
-         <label for="selectAdminLocation">
-            {{ $t('admin_location.title') }}
-         </label>
+    <div class="mb-4">
+      <label for="selectAdminLocation">
+        {{ $t('admin_location.title') }}
+      </label>
 
-         <VueMultiselect
-            name="selectAdminLocation"
-            label="text"
-            :custom-label="customLabel"
-            track-by="id"
-            :multiple="false"
-            :searchable="true"
-            :placeholder="$t('admin_location.placeholder')"
-            v-model="value"
-            :options="options"
-            group-values="locations"
-            group-label="locationCategories"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            @select="updateAdminLocation">
-         </VueMultiselect>
-      </div>
+      <VueMultiselect
+        name="selectAdminLocation"
+        label="text"
+        :custom-label="customLabel"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('admin_location.placeholder')"
+        v-model="value"
+        :options="options"
+        group-values="locations"
+        group-label="locationCategories"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+        @select="updateAdminLocation"
+      />
+    </div>
 
-      <div v-if="!isAdminLocationValid" class="alert alert-warning to-confirm">
-        {{ $t('admin_location.not_valid') }}
-     </div>
-   </div>
+    <div
+      v-if="!isAdminLocationValid"
+      class="alert alert-warning to-confirm"
+    >
+      {{ $t('admin_location.not_valid') }}
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index fb8a09784..d129f9a92 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -1,73 +1,97 @@
 <template>
+  <teleport to="#header-accompanying_course-name #banner-flags">
+    <toggle-flags />
+  </teleport>
 
-   <teleport to="#header-accompanying_course-name #banner-flags">
-      <toggle-flags></toggle-flags>
-   </teleport>
-
-   <teleport to="#header-accompanying_course-name #banner-status">
-      <span v-if="accompanyingCourse.step === 'DRAFT'"
-         class="text-md-end d-md-block">
-         <span class="badge bg-secondary">
-            {{ $t('course.step.draft') }}
-         </span>
+  <teleport to="#header-accompanying_course-name #banner-status">
+    <span
+      v-if="accompanyingCourse.step === 'DRAFT'"
+      class="text-md-end d-md-block"
+    >
+      <span class="badge bg-secondary">
+        {{ $t('course.step.draft') }}
       </span>
-      <span v-else-if="accompanyingCourse.step === 'CONFIRMED' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="text-md-end">
-         <span v-if="accompanyingCourse.step === 'CONFIRMED'" class="d-md-block mb-md-3">
-            <span class="badge bg-primary">
-               {{ $t('course.step.active') }}
-            </span>
-         </span>
-         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'" class="d-md-block mb-md-3">
-            <span class="badge bg-chill-yellow text-primary">
-               {{ $t('course.step.inactive_short') }}
-            </span>
-         </span>
-         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="d-md-block mb-md-3">
-            <span class="badge bg-chill-pink">
-               {{ $t('course.step.inactive_long') }}
-            </span>
-         </span>
-         <span class="d-md-block">
-            <span class="d-md-block ms-3 ms-md-0">
-               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
-            </span>
-            <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
-               <span class="item-key">{{ $t('course.referrer') }}:</span>&nbsp;
-               <b>{{ accompanyingCourse.user.text }}</b>
-               <template v-if="accompanyingCourse.user.isAbsent">
+    </span>
+    <span
+      v-else-if="accompanyingCourse.step === 'CONFIRMED' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'"
+      class="text-md-end"
+    >
+      <span
+        v-if="accompanyingCourse.step === 'CONFIRMED'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-primary">
+          {{ $t('course.step.active') }}
+        </span>
+      </span>
+      <span
+        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-chill-yellow text-primary">
+          {{ $t('course.step.inactive_short') }}
+        </span>
+      </span>
+      <span
+        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-chill-pink">
+          {{ $t('course.step.inactive_long') }}
+        </span>
+      </span>
+      <span class="d-md-block">
+        <span class="d-md-block ms-3 ms-md-0">
+          <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
+        </span>
+        <span
+          v-if="accompanyingCourse.user"
+          class="d-md-block ms-3 ms-md-0"
+        >
+          <span class="item-key">{{ $t('course.referrer') }}:</span>&nbsp;
+          <b>{{ accompanyingCourse.user.text }}</b>
+          <template v-if="accompanyingCourse.user.isAbsent">
                  &nbsp;
-                 <span class="badge bg-danger rounded-pill" title="Absent">A</span>
-               </template>
-            </span>
-         </span>
+            <span
+              class="badge bg-danger rounded-pill"
+              title="Absent"
+            >A</span>
+          </template>
+        </span>
       </span>
-      <span v-else class="text-md-end d-md-block">
-         <span class="badge bg-danger">
-            {{ $t('course.step.closed') }}
-         </span>
-         <span class="d-md-block">
-            <span class="d-md-block ms-3 ms-md-0">
-               <i>{{ $d(accompanyingCourse.openingDate.datetime, 'text') }} - {{ $d(accompanyingCourse.closingDate.datetime, 'text') }}</i>
-            </span>
-            <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
-               <span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
-            </span>
-         </span>
+    </span>
+    <span
+      v-else
+      class="text-md-end d-md-block"
+    >
+      <span class="badge bg-danger">
+        {{ $t('course.step.closed') }}
       </span>
-   </teleport>
+      <span class="d-md-block">
+        <span class="d-md-block ms-3 ms-md-0">
+          <i>{{ $d(accompanyingCourse.openingDate.datetime, 'text') }} - {{ $d(accompanyingCourse.closingDate.datetime, 'text') }}</i>
+        </span>
+        <span
+          v-if="accompanyingCourse.user"
+          class="d-md-block ms-3 ms-md-0"
+        >
+          <span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
+        </span>
+      </span>
+    </span>
+  </teleport>
 
-   <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <social-issue
-         v-for="issue in accompanyingCourse.socialIssues"
-         v-bind:key="issue.id"
-         v-bind:issue="issue">
-      </social-issue>
-   </teleport>
-
-   <teleport to="#header-accompanying_course-details #banner-persons-associated">
-      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
-   </teleport>
+  <teleport to="#header-accompanying_course-details #banner-social-issues">
+    <social-issue
+      v-for="issue in accompanyingCourse.socialIssues"
+      :key="issue.id"
+      :issue="issue"
+    />
+  </teleport>
 
+  <teleport to="#header-accompanying_course-details #banner-persons-associated">
+    <persons-associated :accompanying-course="accompanyingCourse" />
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
index 497f3e9b7..97599afe1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
@@ -1,12 +1,32 @@
 <template>
-   <span v-for="h in personsByHousehold()" :class="{ 'household': householdExists(h.id), 'no-household': !householdExists(h.id) }" :key="h.id">
-      <a v-if="householdExists(h.id)" :href="householdLink(h.id)">
-         <i class="fa fa-home fa-fw text-light" :title="$t('persons_associated.show_household_number', { id: h.id })"></i>
-      </a>
-      <span v-for="person in h.persons" class="me-1" :key="person.id">
-         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.textAge" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
-      </span>
-   </span>
+  <span
+    v-for="h in personsByHousehold()"
+    :class="{ 'household': householdExists(h.id), 'no-household': !householdExists(h.id) }"
+    :key="h.id"
+  >
+    <a
+      v-if="householdExists(h.id)"
+      :href="householdLink(h.id)"
+    >
+      <i
+        class="fa fa-home fa-fw text-light"
+        :title="$t('persons_associated.show_household_number', { id: h.id })"
+      />
+    </a>
+    <span
+      v-for="person in h.persons"
+      class="me-1"
+      :key="person.id"
+    >
+      <on-the-fly
+        :type="person.type"
+        :id="person.id"
+        :button-text="person.textAge"
+        :display-badge="'true' === 'true'"
+        action="show"
+      />
+    </span>
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
index a24277fa0..4cb94d296 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
@@ -1,22 +1,36 @@
 <template>
-   <div class="text-md-end">
-      <span class="d-block d-sm-inline-block mb-md-2">
-         <a @click="toggleIntensity" class="flag-toggle">
-            <span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
-            <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
-            <span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
-         </a>
-      </span>
+  <div class="text-md-end">
+    <span class="d-block d-sm-inline-block mb-md-2">
+      <a
+        @click="toggleIntensity"
+        class="flag-toggle"
+      >
+        <span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
+        <i
+          class="fa"
+          :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"
+        />
+        <span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
+      </a>
+    </span>
 
-      <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
-         <button class="badge rounded-pill me-1" :class="{ 'bg-danger': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
-            {{ $t('course.emergency') }}
-         </button>
-         <button class="badge rounded-pill" :class="{ 'bg-danger': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
-            {{ $t('course.confidential') }}
-         </button>
-      </span>
-   </div>
+    <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
+      <button
+        class="badge rounded-pill me-1"
+        :class="{ 'bg-danger': isEmergency, 'bg-secondary': !isEmergency }"
+        @click="toggleEmergency"
+      >
+        {{ $t('course.emergency') }}
+      </button>
+      <button
+        class="badge rounded-pill"
+        :class="{ 'bg-danger': isConfidential, 'bg-secondary': !isConfidential }"
+        @click="toggleConfidential"
+      >
+        {{ $t('course.confidential') }}
+      </button>
+    </span>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
index 344119c44..e2f6c038a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
@@ -1,28 +1,39 @@
 <template>
-   <li>
-      <button class="btn btn-sm btn-secondary"
-         @click="modal.showModal = true"
-         :title="$t('courselocation.assign_course_address')">
-         <i class="fa fa-map-marker"></i>
-      </button>
-   </li>
+  <li>
+    <button
+      class="btn btn-sm btn-secondary"
+      @click="modal.showModal = true"
+      :title="$t('courselocation.assign_course_address')"
+    >
+      <i class="fa fa-map-marker" />
+    </button>
+  </li>
 
-   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t('courselocation.sure') }}</h2>
-         </template>
-         <template v-slot:body>
-            <address-render-box :address="person.current_household_address"></address-render-box>
-            <p>{{ $t('courselocation.sure_description') }}</p>
-         </template>
-         <template v-slot:footer>
-            <button class="btn btn-danger" @click="assignAddress">
-               {{ $t('courselocation.ok') }}
-            </button>
-         </template>
-      </modal>
-   </teleport>
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('courselocation.sure') }}
+        </h2>
+      </template>
+      <template #body>
+        <address-render-box :address="person.current_household_address" />
+        <p>{{ $t('courselocation.sure_description') }}</p>
+      </template>
+      <template #footer>
+        <button
+          class="btn btn-danger"
+          @click="assignAddress"
+        >
+          {{ $t('courselocation.ok') }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index d6c438cd9..78a5d6628 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -1,53 +1,62 @@
 <template>
-   <div class="vue-component">
-      <h2><a id="section-100"></a>{{ $t('comment.title') }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-100" />{{ $t('comment.title') }}</h2>
 
-      <!--div class="error flash_message" v-if="errors.length > 0">
+    <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}
          TODO fix errors flashbag for app component
       </div-->
 
-      <div>
-         <form @submit.prevent="submitform">
+    <div>
+      <form @submit.prevent="submitform">
+        <label
+          class="col-form-label"
+          for="content"
+        >{{ $t('comment.label') }}</label>
 
-            <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+        <ckeditor
+          name="content"
+          :placeholder="$t('comment.content')"
+          :editor="editor"
+          v-model="content"
+          tag-name="textarea"
+        />
 
-            <ckeditor
-               name="content"
-               :placeholder="$t('comment.content')"
-               :editor="editor"
-               v-model="content"
-               tag-name="textarea">
-            </ckeditor>
+        <div class="sub-comment">
+          <div
+            v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'"
+            class="metadata"
+          >
+            {{ $t('comment.created_by', [
+              pinnedComment.creator.text,
+              $d(pinnedComment.updatedAt.datetime, 'long')
+            ])
+            }}
+          </div>
+          <div class="loading">
+            <i
+              v-if="loading"
+              class="fa fa-circle-o-notch fa-spin"
+              :title="$t('loading')"
+            />
+          </div>
+        </div>
 
-            <div class="sub-comment">
-               <div v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'" class="metadata">
-                  {{ $t('comment.created_by', [
-                        pinnedComment.creator.text,
-                        $d(pinnedComment.updatedAt.datetime, 'long')
-                     ])
-                  }}
-               </div>
-               <div class="loading">
-                  <i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
-               </div>
-            </div>
-
-            <div>
-               <ul class="record_actions">
-                  <li v-if="pinnedComment !== null">
-                     <a class="btn btn-delete"
-                        @click="removeComment">
-                        {{ $t('action.delete') }}
-                     </a>
-                  </li>
-               </ul>
-            </div>
-
-         </form>
-      </div>
-
-   </div>
+        <div>
+          <ul class="record_actions">
+            <li v-if="pinnedComment !== null">
+              <a
+                class="btn btn-delete"
+                @click="removeComment"
+              >
+                {{ $t('action.delete') }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </form>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
index d12bd1184..d1c56e5ae 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
@@ -1,100 +1,133 @@
 <template>
-<div class="vue-component">
-   <h2><a id="section-110"></a>
+  <div class="vue-component">
+    <h2>
+      <a id="section-110" />
       {{ $t('confirm.title') }}
-   </h2>
-   <div>
-      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])"></p>
+    </h2>
+    <div>
+      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])" />
 
       <div v-if="!isValidToBeConfirmed">
-         <div class="alert alert-warning">
-            {{ $t('confirm.alert_validation') }}
-            <ul class="mt-2">
-               <li v-for="k in validationKeys" :key=k>
-                  {{ $t(notValidMessages[k].msg) }}
-                  <a :href="notValidMessages[k].anchor">
-                     <i class="fa fa-level-up fa-fw"></i>
-                  </a>
-               </li>
-            </ul>
-         </div>
-         <ul class="record_actions">
-            <li>
-               <button class="btn btn-save" disabled>
-                  {{ $t('confirm.ok') }}
-               </button>
+        <div class="alert alert-warning">
+          {{ $t('confirm.alert_validation') }}
+          <ul class="mt-2">
+            <li
+              v-for="k in validationKeys"
+              :key="k"
+            >
+              {{ $t(notValidMessages[k].msg) }}
+              <a :href="notValidMessages[k].anchor">
+                <i class="fa fa-level-up fa-fw" />
+              </a>
             </li>
-            <li>
-               <a class="btn btn-delete" :href="deleteLink">
-                  {{ $t('confirm.delete') }}
-               </a>
-            </li>
-         </ul>
+          </ul>
+        </div>
+        <ul class="record_actions">
+          <li>
+            <button
+              class="btn btn-save"
+              disabled
+            >
+              {{ $t('confirm.ok') }}
+            </button>
+          </li>
+          <li>
+            <a
+              class="btn btn-delete"
+              :href="deleteLink"
+            >
+              {{ $t('confirm.delete') }}
+            </a>
+          </li>
+        </ul>
       </div>
 
       <div v-else>
-         <p v-html="$t('confirm.text_active', [$t('course.step.active')])"></p>
-         <ul class="record_actions">
-            <li>
-               <button
-                  class="btn btn-save"
-                  @click="modal.showModal = true">
-                  {{ $t('confirm.ok') }}
-               </button>
-            </li>
-            <li>
-               <a class="btn btn-delete" :href="deleteLink">
-                  {{ $t('confirm.delete') }}
-               </a>
-            </li>
-         </ul>
-      </div>
-
-   </div>
-
-   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t('confirm.sure') }}</h2>
-         </template>
-         <template v-slot:body>
-            <p>{{ $t('confirm.sure_description') }}</p>
-            <div v-if="accompanyingCourse.user === null">
-                <div v-if="usersSuggestedFilteredByJob.length === 0">
-                   <p class="alert alert-warning">{{ $t('confirm.no_suggested_referrer') }}</p>
-                </div>
-                <div v-if="usersSuggestedFilteredByJob.length === 1" class="alert alert-info">
-                   <p>{{ $t('confirm.one_suggested_referrer') }}:</p>
-                   <ul class="list-suggest add-items inline">
-                     <li>
-                       <user-render-box-badge :user="usersSuggestedFilteredByJob[0]"></user-render-box-badge>
-                     </li>
-                   </ul>
-                   <p>{{ $t('confirm.choose_suggested_referrer') }}</p>
-                   <ul class="record_actions">
-                      <li>
-                     <button class="btn btn-save mr-5" @click="chooseSuggestedReferrer">
-                        {{ $t('confirm.choose_button') }}
-                     </button>
-                      </li>
-                      <li>
-                     <button class="btn btn-secondary" @click="doNotChooseSuggestedReferrer">
-                        {{ $t('confirm.do_not_choose_button') }}
-                     </button>
-                     </li>
-                   </ul>
-                </div>
-            </div>
-         </template>
-         <template v-slot:footer>
-            <button class="btn btn-danger" :disabled="disableConfirm" @click="confirmCourse">
-               {{ $t('confirm.ok') }}
+        <p v-html="$t('confirm.text_active', [$t('course.step.active')])" />
+        <ul class="record_actions">
+          <li>
+            <button
+              class="btn btn-save"
+              @click="modal.showModal = true"
+            >
+              {{ $t('confirm.ok') }}
             </button>
-         </template>
-      </modal>
-   </teleport>
+          </li>
+          <li>
+            <a
+              class="btn btn-delete"
+              :href="deleteLink"
+            >
+              {{ $t('confirm.delete') }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
 
-</div>
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">
+            {{ $t('confirm.sure') }}
+          </h2>
+        </template>
+        <template #body>
+          <p>{{ $t('confirm.sure_description') }}</p>
+          <div v-if="accompanyingCourse.user === null">
+            <div v-if="usersSuggestedFilteredByJob.length === 0">
+              <p class="alert alert-warning">
+                {{ $t('confirm.no_suggested_referrer') }}
+              </p>
+            </div>
+            <div
+              v-if="usersSuggestedFilteredByJob.length === 1"
+              class="alert alert-info"
+            >
+              <p>{{ $t('confirm.one_suggested_referrer') }}:</p>
+              <ul class="list-suggest add-items inline">
+                <li>
+                  <user-render-box-badge :user="usersSuggestedFilteredByJob[0]" />
+                </li>
+              </ul>
+              <p>{{ $t('confirm.choose_suggested_referrer') }}</p>
+              <ul class="record_actions">
+                <li>
+                  <button
+                    class="btn btn-save mr-5"
+                    @click="chooseSuggestedReferrer"
+                  >
+                    {{ $t('confirm.choose_button') }}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    class="btn btn-secondary"
+                    @click="doNotChooseSuggestedReferrer"
+                  >
+                    {{ $t('confirm.do_not_choose_button') }}
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-danger"
+            :disabled="disableConfirm"
+            @click="confirmCourse"
+          >
+            {{ $t('confirm.ok') }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
index 99e3519f4..c4db2ecdf 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
@@ -1,72 +1,91 @@
 <template>
-   <div class="vue-component">
-      <h2><a id="section-20"></a>
-         {{ $t('courselocation.title') }}
-      </h2>
+  <div class="vue-component">
+    <h2>
+      <a id="section-20" />
+      {{ $t('courselocation.title') }}
+    </h2>
 
-      <div v-for="error in displayErrors" class="alert alert-danger my-2" :key="error">
-         {{ error }}
-      </div>
-
-      <div v-if="hasNoLocation">
-         <label class="chill-no-data-statement">
-            {{ $t('courselocation.no_address') }}
-         </label>
-      </div>
-
-      <div class="flex-table" v-if="accompanyingCourse.location">
-         <div class="item-bloc">
-            <address-render-box
-               :address="accompanyingCourse.location">
-            </address-render-box>
-
-            <div v-if="isPersonLocation" class="alert alert-secondary separator">
-               <label class="col-form-label">
-                  {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
-               </label>
-            </div>
-
-            <div v-if="isTemporaryAddress" class="alert alert-warning separator">
-               <p>
-                  {{ $t('courselocation.temporary_address_must_be_changed') }}
-                  <i class="fa fa-fw fa-map-marker"></i>
-               </p>
-            </div>
-         </div>
-      </div>
-
-      <div v-if="hasNoPersonLocation" class="alert alert-danger no-person-location">
-         <i class="fa fa-warning fa-2x"></i>
-         <div>
-            <p>
-               {{ $t('courselocation.associate_at_least_one_person_with_one_household_with_address') }}
-               <a href="#section-10">
-                  <i class="fa fa-level-up fa-fw"></i>
-               </a>
-            </p>
-         </div>
+    <div
+      v-for="error in displayErrors"
+      class="alert alert-danger my-2"
+      :key="error"
+    >
+      {{ error }}
+    </div>
+
+    <div v-if="hasNoLocation">
+      <label class="chill-no-data-statement">
+        {{ $t('courselocation.no_address') }}
+      </label>
+    </div>
+
+    <div
+      class="flex-table"
+      v-if="accompanyingCourse.location"
+    >
+      <div class="item-bloc">
+        <address-render-box
+          :address="accompanyingCourse.location"
+        />
+
+        <div
+          v-if="isPersonLocation"
+          class="alert alert-secondary separator"
+        >
+          <label class="col-form-label">
+            {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
+          </label>
+        </div>
+
+        <div
+          v-if="isTemporaryAddress"
+          class="alert alert-warning separator"
+        >
+          <p>
+            {{ $t('courselocation.temporary_address_must_be_changed') }}
+            <i class="fa fa-fw fa-map-marker" />
+          </p>
+        </div>
       </div>
+    </div>
 
+    <div
+      v-if="hasNoPersonLocation"
+      class="alert alert-danger no-person-location"
+    >
+      <i class="fa fa-warning fa-2x" />
       <div>
-         <ul class="record_actions">
-            <li>
-               <add-address
-                  v-if="!isPersonLocation"
-                  :key="key"
-                  :context="context"
-                  :options="options"
-                  :addressChangedCallback="submitTemporaryAddress"
-                  ref="addAddress">
-               </add-address>
-            </li>
-         </ul>
+        <p>
+          {{ $t('courselocation.associate_at_least_one_person_with_one_household_with_address') }}
+          <a href="#section-10">
+            <i class="fa fa-level-up fa-fw" />
+          </a>
+        </p>
       </div>
+    </div>
 
-      <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
-         {{ $t('courselocation.not_valid') }}
-      </div>
+    <div>
+      <ul class="record_actions">
+        <li>
+          <add-address
+            v-if="!isPersonLocation"
+            :key="key"
+            :context="context"
+            :options="options"
+            :address-changed-callback="submitTemporaryAddress"
+            ref="addAddress"
+          />
+        </li>
+      </ul>
+    </div>
 
-   </div>
+    <div
+      v-if="!isLocationValid"
+      class="alert alert-warning to-confirm"
+    >
+      {{ $t('courselocation.not_valid') }}
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
index b82d7069d..73d04a6f3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
@@ -1,33 +1,36 @@
 <template>
-   <div class="vue-component">
-      <h2><a id="section-30"></a>{{ $t('origin.title') }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-30" />{{ $t('origin.title') }}</h2>
 
-      <div class="mb-4">
-         <label for="selectOrigin">
-            {{ $t('origin.title') }}
-         </label>
+    <div class="mb-4">
+      <label for="selectOrigin">
+        {{ $t('origin.title') }}
+      </label>
 
-         <VueMultiselect
-            name="selectOrigin"
-            label="text"
-            :custom-label="transText"
-            track-by="id"
-            :multiple="false"
-            :searchable="true"
-            :placeholder="$t('origin.placeholder')"
-            v-model="value"
-            :options="options"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            @select="updateOrigin">
-         </VueMultiselect>
-      </div>
+      <VueMultiselect
+        name="selectOrigin"
+        label="text"
+        :custom-label="transText"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('origin.placeholder')"
+        v-model="value"
+        :options="options"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+        @select="updateOrigin"
+      />
+    </div>
 
-      <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
-        {{ $t('origin.not_valid') }}
-     </div>
-   </div>
+    <div
+      v-if="!isOriginValid"
+      class="alert alert-warning to-confirm"
+    >
+      {{ $t('origin.not_valid') }}
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 7762ed29e..db090e8d2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -1,78 +1,119 @@
 <template>
-<div class="vue-component">
-   <h2><a id="section-10"></a>{{ $t('persons_associated.title')}}</h2>
+  <div class="vue-component">
+    <h2><a id="section-10" />{{ $t('persons_associated.title') }}</h2>
 
-   <div v-if="currentParticipations.length > 0">
+    <div v-if="currentParticipations.length > 0">
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
-   </div>
-   <div v-else>
+    </div>
+    <div v-else>
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
-   </div>
+    </div>
 
-   <div v-if="participationWithoutHousehold.length > 0" class="alert alert-warning no-household">
-      <i class="fa fa-warning fa-2x"></i>
-      <form method="GET" action="/fr/person/household/members/editor">
-         <div class="float-button bottom"><div class="box">
+    <div
+      v-if="participationWithoutHousehold.length > 0"
+      class="alert alert-warning no-household"
+    >
+      <i class="fa fa-warning fa-2x" />
+      <form
+        method="GET"
+        action="/fr/person/household/members/editor"
+      >
+        <div class="float-button bottom">
+          <div class="box">
             <div class="action">
-               <button class="btn btn-update" type="submit">{{ $t('persons_associated.update_household') }}</button>
+              <button
+                class="btn btn-update"
+                type="submit"
+              >
+                {{ $t('persons_associated.update_household') }}
+              </button>
             </div>
-            <p class="mb-3">{{ $t('persons_associated.person_without_household_warning') }}</p>
-            <div class="form-check" v-for="p in participationWithoutHousehold" :key="p.id">
-               <input type="checkbox"
-                  class="form-check-input"
-                  name="persons[]"
-                  checked="checked"
-                  :id="p.person.id"
-                  :value="p.person.id"
-               />
-               <label class="form-check-label">
-                  <person-text :person="p.person"></person-text>
-               </label>
+            <p class="mb-3">
+              {{ $t('persons_associated.person_without_household_warning') }}
+            </p>
+            <div
+              class="form-check"
+              v-for="p in participationWithoutHousehold"
+              :key="p.id"
+            >
+              <input
+                type="checkbox"
+                class="form-check-input"
+                name="persons[]"
+                checked="checked"
+                :id="p.person.id"
+                :value="p.person.id"
+              >
+              <label class="form-check-label">
+                <person-text :person="p.person" />
+              </label>
             </div>
-            <input type="hidden" name="expand_suggestions" value="true">
-            <input type="hidden" name="returnPath" :value="getReturnPath">
-            <input type="hidden" name="accompanying_period_id" :value="courseId">
-         </div></div>
+            <input
+              type="hidden"
+              name="expand_suggestions"
+              value="true"
+            >
+            <input
+              type="hidden"
+              name="returnPath"
+              :value="getReturnPath"
+            >
+            <input
+              type="hidden"
+              name="accompanying_period_id"
+              :value="courseId"
+            >
+          </div>
+        </div>
       </form>
-   </div>
+    </div>
 
-   <div class="flex-table mb-3">
+    <div class="flex-table mb-3">
       <participation-item
-         v-for="participation in currentParticipations"
-         v-bind:participation="participation"
-         v-bind:key="participation.id"
-         @remove="removeParticipation"
-         @close="closeParticipation">
-      </participation-item>
-   </div>
+        v-for="participation in currentParticipations"
+        :participation="participation"
+        :key="participation.id"
+        @remove="removeParticipation"
+        @close="closeParticipation"
+      />
+    </div>
 
-   <div v-if="suggestedPersons.length > 0">
+    <div v-if="suggestedPersons.length > 0">
       <ul class="list-suggest add-items inline">
-         <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
-            <person-text :person="p"></person-text>
-         </li>
+        <li
+          v-for="p in suggestedPersons"
+          :key="p.id"
+          @click="addSuggestedPerson(p)"
+        >
+          <person-text :person="p" />
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div>
+    <div>
       <ul class="record_actions">
-         <li class="add-persons">
-            <add-persons
-               buttonTitle="persons_associated.add_persons"
-               modalTitle="add_persons.title"
-               v-bind:key="addPersons.key"
-               v-bind:options="addPersons.options"
-               @addNewPersons="addNewPersons"
-               ref="addPersons"> <!-- to cast child method -->
-            </add-persons>
-         </li>
+        <li class="add-persons">
+          <add-persons
+            button-title="persons_associated.add_persons"
+            modal-title="add_persons.title"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div v-if="!isParticipationValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isParticipationValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('persons_associated.participation_not_valid') }}
-   </div>
-</div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index a278d00c4..777804291 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -1,65 +1,91 @@
 <template>
-   <person-render-box render="bloc"
-      :options="{
-               addInfo : true,
-               addId : false,
-               addEntity: false,
-               addLink: false,
-               addHouseholdLink: false,
-               addAltNames: true,
-               addAge : true,
-               hLevel : 3,
-               isConfidential :  false,
-               isMultiline: true,
-            }"
-      :person="participation.person"
-      :returnPath="getAccompanyingCourseReturnPath">
+  <person-render-box
+    render="bloc"
+    :options="{
+      addInfo : true,
+      addId : false,
+      addEntity: false,
+      addLink: false,
+      addHouseholdLink: false,
+      addAltNames: true,
+      addAge : true,
+      hLevel : 3,
+      isConfidential : false,
+      isMultiline: true,
+    }"
+    :person="participation.person"
+    :return-path="getAccompanyingCourseReturnPath"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <button-location
+            v-if="hasCurrentHouseholdAddress && !isPersonLocatingCourse(participation.person)"
+            :person="participation.person"
+          />
+          <li v-if="participation.person.current_household_id">
+            <a
+              class="btn btn-sm btn-chill-beige"
+              :href="getCurrentHouseholdUrl"
+              :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })"
+            >
+              <i class="fa fa-fw fa-home" />
+            </a>
+          </li>
+          <li>
+            <on-the-fly
+              :type="participation.person.type"
+              :id="participation.person.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :type="participation.person.type"
+              :id="participation.person.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              v-if="!participation.endDate"
+              class="btn btn-sm btn-remove"
+              :title="$t('persons_associated.leave_course')"
+              @click="modal.showModal = true"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </person-render-box>
 
-      <template v-slot:end-bloc>
-        <div class="item-row separator">
-          <ul class="record_actions">
-            <button-location
-                v-if="hasCurrentHouseholdAddress && !isPersonLocatingCourse(participation.person)"
-                v-bind:person="participation.person">
-            </button-location>
-            <li v-if="participation.person.current_household_id">
-              <a class="btn btn-sm btn-chill-beige"
-                 :href="getCurrentHouseholdUrl"
-                 :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
-                <i class="fa fa-fw fa-home"></i>
-              </a>
-            </li>
-            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-            <li>
-              <button v-if="!participation.endDate"
-                      class="btn btn-sm btn-remove"
-                      v-bind:title="$t('persons_associated.leave_course')"
-                      @click="modal.showModal = true">
-              </button>
-            </li>
-          </ul>
-        </div>
 
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('persons_associated.sure') }}
+        </h2>
       </template>
-   </person-render-box>
-
-
-   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t('persons_associated.sure') }}</h2>
-         </template>
-         <template v-slot:body>
-            <p>{{ $t('persons_associated.sure_description') }}</p>
-         </template>
-         <template v-slot:footer>
-            <button class="btn btn-danger" @click.prevent="$emit('close', participation)">
-               {{ $t('persons_associated.ok') }}
-            </button>
-         </template>
-      </modal>
-   </teleport>
+      <template #body>
+        <p>{{ $t('persons_associated.sure_description') }}</p>
+      </template>
+      <template #footer>
+        <button
+          class="btn btn-danger"
+          @click.prevent="$emit('close', participation)"
+        >
+          {{ $t('persons_associated.ok') }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index aff143dfe..87c996619 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -1,77 +1,92 @@
 <template>
   <div class="vue-component">
-    <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
+    <h2><a id="section-80" />{{ $t('referrer.title') }}</h2>
 
     <teleport to="body">
-      <modal v-if="modal.showModal"
-             :modalDialogClass="modal.modalDialogClass"
-             @close="cancelChange">
-        <template v-slot:header>
-          <h3 class="modal-title">{{ $t('confirm.title') }}</h3>
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="cancelChange"
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ $t('confirm.title') }}
+          </h3>
         </template>
 
-        <template v-slot:body-head>
+        <template #body-head>
           <div class="modal-body">
-            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })"></p>
+            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })" />
           </div>
         </template>
 
-        <template v-slot:footer>
-          <button class="btn btn-save"
-                  @click.prevent="this.confirmReferrer">
-            {{ $t('confirm.ok_referrer')}}
+        <template #footer>
+          <button
+            class="btn btn-save"
+            @click.prevent="this.confirmReferrer"
+          >
+            {{ $t('confirm.ok_referrer') }}
           </button>
         </template>
       </modal>
     </teleport>
 
     <div>
-
-      <label class="col-form-label" for="selectJob">
+      <label
+        class="col-form-label"
+        for="selectJob"
+      >
         {{ $t('job.label') }}
       </label>
 
       <VueMultiselect
-          name="selectJob"
-          label="text"
-          :custom-label="customJobLabel"
-          track-by="id"
-          :multiple="false"
-          :searchable="true"
-          :placeholder="$t('job.placeholder')"
-          v-model="valueJob"
-          :options="jobs"
-          :select-label="$t('multiselect.select_label')"
-          :deselect-label="$t('multiselect.deselect_label')"
-          :selected-label="$t('multiselect.selected_label')"
-      ></VueMultiselect>
+        name="selectJob"
+        label="text"
+        :custom-label="customJobLabel"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('job.placeholder')"
+        v-model="valueJob"
+        :options="jobs"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+      />
 
-      <label class="col-form-label" for="selectReferrer">
+      <label
+        class="col-form-label"
+        for="selectReferrer"
+      >
         {{ $t('referrer.label') }}
       </label>
 
       <VueMultiselect
-          name="selectReferrer"
-          label="text"
-          track-by="id"
-          :multiple="false"
-          :searchable="true"
-          :placeholder="$t('referrer.placeholder')"
-          v-model="value"
-          @select="updateReferrer"
-          @remove="removeReferrer"
-          :options="users"
-          :select-label="$t('multiselect.select_label')"
-          :deselect-label="$t('multiselect.deselect_label')"
-          :selected-label="$t('multiselect.selected_label')"
-      ></VueMultiselect>
+        name="selectReferrer"
+        label="text"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('referrer.placeholder')"
+        v-model="value"
+        @select="updateReferrer"
+        @remove="removeReferrer"
+        :options="users"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+      />
 
       <template v-if="usersSuggestedFilteredByJob.length > 0">
         <ul class="list-suggest add-items inline">
-          <li v-for="(u, i) in usersSuggestedFilteredByJob" @click="updateReferrer(u)" :key="`referrer-${i}`">
-               <span>
-                  <user-render-box-badge :user="u"></user-render-box-badge>
-               </span>
+          <li
+            v-for="(u, i) in usersSuggestedFilteredByJob"
+            @click="updateReferrer(u)"
+            :key="`referrer-${i}`"
+          >
+            <span>
+              <user-render-box-badge :user="u" />
+            </span>
           </li>
         </ul>
       </template>
@@ -81,20 +96,23 @@
       <ul class="record_actions">
         <li>
           <button
-              class="btn btn-create"
-              type="button"
-              name="button"
-              @click="assignMe">
+            class="btn btn-create"
+            type="button"
+            name="button"
+            @click="assignMe"
+          >
             {{ $t('referrer.assign_me') }}
           </button>
         </li>
       </ul>
     </div>
 
-    <div v-if="!isJobValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isJobValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('job.not_valid') }}
     </div>
-
   </div>
 </template>
 
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 7cf0dcecc..5c10c4fac 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -1,164 +1,247 @@
 <template>
-<div class="vue-component">
-
-   <h2><a id="section-50"></a>{{ $t('requestor.title') }}</h2>
-
-   <div v-if="accompanyingCourse.requestor && isAnonymous" class="flex-table">
+  <div class="vue-component">
+    <h2><a id="section-50" />{{ $t('requestor.title') }}</h2>
 
+    <div
+      v-if="accompanyingCourse.requestor && isAnonymous"
+      class="flex-table"
+    >
       <label>
-         <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
-         {{ $t('requestor.is_anonymous') }}
+        <input
+          type="checkbox"
+          v-model="requestorIsAnonymous"
+          class="me-2"
+        >
+        {{ $t('requestor.is_anonymous') }}
       </label>
       <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
-         <template v-slot:confidential-content>
-            <third-party-render-box
-               :thirdparty="accompanyingCourse.requestor"
-               :options="{
-                  addLink: false,
-                  addId: false,
-                  addEntity: true,
-                  addInfo: false,
-                  hLevel: 3,
-                  isMultiline: true,
-                  isConfidential: true
-                  }"
-            >
-            <template v-slot:record-actions>
-               <ul class="record_actions">
-                  <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
-                  <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-               </ul>
+        <template #confidential-content>
+          <third-party-render-box
+            :thirdparty="accompanyingCourse.requestor"
+            :options="{
+              addLink: false,
+              addId: false,
+              addEntity: true,
+              addInfo: false,
+              hLevel: 3,
+              isMultiline: true,
+              isConfidential: true
+            }"
+          >
+            <template #record-actions>
+              <ul class="record_actions">
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="show"
+                  />
+                </li>
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
+                </li>
+              </ul>
             </template>
-            </third-party-render-box>
-         </template>
+          </third-party-render-box>
+        </template>
       </confidential>
 
       <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
-         <template v-slot:confidential-content>
-            <person-render-box render="bloc"
-               :person="accompanyingCourse.requestor"
-               :options="{
-                  addLink: false,
-                  addId: false,
-                  addAltNames: false,
-                  addEntity: true,
-                  addInfo: true,
-                  hLevel: 3,
-                  isMultiline: true,
-                  isConfidential: false,
-                  addAge: true,
-                  }"
-            >
-               <template v-slot:record-actions>
-                  <ul class="record_actions">
-                     <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
-                     <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-                  </ul>
-               </template>
-            </person-render-box>
-         </template>
+        <template #confidential-content>
+          <person-render-box
+            render="bloc"
+            :person="accompanyingCourse.requestor"
+            :options="{
+              addLink: false,
+              addId: false,
+              addAltNames: false,
+              addEntity: true,
+              addInfo: true,
+              hLevel: 3,
+              isMultiline: true,
+              isConfidential: false,
+              addAge: true,
+            }"
+          >
+            <template #record-actions>
+              <ul class="record_actions">
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="show"
+                  />
+                </li>
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
+                </li>
+              </ul>
+            </template>
+          </person-render-box>
+        </template>
       </confidential>
 
       <ul class="record_actions">
-         <li>
-            <button class="btn btn-remove"
-               :title="$t('action.remove')"
-               @click="removeRequestor">
-               {{ $t('action.remove') }}
-            </button>
-         </li>
+        <li>
+          <button
+            class="btn btn-remove"
+            :title="$t('action.remove')"
+            @click="removeRequestor"
+          >
+            {{ $t('action.remove') }}
+          </button>
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div v-else-if="accompanyingCourse.requestor && !isAnonymous" class="flex-table">
+    <div
+      v-else-if="accompanyingCourse.requestor && !isAnonymous"
+      class="flex-table"
+    >
       <label>
-         <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
-         {{ $t('requestor.is_anonymous') }}
+        <input
+          type="checkbox"
+          v-model="requestorIsAnonymous"
+          class="me-2"
+        >
+        {{ $t('requestor.is_anonymous') }}
       </label>
 
       <third-party-render-box
-            v-if="accompanyingCourse.requestor.type === 'thirdparty'"
-            :thirdparty="accompanyingCourse.requestor"
-            :options="{
-               addLink: false,
-               addId: false,
-               addEntity: true,
-               addInfo: false,
-               hLevel: 3,
-               isMultiline: true,
-               isConfidential: true
-               }"
-         >
-         <template v-slot:record-actions>
-            <ul class="record_actions">
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-            </ul>
-         </template>
+        v-if="accompanyingCourse.requestor.type === 'thirdparty'"
+        :thirdparty="accompanyingCourse.requestor"
+        :options="{
+          addLink: false,
+          addId: false,
+          addEntity: true,
+          addInfo: false,
+          hLevel: 3,
+          isMultiline: true,
+          isConfidential: true
+        }"
+      >
+        <template #record-actions>
+          <ul class="record_actions">
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="show"
+              />
+            </li>
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="edit"
+                @save-form-on-the-fly="saveFormOnTheFly"
+                ref="onTheFly"
+              />
+            </li>
+          </ul>
+        </template>
       </third-party-render-box>
 
-      <person-render-box render="bloc"
-         v-if="accompanyingCourse.requestor.type === 'person'"
-         :person="accompanyingCourse.requestor"
-         :options="{
-            addLink: false,
-            addId: false,
-            addAltNames: false,
-            addEntity: true,
-            addInfo: true,
-            hLevel: 3,
-            isMultiline: true,
-            isConfidential: false
-            }"
+      <person-render-box
+        render="bloc"
+        v-if="accompanyingCourse.requestor.type === 'person'"
+        :person="accompanyingCourse.requestor"
+        :options="{
+          addLink: false,
+          addId: false,
+          addAltNames: false,
+          addEntity: true,
+          addInfo: true,
+          hLevel: 3,
+          isMultiline: true,
+          isConfidential: false
+        }"
       >
-         <template v-slot:record-actions>
-            <ul class="record_actions">
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-            </ul>
-         </template>
+        <template #record-actions>
+          <ul class="record_actions">
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="show"
+              />
+            </li>
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="edit"
+                @save-form-on-the-fly="saveFormOnTheFly"
+                ref="onTheFly"
+              />
+            </li>
+          </ul>
+        </template>
       </person-render-box>
 
       <ul class="record_actions">
-         <li>
-            <button class="btn btn-remove"
-               :title="$t('action.remove')"
-               @click="removeRequestor">
-               {{ $t('action.remove') }}
-            </button>
-         </li>
+        <li>
+          <button
+            class="btn btn-remove"
+            :title="$t('action.remove')"
+            @click="removeRequestor"
+          >
+            {{ $t('action.remove') }}
+          </button>
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div v-else>
+    <div v-else>
       <label class="chill-no-data-statement">{{ $t('requestor.counter') }}</label>
-   </div>
+    </div>
 
-   <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
+    <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
       <ul class="list-suggest add-items inline">
-         <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-            <person-text v-if="p.type === 'person'" :person="p"></person-text>
-            <span v-else>{{ p.text }}</span>
-         </li>
+        <li
+          v-for="p in suggestedEntities"
+          :key="uniqueId(p)"
+          @click="addSuggestedEntity(p)"
+        >
+          <person-text
+            v-if="p.type === 'person'"
+            :person="p"
+          />
+          <span v-else>{{ p.text }}</span>
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div>
+    <div>
       <ul class="record_actions">
-         <li class="add-persons">
-            <add-persons v-if="accompanyingCourse.requestor === null"
-               buttonTitle="requestor.add_requestor"
-               modalTitle="requestor.add_requestor"
-               v-bind:key="addPersons.key"
-               v-bind:options="addPersons.options"
-               @addNewPersons="addNewPersons"
-               ref="addPersons"> <!-- to cast child method -->
-            </add-persons>
-         </li>
+        <li class="add-persons">
+          <add-persons
+            v-if="accompanyingCourse.requestor === null"
+            button-title="requestor.add_requestor"
+            modal-title="requestor.add_requestor"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
       </ul>
-   </div>
-
-</div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 7287437a3..39aed3f35 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -1,49 +1,56 @@
 <template>
-<div class="vue-component">
+  <div class="vue-component">
+    <h2><a id="section-90" />{{ $t('resources.title') }}</h2>
 
-   <h2><a id="section-90"></a>{{ $t('resources.title')}}</h2>
-
-   <div v-if="resources.length > 0">
+    <div v-if="resources.length > 0">
       <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
-   </div>
-   <div v-else>
+    </div>
+    <div v-else>
       <label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
-   </div>
+    </div>
 
-   <div class="flex-table mb-3">
+    <div class="flex-table mb-3">
       <resource-item
-         v-for="resource in resources"
-         v-bind:resource="resource"
-         v-bind:key="resource.id"
-         @remove="removeResource">
-      </resource-item>
-   </div>
+        v-for="resource in resources"
+        :resource="resource"
+        :key="resource.id"
+        @remove="removeResource"
+      />
+    </div>
 
-   <div v-if="suggestedEntities.length > 0">
+    <div v-if="suggestedEntities.length > 0">
       <ul class="list-suggest add-items inline">
-         <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-            <person-text v-if="p.type === 'person'" :person="p"></person-text>
-            <span v-else>{{ p.text }}</span>
-         </li>
+        <li
+          v-for="p in suggestedEntities"
+          :key="uniqueId(p)"
+          @click="addSuggestedEntity(p)"
+        >
+          <person-text
+            v-if="p.type === 'person'"
+            :person="p"
+          />
+          <span v-else>{{ p.text }}</span>
+        </li>
       </ul>
-   </div>
+    </div>
 
-   <div>
+    <div>
       <ul class="record_actions">
-         <li class="add-persons">
-            <add-persons
-            buttonTitle="resources.add_resources"
-            modalTitle="resources.add_resources"
-            v-bind:key="addPersons.key"
-            v-bind:options="addPersons.options"
-            @addNewPersons="addNewPersons"
-            ref="addPersons"> <!-- to cast child method -->
-            </add-persons>
-         </li>
+        <li class="add-persons">
+          <add-persons
+            button-title="resources.add_resources"
+            modal-title="resources.add_resources"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
       </ul>
-   </div>
-
-</div>
+    </div>
+  </div>
 </template>
 
 <script>
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 920287b86..7a31ba97e 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
@@ -1,104 +1,107 @@
 <template>
-   <person-render-box render="bloc"
-      v-if="resource.resource.type === 'person'"
-      :person="resource.resource"
-      :options="{
-         addInfo : true,
-         addId : false,
-         addEntity: true,
-         addLink: false,
-         addAltNames: true,
-         addAge : false,
-         hLevel : 3,
-         isConfidential : true
-      }">
-      <template v-slot:end-bloc>
-        <div class="item-row separator">
-          <ul class="record_actions">
-            <li>
-              <write-comment
-                  :resource="resource"
-                  @updateComment="updateComment"
-              ></write-comment>
-            </li>
-            <li>
-              <on-the-fly
-                  :parent="parent"
-                  :type="resource.resource.type"
-                  :id="resource.resource.id"
-                  action="show">
-              </on-the-fly>
-            </li>
-            <li>
-              <on-the-fly
-                  :parent="parent"
-                  :type="resource.resource.type"
-                  :id="resource.resource.id"
-                  action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly"
-                  ref="onTheFly">
-              </on-the-fly>
-            </li>
-            <li>
-              <button
-                  class="btn btn-sm btn-remove"
-                  :title="$t('action.remove')"
-                  @click.prevent="$emit('remove', resource)">
-              </button>
-            </li>
-          </ul>
-        </div>
-      </template>
-   </person-render-box>
+  <person-render-box
+    render="bloc"
+    v-if="resource.resource.type === 'person'"
+    :person="resource.resource"
+    :options="{
+      addInfo : true,
+      addId : false,
+      addEntity: true,
+      addLink: false,
+      addAltNames: true,
+      addAge : false,
+      hLevel : 3,
+      isConfidential : true
+    }"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <li>
+            <write-comment
+              :resource="resource"
+              @update-comment="updateComment"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              class="btn btn-sm btn-remove"
+              :title="$t('action.remove')"
+              @click.prevent="$emit('remove', resource)"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </person-render-box>
 
-   <third-party-render-box
-      v-if="resource.resource.type === 'thirdparty'"
-      :thirdparty="resource.resource"
-      :options="{
-         addLink : false,
-         addId : false,
-         addEntity: true,
-         addInfo: false,
-         hLevel: 3
-      }">
-      <template v-slot:end-bloc>
-        <div class="item-row separator">
-          <ul class="record_actions">
-            <li>
-              <write-comment
-                  :resource="resource"
-                  @updateComment="updateComment"
-              ></write-comment>
-            </li>
-            <li>
-              <on-the-fly
-                  :parent="parent"
-                  :type="resource.resource.type"
-                  :id="resource.resource.id"
-                  action="show">
-              </on-the-fly>
-            </li>
-            <li>
-              <on-the-fly
-                  :parent="parent"
-                  :type="resource.resource.type"
-                  :id="resource.resource.id"
-                  action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly"
-                  ref="onTheFly">
-              </on-the-fly>
-            </li>
-            <li>
-              <button
-                  class="btn btn-sm btn-remove"
-                  :title="$t('action.remove')"
-                  @click.prevent="$emit('remove', resource)">
-              </button>
-            </li>
-          </ul>
-        </div>
-      </template>
-   </third-party-render-box>
+  <third-party-render-box
+    v-if="resource.resource.type === 'thirdparty'"
+    :thirdparty="resource.resource"
+    :options="{
+      addLink : false,
+      addId : false,
+      addEntity: true,
+      addInfo: false,
+      hLevel: 3
+    }"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <li>
+            <write-comment
+              :resource="resource"
+              @update-comment="updateComment"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              class="btn btn-sm btn-remove"
+              :title="$t('action.remove')"
+              @click.prevent="$emit('remove', resource)"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </third-party-render-box>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
index 99b1fa88d..3f9c76dd4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
@@ -1,40 +1,41 @@
 <template>
-   <a class="btn btn-sm btn-misc change-icon"
-      :title="$t('write_comment')"
-      @click="openModal"
-   ><i class="fa fa-pencil-square-o"></i>
-   </a>
+  <a
+    class="btn btn-sm btn-misc change-icon"
+    :title="$t('write_comment')"
+    @click="openModal"
+  ><i class="fa fa-pencil-square-o" />
+  </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('write_comment_about', { 'r': resource.resource.text }) }}</h3>
-
-         </template>
-         <template v-slot:body>
-
-            <ckeditor
-               name="content"
-               v-bind:placeholder="$t('comment_placeholder')"
-               :editor="editor"
-               v-model="content"
-               tag-name="textarea">
-            </ckeditor>
-
-         </template>
-         <template v-slot:footer>
-
-            <a class="btn btn-save"
-               @click="saveAction">
-               {{ $t('action.save')}}
-            </a>
-
-         </template>
-      </modal>
-   </teleport>
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h3 class="modal-title">
+          {{ $t('write_comment_about', { 'r': resource.resource.text }) }}
+        </h3>
+      </template>
+      <template #body>
+        <ckeditor
+          name="content"
+          :placeholder="$t('comment_placeholder')"
+          :editor="editor"
+          v-model="content"
+          tag-name="textarea"
+        />
+      </template>
+      <template #footer>
+        <a
+          class="btn btn-save"
+          @click="saveAction"
+        >
+          {{ $t('action.save') }}
+        </a>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
index f430e02eb..bcab02f7c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
@@ -1,20 +1,31 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-70"></a>{{ $t('scopes.title') }}</h2>
+    <h2><a id="section-70" />{{ $t('scopes.title') }}</h2>
 
-     <div class="mb-4">
-        <div class="form-check" v-for="s in scopes" :key="s.id">
-          <input class="form-check-input" type="checkbox" v-model="checkedScopes" :value="s"/>
-          <label class="form-check-label">
-             {{ s.name.fr }}
-          </label>
-        </div>
-     </div>
-
-    <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
-      {{ $t('scopes.add_at_least_one') }}
+    <div class="mb-4">
+      <div
+        class="form-check"
+        v-for="s in scopes"
+        :key="s.id"
+      >
+        <input
+          class="form-check-input"
+          type="checkbox"
+          v-model="checkedScopes"
+          :value="s"
+        >
+        <label class="form-check-label">
+          {{ s.name.fr }}
+        </label>
+      </div>
     </div>
 
+    <div
+      v-if="!isScopeValid"
+      class="alert alert-warning to-confirm"
+    >
+      {{ $t('scopes.add_at_least_one') }}
+    </div>
   </div>
 </template>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 37ebb1eaa..f820b6291 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -1,30 +1,32 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-60"></a>{{ $t('social_issue.title') }}</h2>
+    <h2><a id="section-60" />{{ $t('social_issue.title') }}</h2>
 
-     <div class="my-4">
-        <!--label for="field">{{ $t('social_issue.label') }}</label
+    <div class="my-4">
+      <!--label for="field">{{ $t('social_issue.label') }}</label
         -->
-        <VueMultiselect
-           name="field"
-           :close-on-select="true"
-           :allow-empty="true"
-           :show-labels="false"
-           track-by="id"
-           label="text"
-           :multiple="true"
-           :searchable="true"
-           :placeholder="$t('social_issue.label')"
-           @update:model-value="updateSocialIssues"
-           :model-value="value"
-           :options="options">
-        </VueMultiselect>
-     </div>
-
-     <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
-        {{ $t('social_issue.not_valid') }}
-     </div>
+      <VueMultiselect
+        name="field"
+        :close-on-select="true"
+        :allow-empty="true"
+        :show-labels="false"
+        track-by="id"
+        label="text"
+        :multiple="true"
+        :searchable="true"
+        :placeholder="$t('social_issue.label')"
+        @update:model-value="updateSocialIssues"
+        :model-value="value"
+        :options="options"
+      />
+    </div>
 
+    <div
+      v-if="!isSocialIssueValid"
+      class="alert alert-warning to-confirm"
+    >
+      {{ $t('social_issue.not_valid') }}
+    </div>
   </div>
 </template>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
index fd4b38463..69f774223 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
@@ -1,17 +1,22 @@
 <template>
-<div class="vue-component">
-    <h2><a id="section-110"></a>
-        {{ $t('startdate.change') }}
+  <div class="vue-component">
+    <h2>
+      <a id="section-110" />
+      {{ $t('startdate.change') }}
     </h2>
     <div>
-        <div class="mb-3 row">
-            <div class="col-sm-12 date-update">
-                <input class="form-control" type="date" id="startDate" v-model="startDateInput">
-            </div>
+      <div class="mb-3 row">
+        <div class="col-sm-12 date-update">
+          <input
+            class="form-control"
+            type="date"
+            id="startDate"
+            v-model="startDateInput"
+          >
         </div>
+      </div>
     </div>
-</div>
-
+  </div>
 </template>
 
 <script>
@@ -20,7 +25,7 @@ import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import { mapState } from 'vuex';
 
 export default {
-    name: 'startDate',
+    name: 'StartDate',
     data() {
         return {
             lastRecordedDate: null
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index 1047ab9d2..92c41b75f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -1,20 +1,23 @@
 <template>
-   <teleport to="#content">
-      <div id="navmap">
-         <nav>
-            <a class="top" href="#top">
-               <i class="fa fa-fw fa-square"></i>
-               <span>{{ $t('nav.top') }}</span>
-            </a>
-            <item
-               v-for="item of items"
-               :key="item.key"
-               :item="item"
-               :step="step">
-            </item>
-         </nav>
-      </div>
-   </teleport>
+  <teleport to="#content">
+    <div id="navmap">
+      <nav>
+        <a
+          class="top"
+          href="#top"
+        >
+          <i class="fa fa-fw fa-square" />
+          <span>{{ $t('nav.top') }}</span>
+        </a>
+        <item
+          v-for="item of items"
+          :key="item.key"
+          :item="item"
+          :step="step"
+        />
+      </nav>
+    </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
index 9478744bc..6c8799f80 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
@@ -1,20 +1,20 @@
 <template>
-   <a
-      v-if="item.key <= 8"
-      :href="item.id"
-      :class="{ 'active': isActive }"
-      >
-      <i class="fa fa-fw fa-square"></i>
-      <span>{{ item.key }}</span>
-   </a>
-   <a
-      v-else-if="step === 'DRAFT'"
-      :href="item.id"
-      :class="{ 'active': isActive }"
-      >
-      <i class="fa fa-fw fa-square"></i>
-      <span>{{ item.key }}</span>
-   </a>
+  <a
+    v-if="item.key <= 8"
+    :href="item.id"
+    :class="{ 'active': isActive }"
+  >
+    <i class="fa fa-fw fa-square" />
+    <span>{{ item.key }}</span>
+  </a>
+  <a
+    v-else-if="step === 'DRAFT'"
+    :href="item.id"
+    :class="{ 'active': isActive }"
+  >
+    <i class="fa fa-fw fa-square" />
+    <span>{{ item.key }}</span>
+  </a>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
index d035077f8..7547375e6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
@@ -1,58 +1,83 @@
 <template>
-<div class="vue-component">
-   <h2>Tests</h2>
+  <div class="vue-component">
+    <h2>Tests</h2>
    
-   <!-- Modal -->
-   <ul class="record_actions">
+    <!-- Modal -->
+    <ul class="record_actions">
       <li>
-         <button class="btn btn-create" @click="modal1.showModal = true">
-            {{ $t('action.show_modal') }}
-         </button>
+        <button
+          class="btn btn-create"
+          @click="modal1.showModal = true"
+        >
+          {{ $t('action.show_modal') }}
+        </button>
       </li>
       <li>
-         <button class="btn btn-create" @click="modal2.showModal = true">
-            Ouvrir une seconde modale
-         </button>
+        <button
+          class="btn btn-create"
+          @click="modal2.showModal = true"
+        >
+          Ouvrir une seconde modale
+        </button>
       </li>
-   </ul>
+    </ul>
    
-   <teleport to="body">
-   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
-      <template v-slot:header>
-         <h2 class="modal-title">Le titre de ma modale</h2>
-      </template>
-      <template v-slot:body>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-      </template>
-      <template v-slot:footer>
-         <button class="btn btn-create" @click="modal1.showModal = false; modal2.showModal = true">
-            {{ $t('action.next')}}</button>
-      </template>
-   </modal>
-   </teleport>
+    <teleport to="body">
+      <modal
+        v-if="modal1.showModal"
+        :modal-dialog-class="modal1.modalDialogClass"
+        @close="modal1.showModal = false"
+      >      
+        <template #header>
+          <h2 class="modal-title">
+            Le titre de ma modale
+          </h2>
+        </template>
+        <template #body>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+          <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+          <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+          <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-create"
+            @click="modal1.showModal = false; modal2.showModal = true"
+          >
+            {{ $t('action.next') }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
    
-   <teleport to="body">
-   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
-      <template v-slot:header>
-         <h2 class="modal-title">Une autre modale</h2>
-      </template>
-      <template v-slot:body>
-         <p>modal 2</p>
-      </template>
-      <template v-slot:footer>
-         <button class="btn btn-create" @click="modal2.showModal = false">
-            {{ $t('action.save')}}</button>
-      </template>
-   </modal>
-   </teleport>
-   <!-- END Modal -->
-   
-</div>
+    <teleport to="body">
+      <modal
+        v-if="modal2.showModal"
+        :modal-dialog-class="modal2.modalDialogClass"
+        @close="modal2.showModal = false"
+      >      
+        <template #header>
+          <h2 class="modal-title">
+            Une autre modale
+          </h2>
+        </template>
+        <template #body>
+          <p>modal 2</p>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-create"
+            @click="modal2.showModal = false"
+          >
+            {{ $t('action.save') }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+    <!-- END Modal -->
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index b37298ab1..d9593c7aa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -1,39 +1,51 @@
 <template>
-
   <h2>{{ $t('pick_social_issue') }}</h2>
 
 
   <div id="awc_create_form">
-
-      <div id="picking" class="">
-          <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
-          <div v-for="si in socialIssues" :key="si.id">
-            <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
-          </div>
+    <div
+      id="picking"
+      class=""
+    >
+      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+      <div
+        v-for="si in socialIssues"
+        :key="si.id"
+      >
+        <input
+          type="radio"
+          :value="si.id"
+          name="socialIssue"
+          v-model="socialIssuePicked"
+        ><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+      </div>
       <div class="my-3">
         <div class="col-11">
           <vue-multiselect
-              name="otherIssues"
-              label="text"
-              track-by="id"
-              open-direction="bottom"
-              :close-on-select="true"
-              :preserve-search="false"
-              :reset-after="true"
-              :hide-selected="true"
-              :taggable="false"
-              :multiple="false"
-              :searchable="true"
-              :allow-empty="true"
-              :show-labels="false"
-              :loading="issueIsLoading"
-              :placeholder="$t('choose_other_social_issue')"
-              :options="socialIssuesOther"
-              @select="addIssueInList">
-          </vue-multiselect>
+            name="otherIssues"
+            label="text"
+            track-by="id"
+            open-direction="bottom"
+            :close-on-select="true"
+            :preserve-search="false"
+            :reset-after="true"
+            :hide-selected="true"
+            :taggable="false"
+            :multiple="false"
+            :searchable="true"
+            :allow-empty="true"
+            :show-labels="false"
+            :loading="issueIsLoading"
+            :placeholder="$t('choose_other_social_issue')"
+            :options="socialIssuesOther"
+            @select="addIssueInList"
+          />
         </div>
       </div>
-      <div v-if="hasSocialIssuePicked" class="mb-3">
+      <div
+        v-if="hasSocialIssuePicked"
+        class="mb-3"
+      >
         <h2>{{ $t('pick_an_action') }}</h2>
         <div class="col-11">
           <vue-multiselect
@@ -44,57 +56,91 @@
             :close-on-select="true"
             :show-labels="true"
             track-by="id"
-          ></vue-multiselect>
+          />
         </div>
       </div>
 
       <div v-if="isLoadingSocialActions">
-        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
       </div>
 
-      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
+      <div
+        v-if="hasSocialActionPicked"
+        id="persons"
+        class="mb-5"
+      >
         <h2>{{ $t('persons_involved') }}</h2>
 
         <ul>
-          <li v-for="p in personsReachables" :key="p.id">
+          <li
+            v-for="p in personsReachables"
+            :key="p.id"
+          >
             <div class="form-check">
-              <input type="checkbox" :value="p.id" v-model="personsPicked" class="form-check-input" :id="'person_check'+p.id">
-              <label class="form-check-label" :for="'person_check' + p.id">
-                <person-text :person="p"></person-text>
+              <input
+                type="checkbox"
+                :value="p.id"
+                v-model="personsPicked"
+                class="form-check-input"
+                :id="'person_check'+p.id"
+              >
+              <label
+                class="form-check-label"
+                :for="'person_check' + p.id"
+              >
+                <person-text :person="p" />
               </label>
             </div>
           </li>
         </ul>
       </div>
-
     </div>
     <!-- <div v-if="hasSocialActionPicked" id="start_date">
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
     </div> -->
     <div class="row">
-    <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
-      <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
-      <div class="col-sm-8">
-          <input class="form-control" type="date" v-model="startDate"/>
+      <div
+        v-if="hasSocialActionPicked"
+        id="start_date"
+        class="mb-3 row"
+      >
+        <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
+        <div class="col-sm-8">
+          <input
+            class="form-control"
+            type="date"
+            v-model="startDate"
+          >
+        </div>
       </div>
-    </div>
 
-    <!-- <div v-if="hasSocialActionPicked" id="end_date">
+      <!-- <div v-if="hasSocialActionPicked" id="end_date">
       <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
     </div> -->
-    <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
-      <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
-      <div class="col-sm-8">
-          <input class="form-control" type="date" v-model="endDate"/>
+      <div
+        v-if="hasSocialActionPicked"
+        id="end_date"
+        class="mb-3 row"
+      >
+        <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
+        <div class="col-sm-8">
+          <input
+            class="form-control"
+            type="date"
+            v-model="endDate"
+          >
+        </div>
       </div>
     </div>
-    </div>
     <div id="confirm">
       <div v-if="hasErrors">
         <p>{{ $t('form_has_errors') }}</p>
 
         <ul>
-          <li v-for="e in errors" :key="e.id">
+          <li
+            v-for="e in errors"
+            :key="e.id"
+          >
             {{ e }}
           </li>
         </ul>
@@ -103,15 +149,26 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <button class="btn btn-cancel" @click="goToPrevious">
+            <button
+              class="btn btn-cancel"
+              @click="goToPrevious"
+            >
               {{ $t('action.cancel') }}
             </button>
           </li>
           <li v-if="hasSocialActionPicked">
-            <button class="btn btn-save" v-show="!isPostingWork" @click="submit">
+            <button
+              class="btn btn-save"
+              v-show="!isPostingWork"
+              @click="submit"
+            >
               {{ $t('action.save') }}
             </button>
-            <button class="btn btn-save" v-show="isPostingWork" disabled>
+            <button
+              class="btn btn-save"
+              v-show="isPostingWork"
+              disabled
+            >
               {{ $t('action.save') }}
             </button>
           </li>
@@ -119,7 +176,6 @@
       </div>
     </div>
   </div>
-
 </template>
 
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index c0f5178fd..a1a6bbd4a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -1,330 +1,515 @@
 <template>
-   <div id="workEditor" class="my-4">
-      <div id="title" class="action-row">
-         <div>
-            <p class="wl-item social-issues">
-               <span class="chill-entity entity-social-issue">
-                  <span class="badge bg-chill-l-gray text-dark">{{ work.socialAction.issue.text }}</span>
-               </span>
-            </p>
-         </div>
-         <h2 class="badge-title">
-            <span class="title_label"></span>
-            <span class="title_action">{{ work.socialAction.text }}</span>
-         </h2>
+  <div
+    id="workEditor"
+    class="my-4"
+  >
+    <div
+      id="title"
+      class="action-row"
+    >
+      <div>
+        <p class="wl-item social-issues">
+          <span class="chill-entity entity-social-issue">
+            <span class="badge bg-chill-l-gray text-dark">{{ work.socialAction.issue.text }}</span>
+          </span>
+        </p>
+      </div>
+      <h2 class="badge-title">
+        <span class="title_label" />
+        <span class="title_action">{{ work.socialAction.text }}</span>
+      </h2>
+    </div>
+
+    <div
+      id="startDate"
+      class="action-row"
+    >
+      <label class="col-form-label">{{ $t('startDate') }}</label>
+      <input
+        v-model="startDate"
+        type="date"
+        required="true"
+        class="form-control"
+        v-once
+      >
+    </div>
+
+    <div
+      id="endDate"
+      class="action-row"
+    >
+      <label class="col-form-label">{{ $t('endDate') }}</label>
+      <input
+        v-model="endDate"
+        type="date"
+        class="form-control"
+      >
+    </div>
+
+    <div
+      id="privateComment"
+      class="action-row"
+    >
+      <label class="col-form-label">{{ $t('private_comment') }}</label>
+      <ckeditor
+        v-model="privateComment"
+        :editor="editor"
+        tag-name="textarea"
+      />
+    </div>
+
+    <div
+      id="comment"
+      class="action-row"
+    >
+      <label class="col-form-label">{{ $t('comments') }}</label>
+      <ckeditor
+        v-model="note"
+        :editor="editor"
+        tag-name="textarea"
+      />
+    </div>
+
+
+    <div
+      id="objectives"
+      class="action-row"
+    >
+      <div
+        aria="hidden"
+        class="title"
+      >
+        <div><h3>{{ $t('goals_title') }}</h3></div>
+        <div><h3>{{ $t('results_title') }}</h3></div>
       </div>
 
-      <div id="startDate" class="action-row">
-         <label class="col-form-label">{{ $t('startDate') }}</label>
-         <input v-model="startDate" type="date" required="true" class="form-control" v-once/>
+      <!-- results which are not attached to an objective -->
+      <div v-if="hasResultsForAction">
+        <div class="results_without_objective">
+          {{ $t('results_without_objective') }}
+        </div>
+        <div>
+          <add-result
+            :available-results="resultsForAction"
+            destination="action"
+          />
+        </div>
       </div>
 
-      <div id="endDate" class="action-row">
-         <label class="col-form-label">{{ $t('endDate') }}</label>
-         <input v-model="endDate" type="date" class="form-control" />
+      <!-- results which **are** attached to an objective -->
+      <div
+        v-for="g in goalsPicked"
+        :key="g.goal.id"
+      >
+        <div
+          class="item-title"
+          @click="removeGoal(g)"
+        >
+          <span class="removable">{{ g.goal.title.fr }}</span>
+        </div>
+        <div>
+          <add-result
+            :goal="g.goal"
+            destination="goal"
+          />
+        </div>
+      </div>
+      <div
+        class="accordion"
+        id="expandedSuggestions"
+      >
+        <div
+          v-if="availableForCheckGoal.length > 0"
+          class="accordion-item"
+        >
+          <h2
+            class="accordion-header"
+            id="heading_expanded_suggestions"
+          >
+            <button
+              v-if="isExpanded"
+              class="accordion-button"
+              type="button"
+              data-bs-toggle="collapse"
+              aria-expanded="true"
+              @click="toggleSelect"
+            >
+              Masquer
+            </button>
+
+            <button
+              v-else
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              aria-expanded="false"
+              @click="toggleSelect"
+            >
+              Motifs, objectifs et dispositfs disponibles
+            </button>
+          </h2>
+          <div
+            class="accordion-collapse"
+            id="collapse_expanded_suggestions"
+            aria-labelledby="heading_expanded_suggestions"
+            data-bs-parent="#expandedSuggestions"
+          >
+            <template v-if="isExpanded">
+              <ul class="list-suggest add-items">
+                <li
+                  v-for="g in availableForCheckGoal"
+                  @click="addGoal(g)"
+                  :key="g.id"
+                >
+                  <span>{{ g.title.fr }}</span>
+                </li>
+              </ul>
+            </template>
+          </div>
+          <p
+            v-if="goalsPicked.length ===0"
+            class="chill-no-data-statement"
+          >
+            Aucun objectif associé
+          </p>
+        </div>
+        <div v-else>
+          <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="evaluations"
+      class="action-row"
+    >
+      <div
+        aria="hidden"
+        class="title"
+      >
+        <div><h3>{{ $t('Evaluations') }} - {{ $t('Forms') }} - {{ $t('Post') }}</h3></div>
       </div>
 
-      <div id="privateComment" class="action-row">
-         <label class="col-form-label">{{ $t('private_comment') }}</label>
-         <ckeditor
-            v-model="privateComment"
-            :editor="editor"
-            tag-name="textarea"
-         ></ckeditor>
-      </div>
+      <!-- list evaluations -->
+      <add-evaluation
+        v-for="e in pickedEvaluations"
+        :key="e.key"
+        :evaluation="e"
+        :doc-anchor-id="this.docAnchorId"
+      />
 
-      <div id="comment" class="action-row">
-         <label class="col-form-label">{{ $t('comments') }}</label>
-         <ckeditor
-            v-model="note"
-            :editor="editor"
-            tag-name="textarea"
-         ></ckeditor>
-      </div>
-
-
-      <div id="objectives" class="action-row">
-         <div aria="hidden" class="title">
-            <div><h3>{{ $t('goals_title') }}</h3></div>
-            <div><h3>{{ $t('results_title') }}</h3></div>
-         </div>
-
-         <!-- results which are not attached to an objective -->
-         <div v-if="hasResultsForAction">
-            <div class="results_without_objective">
-               {{ $t('results_without_objective') }}
-            </div>
-            <div>
-               <add-result :availableResults="resultsForAction" destination="action"></add-result>
-            </div>
-         </div>
-
-         <!-- results which **are** attached to an objective -->
-         <div v-for="g in goalsPicked" :key="g.goal.id">
-            <div class="item-title" @click="removeGoal(g)">
-               <span class="removable">{{ g.goal.title.fr }}</span>
-            </div>
-            <div>
-               <add-result :goal="g.goal" destination="goal"></add-result>
-            </div>
-         </div>
-         <div class="accordion" id="expandedSuggestions">
-            <div v-if="availableForCheckGoal.length > 0" class="accordion-item">
-               <h2 class="accordion-header" id="heading_expanded_suggestions">
-
-                  <button v-if="isExpanded"
-                     class="accordion-button"
-                     type="button"
-                     data-bs-toggle="collapse"
-                     aria-expanded="true"
-                     @click="toggleSelect">
-                     Masquer
-                  </button>
-
-                  <button v-else
-                     class="accordion-button collapsed"
-                     type="button"
-                     data-bs-toggle="collapse"
-                     aria-expanded="false"
-                     @click="toggleSelect">
-                     Motifs, objectifs et dispositfs disponibles
-                  </button>
-
-               </h2>
-               <div class="accordion-collapse" id="collapse_expanded_suggestions"
-                  aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
-
-                  <template v-if="isExpanded">
-                     <ul class="list-suggest add-items">
-                        <li v-for="g in availableForCheckGoal" @click="addGoal(g)" :key="g.id">
-                           <span>{{ g.title.fr }}</span>
-                        </li>
-                     </ul>
-                  </template>
-
-               </div>
-               <p v-if="goalsPicked.length ===0" class="chill-no-data-statement">
-                  Aucun objectif associé
-               </p>
-            </div>
-            <div v-else>
-               <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
-            </div>
-         </div>
-      </div>
-
-      <div id="evaluations" class="action-row">
-         <div aria="hidden" class="title">
-            <div><h3>{{ $t('Evaluations') }} - {{ $t('Forms') }} - {{ $t('Post') }}</h3></div>
-         </div>
-
-         <!-- list evaluations -->
-         <add-evaluation
-            v-for="e in pickedEvaluations"
-            v-bind:key="e.key"
-            v-bind:evaluation="e"
-            v-bind:docAnchorId="this.docAnchorId">
-         </add-evaluation>
-
-         <!-- box to add new evaluation -->
-         <div class="add_evaluation">
-            <div v-if="showAddEvaluation">
-               <p>{{ $t('available_evaluations_text') }}</p>
-               <ul class="list-suggest add-items">
-                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)" :key="e.id">
-                     <span>{{ e.title.fr }}</span>
-                  </li>
-               </ul>
-            </div>
-            <ul class="record_actions" v-if="evaluationsForAction.length > 0">
-               <li>
-                  <button :title="$t('add_an_evaluation')" class="btn btn-create" @click="toggleAddEvaluation">{{ $t('add_an_evaluation') }}</button>
-               </li>
-            </ul>
-            <div v-else>
-               <span class="chill-no-data-statement">{{ $t('no_evaluations_available') }}</span>
-            </div>
-         </div>
-      </div>
-
-      <div id="persons" class="action-row">
-         <h3 class="mb-3">{{ $t('persons_involved') }}</h3>
-
-         <ul class="list-unstyled">
-            <li v-for="p in personsReachables" :key="p.id">
-               <div class="form-check">
-                  <input v-model="personsPicked" :value="p.id" type="checkbox" class="me-2 form-check-input" :id="'person_check'+p.id">
-                  <label :for="'person_check'+p.id" class="form-check-label">
-                     <person-text :person="p"></person-text>
-                  </label>
-               </div>
+      <!-- box to add new evaluation -->
+      <div class="add_evaluation">
+        <div v-if="showAddEvaluation">
+          <p>{{ $t('available_evaluations_text') }}</p>
+          <ul class="list-suggest add-items">
+            <li
+              v-for="e in evaluationsForAction"
+              @click="addEvaluation(e)"
+              :key="e.id"
+            >
+              <span>{{ e.title.fr }}</span>
             </li>
-         </ul>
+          </ul>
+        </div>
+        <ul
+          class="record_actions"
+          v-if="evaluationsForAction.length > 0"
+        >
+          <li>
+            <button
+              :title="$t('add_an_evaluation')"
+              class="btn btn-create"
+              @click="toggleAddEvaluation"
+            >
+              {{ $t('add_an_evaluation') }}
+            </button>
+          </li>
+        </ul>
+        <div v-else>
+          <span class="chill-no-data-statement">{{ $t('no_evaluations_available') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="persons"
+      class="action-row"
+    >
+      <h3 class="mb-3">
+        {{ $t('persons_involved') }}
+      </h3>
+
+      <ul class="list-unstyled">
+        <li
+          v-for="p in personsReachables"
+          :key="p.id"
+        >
+          <div class="form-check">
+            <input
+              v-model="personsPicked"
+              :value="p.id"
+              type="checkbox"
+              class="me-2 form-check-input"
+              :id="'person_check'+p.id"
+            >
+            <label
+              :for="'person_check'+p.id"
+              class="form-check-label"
+            >
+              <person-text :person="p" />
+            </label>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      id="referrers"
+      class="action-row"
+    >
+      <h3>{{ $t('referrers') }}</h3>
+
+      <div v-if="!hasReferrers">
+        <p class="chill-no-data-statement">
+          {{ $t('no_referrers') }}
+        </p>
       </div>
 
-      <div id="referrers" class="action-row">
-         <h3>{{ $t('referrers') }}</h3>
-
-         <div v-if="!hasReferrers">
-            <p class="chill-no-data-statement">{{ $t('no_referrers') }}</p>
-         </div>
-
-         <div v-else>
-            <ul class="list-suggest remove-items inline">
-                  <li v-for="u in referrers" :key="u.id" :title="$t('remove_referrer')"  @click="removeReferrer(u)">
-                     <span>
-                        {{ u.text }}
-                     </span>
-                  </li>
-            </ul>
-         </div>
-
-         <ul class="record_actions">
-            <li class="add-persons">
-               <add-persons
-                  ref="referrerPicker"
-                  :key="referrerPicker.key"
-                  :buttonTitle="$t('add_referrers')"
-                  :modalTitle="$t('choose_referrers')"
-                  :options="referrerPicker.options"
-                  @addNewPersons="addReferrers">
-               </add-persons>
-            </li>
-         </ul>
+      <div v-else>
+        <ul class="list-suggest remove-items inline">
+          <li
+            v-for="u in referrers"
+            :key="u.id"
+            :title="$t('remove_referrer')"
+            @click="removeReferrer(u)"
+          >
+            <span>
+              {{ u.text }}
+            </span>
+          </li>
+        </ul>
       </div>
 
-      <div id="handlingThirdParty" class="action-row">
-         <h3>{{ $t('handling_thirdparty') }}</h3>
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            ref="referrerPicker"
+            :key="referrerPicker.key"
+            :button-title="$t('add_referrers')"
+            :modal-title="$t('choose_referrers')"
+            :options="referrerPicker.options"
+            @add-new-persons="addReferrers"
+          />
+        </li>
+      </ul>
+    </div>
 
-         <div v-if="!hasHandlingThirdParty">
-            <p class="chill-no-data-statement">
-               {{ $t('no_handling_thirdparty') }}
-            </p>
+    <div
+      id="handlingThirdParty"
+      class="action-row"
+    >
+      <h3>{{ $t('handling_thirdparty') }}</h3>
 
-            <ul class="record_actions">
-               <li class="add-persons">
-                  <add-persons
-                     ref="handlingThirdPartyPicker"
-                     v-bind:key="handlingThirdPartyPicker.key"
-                     v-bind:buttonTitle="$t('precise_handling_thirdparty')"
-                     v-bind:modalTitle="$t('choose_a_thirdparty')"
-                     v-bind:options="handlingThirdPartyPicker.options"
-                     @addNewPersons="setHandlingThirdParty"> <!-- to cast child method -->
-                  </add-persons>
-               </li>
-            </ul>
-         </div>
-         <div v-else class="flex-table">
-               <third-party-render-box
-                  :thirdparty="handlingThirdParty"
-                  :options="{
-                     addLink: false,
-                     addId: false,
-                     addEntity: true,
-                     addInfo: false,
-                     hLevel: 3,
-                     isMultiline: true,
-                     isConfidential: false
-                     }"></third-party-render-box>
-            <ul class="record_actions">
-               <li>
-                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove" @click="removeHandlingThirdParty"/>
-               </li>
-            </ul>
-         </div>
+      <div v-if="!hasHandlingThirdParty">
+        <p class="chill-no-data-statement">
+          {{ $t('no_handling_thirdparty') }}
+        </p>
 
+        <ul class="record_actions">
+          <li class="add-persons">
+            <add-persons
+              ref="handlingThirdPartyPicker"
+              :key="handlingThirdPartyPicker.key"
+              :button-title="$t('precise_handling_thirdparty')"
+              :modal-title="$t('choose_a_thirdparty')"
+              :options="handlingThirdPartyPicker.options"
+              @add-new-persons="setHandlingThirdParty"
+            >
+              <!-- to cast child method -->
+            </add-persons>
+          </li>
+        </ul>
+      </div>
+      <div
+        v-else
+        class="flex-table"
+      >
+        <third-party-render-box
+          :thirdparty="handlingThirdParty"
+          :options="{
+            addLink: false,
+            addId: false,
+            addEntity: true,
+            addInfo: false,
+            hLevel: 3,
+            isMultiline: true,
+            isConfidential: false
+          }"
+        />
+        <ul class="record_actions">
+          <li>
+            <button
+              :title="$t('remove_handling_thirdparty')"
+              class="btn btn-remove"
+              @click="removeHandlingThirdParty"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div
+      id="thirdParties"
+      class="action-row"
+    >
+      <h3>{{ $t('thirdparty_intervener') }}</h3>
+
+      <div v-if="!hasThirdParties">
+        <p class="chill-no-data-statement">
+          {{ $t('no_thirdparty_intervener') }}
+        </p>
       </div>
 
-      <div id="thirdParties" class="action-row">
-         <h3>{{ $t('thirdparty_intervener') }}</h3>
-
-         <div v-if="!hasThirdParties">
-            <p class="chill-no-data-statement">{{ $t('no_thirdparty_intervener') }}</p>
-         </div>
-
-         <div v-else>
-            <div class="flex-bloc mb-3">
-                  <third-party-render-box
-                     v-for="thirdparty in thirdParties"
-                     :key="thirdparty.id"
-                     :thirdparty="thirdparty"
-                     :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
-                     >
-                     <template v-slot:record-actions>
-                        <ul class="record_actions">
-                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="show"></on-the-fly></li>
-                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
-                           <li>
-                              <button :title="$t('remove_thirdparty')" class="btn btn-sm btn-remove" @click="removeThirdParty(thirdparty)" />
-                           </li>
-                        </ul>
-                     </template>
-                  </third-party-render-box>
-            </div>
-         </div>
-
-         <ul class="record_actions">
-            <li class="add-persons">
-               <add-persons
-                  ref="thirdPartyPicker"
-                  v-bind:key="thirdPartyPicker.key"
-                  v-bind:buttonTitle="$t('add_thirdparties')"
-                  v-bind:modalTitle="$t('choose_thirdparties')"
-                  v-bind:options="thirdPartyPicker.options"
-                  @addNewPersons="addThirdParties"> <!-- to cast child method -->
-               </add-persons>
-            </li>
-         </ul>
+      <div v-else>
+        <div class="flex-bloc mb-3">
+          <third-party-render-box
+            v-for="thirdparty in thirdParties"
+            :key="thirdparty.id"
+            :thirdparty="thirdparty"
+            :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
+          >
+            <template #record-actions>
+              <ul class="record_actions">
+                <li>
+                  <on-the-fly
+                    :type="thirdparty.type"
+                    :id="thirdparty.id"
+                    action="show"
+                  />
+                </li>
+                <li>
+                  <on-the-fly
+                    :type="thirdparty.type"
+                    :id="thirdparty.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
+                </li>
+                <li>
+                  <button
+                    :title="$t('remove_thirdparty')"
+                    class="btn btn-sm btn-remove"
+                    @click="removeThirdParty(thirdparty)"
+                  />
+                </li>
+              </ul>
+            </template>
+          </third-party-render-box>
+        </div>
       </div>
 
-      <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
-         <p>{{ $t('fix_these_errors') }}</p>
-         <ul>
-            <li v-for="e in errors" :key="e.id">{{ e }}</li>
-         </ul>
-      </div>
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            ref="thirdPartyPicker"
+            :key="thirdPartyPicker.key"
+            :button-title="$t('add_thirdparties')"
+            :modal-title="$t('choose_thirdparties')"
+            :options="thirdPartyPicker.options"
+            @add-new-persons="addThirdParties"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
 
-   </div>
-   <ul class="record_actions sticky-form-buttons">
-      <li>
-         <list-workflow-modal
-            :workflows="this.work.workflows"
-            :allowCreate="true"
-            relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
-            :relatedEntityId="this.work.id"
-            :workflowsAvailables="this.work.workflows_availables"
-            :preventDefaultMoveToGenerate="true"
-            @go-to-generate-workflow="goToGenerateWorkflow"
-         ></list-workflow-modal>
-      </li>
+    <div
+      v-if="errors.length > 0"
+      id="errors"
+      class="alert alert-danger flashbag"
+    >
+      <p>{{ $t('fix_these_errors') }}</p>
+      <ul>
+        <li
+          v-for="e in errors"
+          :key="e.id"
+        >
+          {{ e }}
+        </li>
+      </ul>
+    </div>
+  </div>
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+      <list-workflow-modal
+        :workflows="this.work.workflows"
+        :allow-create="true"
+        related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+        :related-entity-id="this.work.id"
+        :workflows-availables="this.work.workflows_availables"
+        :prevent-default-move-to-generate="true"
+        @go-to-generate-workflow="goToGenerateWorkflow"
+      />
+    </li>
 
-      <li>
-         <button v-if="AmIRefferer"
-             class="btn btn-notify"
-             @click="goToGenerateNotification(false)"
-         ></button>
-         <template v-else>
-            <button id="btnGroupNotifyButtons" type="button" class="btn btn-notify dropdown-toggle" :title="$t('notification_send')" data-bs-toggle="dropdown" aria-expanded="false">&nbsp;</button>
-            <ul class="dropdown-menu" aria-labelledby="btnGroupNotifyButtons">
-               <li><a class="dropdown-item" @click="goToGenerateNotification(true)">{{ $t('notification_notify_referrer') }}</a></li>
-               <li><a class="dropdown-item" @click="goToGenerateNotification(false)">{{ $t('notification_notify_any') }}</a></li>
-            </ul>
-         </template>
-      </li>
+    <li>
+      <button
+        v-if="AmIRefferer"
+        class="btn btn-notify"
+        @click="goToGenerateNotification(false)"
+      />
+      <template v-else>
+        <button
+          id="btnGroupNotifyButtons"
+          type="button"
+          class="btn btn-notify dropdown-toggle"
+          :title="$t('notification_send')"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+&nbsp;
+        </button>
+        <ul
+          class="dropdown-menu"
+          aria-labelledby="btnGroupNotifyButtons"
+        >
+          <li>
+            <a
+              class="dropdown-item"
+              @click="goToGenerateNotification(true)"
+            >{{ $t('notification_notify_referrer') }}</a>
+          </li>
+          <li>
+            <a
+              class="dropdown-item"
+              @click="goToGenerateNotification(false)"
+            >{{ $t('notification_notify_any') }}</a>
+          </li>
+        </ul>
+      </template>
+    </li>
 
-      <li v-if="!isPosting">
-         <button class="btn btn-save" @click="submit">
-            {{ $t('action.save') }}
-         </button>
-      </li>
+    <li v-if="!isPosting">
+      <button
+        class="btn btn-save"
+        @click="submit"
+      >
+        {{ $t('action.save') }}
+      </button>
+    </li>
 
-      <li v-if="isPosting">
-         <button class="btn btn-save" disabled>
-            {{ $t('action.save') }}
-         </button>
-      </li>
-
-   </ul>
+    <li v-if="isPosting">
+      <button
+        class="btn btn-save"
+        disabled
+      >
+        {{ $t('action.save') }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
index baa3fa798..151d2d312 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -1,53 +1,78 @@
 <template>
-   <div>
-      <a id="evaluations"></a>
-      <div class="item-title" :title="evaluation.id || 'no id yet'">
-         <span>{{ evaluation.evaluation.title.fr }}</span>
-      </div>
+  <div>
+    <a id="evaluations" />
+    <div
+      class="item-title"
+      :title="evaluation.id || 'no id yet'"
+    >
+      <span>{{ evaluation.evaluation.title.fr }}</span>
+    </div>
 
-      <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
-         <i class="fa fa-link fa-lg"></i>
-         <a :href="evaluation.evaluation.url" target="_blank">{{ evaluation.evaluation.url }}</a>
-      </div>
+    <div
+      class="item-url mt-3 mb-4"
+      v-if="evaluation.evaluation.url"
+    >
+      <i class="fa fa-link fa-lg" />
+      <a
+        :href="evaluation.evaluation.url"
+        target="_blank"
+      >{{ evaluation.evaluation.url }}</a>
+    </div>
 
-      <div>
-         <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation" :docAnchorId="docAnchorId"></form-evaluation>
+    <div>
+      <form-evaluation
+        ref="FormEvaluation"
+        :key="evaluation.key"
+        :evaluation="evaluation"
+        :doc-anchor-id="docAnchorId"
+      />
 
-        <ul class="record_actions">
-           <li v-if="evaluation.workflows_availables.length > 0">
+      <ul class="record_actions">
+        <li v-if="evaluation.workflows_availables.length > 0">
+          <list-workflow-modal
+            :workflows="evaluation.workflows"
+            :allow-create="true"
+            related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+            :related-entity-id="evaluation.id"
+            :workflows-availables="evaluation.workflows_availables"
+            @go-to-generate-workflow="goToGenerateWorkflow"
+          />
+        </li>
+        <li v-if="canDelete">
+          <a
+            class="btn btn-delete"
+            @click="modal.showModal = true"
+            :title="$t('action.delete')"
+          >{{ $t('delete_evaluation') }}</a>
+        </li>
+      </ul>
+    </div>
 
-              <list-workflow-modal
-                 :workflows="evaluation.workflows"
-                 :allowCreate="true"
-                 relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-                 :relatedEntityId="evaluation.id"
-                 :workflowsAvailables="evaluation.workflows_availables"
-                 @go-to-generate-workflow="goToGenerateWorkflow"
-             ></list-workflow-modal>
-
-           </li>
-            <li v-if="canDelete">
-               <a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')">{{ $t('delete_evaluation')}}</a>
-            </li>
-         </ul>
-      </div>
-
-      <teleport to="body">
-         <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
-            <template v-slot:header>
-               <h2 class="modal-title">{{ $t('delete.sure') }}</h2>
-            </template>
-            <template v-slot:body>
-               <p>{{ $t('delete.sure_description') }}</p>
-            </template>
-            <template v-slot:footer>
-               <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
-                  {{ $t('delete.ok') }}
-               </button>
-            </template>
-         </modal>
-      </teleport>
-   </div>
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">
+            {{ $t('delete.sure') }}
+          </h2>
+        </template>
+        <template #body>
+          <p>{{ $t('delete.sure_description') }}</p>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-danger"
+            @click="removeEvaluation(evaluation)"
+          >
+            {{ $t('delete.ok') }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
index 5a12820ff..2d92ccf49 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
@@ -1,62 +1,87 @@
 <template>
-   <div v-if="hasResult" class="addResult">
+  <div
+    v-if="hasResult"
+    class="addResult"
+  >
+    <p
+      v-if="pickedResults.length ===0"
+      class="chill-no-data-statement"
+    >
+      Aucun résultat associé
+    </p>
 
-      <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
-         Aucun résultat associé
-      </p>
+    <ul class="list-suggest remove-items">
+      <li
+        v-for="r in pickedResults"
+        @click="removeResult(r)"
+        :key="r.id"
+      >
+        <span>
+          {{ r.title.fr }}
+        </span>
+      </li>
+    </ul>
 
-      <ul class="list-suggest remove-items">
-         <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
-            <span>
-               {{ r.title.fr }}
-            </span>
-         </li>
-      </ul>
+    <div
+      class="accordion"
+      id="expandedSuggestions"
+    >
+      <div class="accordion-item">
+        <h2
+          class="accordion-header"
+          id="heading_expanded_suggestions"
+        >
+          <button
+            v-if="isExpanded"
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            @click="toggleSelect"
+          >
+            Masquer
+          </button>
 
-      <div class="accordion" id="expandedSuggestions">
-         <div class="accordion-item">
-            <h2 class="accordion-header" id="heading_expanded_suggestions">
-
-               <button v-if="isExpanded"
-                  class="accordion-button"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  aria-expanded="true"
-                  @click="toggleSelect">
-                  Masquer
-               </button>
-
-               <button v-else
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  aria-expanded="false"
-                  @click="toggleSelect">
-                  Résultats et orientations disponibles
-               </button>
-
-            </h2>
-            <div class="accordion-collapse" id="collapse_expanded_suggestions"
-               aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
-
-               <template v-if="isExpanded">
-                  <ul class="list-suggest add-items">
-                     <li v-for="r in availableForCheckResults" @click="addResult(r)" :key="r.id">
-                        <span>{{ r.title.fr }}</span>
-                     </li>
-                  </ul>
-               </template>
-
-            </div>
-         </div>
+          <button
+            v-else
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="false"
+            @click="toggleSelect"
+          >
+            Résultats et orientations disponibles
+          </button>
+        </h2>
+        <div
+          class="accordion-collapse"
+          id="collapse_expanded_suggestions"
+          aria-labelledby="heading_expanded_suggestions"
+          data-bs-parent="#expandedSuggestions"
+        >
+          <template v-if="isExpanded">
+            <ul class="list-suggest add-items">
+              <li
+                v-for="r in availableForCheckResults"
+                @click="addResult(r)"
+                :key="r.id"
+              >
+                <span>{{ r.title.fr }}</span>
+              </li>
+            </ul>
+          </template>
+        </div>
       </div>
-
-   </div>
-   <div v-if="!hasResult" class="noResult">
-      <div class="chill-no-data-statement">
-         {{ $t('goal_has_no_result') }}
-      </div>
-   </div>
+    </div>
+  </div>
+  <div
+    v-if="!hasResult"
+    class="noResult"
+  >
+    <div class="chill-no-data-statement">
+      {{ $t('goal_has_no_result') }}
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index 6fd5bc78f..67a1d093e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -1,10 +1,10 @@
 <template>
-<div>
-   <!--h2>
+  <div>
+    <!--h2>
       {{ $t('evaluation_title') }}
    </h2-->
 
-   <div class="m-md-3">
+    <div class="m-md-3">
       <!--div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_status') }}</label>
          <div class="col-sm-8">
@@ -18,178 +18,244 @@
       </div-->
 
       <div class="row mb-3">
-         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-            {{ $t('evaluation_startdate') }}
-         </label>
-         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="startDate"/>
-         </div>
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t('evaluation_startdate') }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="startDate"
+          >
+        </div>
 
-         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-            {{ $t('evaluation_enddate') }}
-         </label>
-         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="endDate"/>
-         </div>
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t('evaluation_enddate') }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="endDate"
+          >
+        </div>
       </div>
 
       <div class="row mb-3">
-         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-            {{ $t('evaluation_maxdate') }}
-         </label>
-         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="maxDate"/>
-         </div>
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t('evaluation_maxdate') }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="maxDate"
+          >
+        </div>
 
-         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-            {{ $t('evaluation_warning_interval') }}
-         </label>
-         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="number" v-model.number="warningInterval"/>
-         </div>
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t('evaluation_warning_interval') }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="number"
+            v-model.number="warningInterval"
+          >
+        </div>
       </div>
 
-     <div class="row mb-3">
-       <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-         {{ $t('evaluation_time_spent') }}
-       </label>
-       <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-         <select class="form-control form-control-sm" type="time" v-model="timeSpent">
-           <option disabled value="">{{ $t('select_time_spent') }}</option>
-           <option v-for="time in timeSpentChoices" :value="time.value">
-             {{ time.text }}
-           </option>
-         </select>
-       </div>
-     </div>
-
       <div class="row mb-3">
-         <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
-         <div class="col-sm-12">
-            <ckeditor
-               :editor="editor"
-               :placeholder="$t('evaluation_comment_placeholder')"
-               v-model="comment"
-               tag-name="textarea"
-            ></ckeditor>
-         </div>
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t('evaluation_time_spent') }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <select
+            class="form-control form-control-sm"
+            type="time"
+            v-model="timeSpent"
+          >
+            <option
+              disabled
+              value=""
+            >
+              {{ $t('select_time_spent') }}
+            </option>
+            <option
+              v-for="time in timeSpentChoices"
+              :value="time.value"
+            >
+              {{ time.text }}
+            </option>
+          </select>
+        </div>
       </div>
 
-     <div v-if="evaluation.documents.length > 0" class="row mb-3">
-       <h5>{{ $t('Documents') }} :</h5>
+      <div class="row mb-3">
+        <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
+        <div class="col-sm-12">
+          <ckeditor
+            :editor="editor"
+            :placeholder="$t('evaluation_comment_placeholder')"
+            v-model="comment"
+            tag-name="textarea"
+          />
+        </div>
+      </div>
 
-       <div class="flex-table">
-         <div class="item-bloc" v-for="(d, i) in evaluation.documents" :key="d.id" :class="[parseInt(this.docAnchorId) === d.id ? 'bg-blink' : 'nothing']">
-           <div :id="`document_${d.id}`" class="item-row">
-            <div class="input-group input-group-lg mb-3 row">
-                  <label class="col-sm-3 col-form-label">Titre du document:</label>
-                  <div class="col-sm-9">
-                    <input
-                        class="form-control document-title"
-                        type="text"
-                        :value="d.title"
-                        :id="d.id"
-                        :data-key="i"
-                        @input="onInputDocumentTitle"/>
+      <div
+        v-if="evaluation.documents.length > 0"
+        class="row mb-3"
+      >
+        <h5>{{ $t('Documents') }} :</h5>
+
+        <div class="flex-table">
+          <div
+            class="item-bloc"
+            v-for="(d, i) in evaluation.documents"
+            :key="d.id"
+            :class="[parseInt(this.docAnchorId) === d.id ? 'bg-blink' : 'nothing']"
+          >
+            <div
+              :id="`document_${d.id}`"
+              class="item-row"
+            >
+              <div class="input-group input-group-lg mb-3 row">
+                <label class="col-sm-3 col-form-label">Titre du document:</label>
+                <div class="col-sm-9">
+                  <input
+                    class="form-control document-title"
+                    type="text"
+                    :value="d.title"
+                    :id="d.id"
+                    :data-key="i"
+                    @input="onInputDocumentTitle"
+                  >
                 </div>
-           </div>
-           </div>
-           <div class="item-row">
-               <div class="item-col item-meta">
-                  <p v-if="d.createdBy" class="createdBy">Créé par {{ d.createdBy.text }}<br/>
-                  Le {{ $d(ISOToDatetime(d.createdAt.datetime), 'long') }}</p>
-               </div>
+              </div>
             </div>
             <div class="item-row">
-               <div class="item-col">
-                 <ul class="record_actions">
-                    <li v-if="d.workflows_availables.length > 0">
-                       <list-workflow-modal
-                          :workflows="d.workflows"
-                          :allowCreate="true"
-                          relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
-                          :relatedEntityId="d.id"
-                          :workflowsAvailables="d.workflows_availables"
-                          :preventDefaultMoveToGenerate="true"
-                          :goToGenerateWorkflowPayload="{doc: d}"
-                          @go-to-generate-workflow="goToGenerateWorkflowEvaluationDocument"
-                       ></list-workflow-modal>
-                    </li>
-                   <li>
+              <div class="item-col item-meta">
+                <p
+                  v-if="d.createdBy"
+                  class="createdBy"
+                >
+                  Créé par {{ d.createdBy.text }}<br>
+                  Le {{ $d(ISOToDatetime(d.createdAt.datetime), 'long') }}
+                </p>
+              </div>
+            </div>
+            <div class="item-row">
+              <div class="item-col">
+                <ul class="record_actions">
+                  <li v-if="d.workflows_availables.length > 0">
+                    <list-workflow-modal
+                      :workflows="d.workflows"
+                      :allow-create="true"
+                      related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
+                      :related-entity-id="d.id"
+                      :workflows-availables="d.workflows_availables"
+                      :prevent-default-move-to-generate="true"
+                      :go-to-generate-workflow-payload="{doc: d}"
+                      @go-to-generate-workflow="goToGenerateWorkflowEvaluationDocument"
+                    />
+                  </li>
+                  <li>
+                    <button
+                      v-if="AmIRefferer"
+                      class="btn btn-notify"
+                      @click="goToGenerateDocumentNotification(d, false)"
+                    />
+                    <template v-else>
                       <button
-                         v-if="AmIRefferer"
-                         class="btn btn-notify"
-                         @click="goToGenerateDocumentNotification(d, false)">
+                        id="btnGroupNotifyButtons"
+                        type="button"
+                        class="btn btn-notify dropdown-toggle"
+                        :title="$t('notification_send')"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+&nbsp;
                       </button>
-                      <template v-else>
-                         <button id="btnGroupNotifyButtons" type="button" class="btn btn-notify dropdown-toggle" :title="$t('notification_send')" data-bs-toggle="dropdown" aria-expanded="false">&nbsp;</button>
-                         <ul class="dropdown-menu" aria-labelledby="btnGroupNotifyButtons">
-                            <li><a class="dropdown-item" @click="goToGenerateDocumentNotification(d, true)">{{ $t('notification_notify_referrer') }}</a></li>
-                            <li><a class="dropdown-item" @click="goToGenerateDocumentNotification(d, false)">{{ $t('notification_notify_any') }}</a></li>
-                         </ul>
-                      </template>
-                   </li>
-                   <li>
-                     <document-action-buttons-group
-                         :stored-object="d.storedObject"
-                         :filename="d.title"
-                         :can-edit="true"
-                         :execute-before-leave="submitBeforeLeaveToEditor"
-                         :davLink="d.storedObject._links?.dav_link.href"
-                         :davLinkExpiration="d.storedObject._links?.dav_link.expiration"
-                         @on-stored-object-status-change="onStatusDocumentChanged"
-                     ></document-action-buttons-group>
-                   </li>
-                    <li>
-                       <add-async-upload
-                          :buttonTitle="$t('replace')"
-                          :options="asyncUploadOptions"
-                          :btnClasses="{'btn': true, 'btn-edit': true}"
-                          @addDocument="(arg) => replaceDocument(d, arg)"
-                       >
-                       </add-async-upload>
-                    </li>
-                   <li v-if="d.workflows.length === 0">
-                     <a class="btn btn-delete" @click="removeDocument(d)">
-                     </a>
-                   </li>
-                 </ul>
-               </div>
-           </div>
-         </div>
-       </div>
-     </div>
-
-     <div class="row mb-3">
-      <h6>{{ $t('document_add') }} :</h6>
-       <pick-template
-           entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-           :id="evaluation.id"
-           :templates="getTemplatesAvailables"
-           :preventDefaultMoveToGenerate="true"
-           @go-to-generate-document="submitBeforeGenerate"
-       >
-         <template v-slot:title>
-           <label class="col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
-         </template>
-       </pick-template>
-      <div>
-         <label class="col-form-label">{{ $t('document_upload') }}</label>
-         <ul class="record_actions document-upload">
-            <li>
-               <add-async-upload
-                  :buttonTitle="$t('browse')"
-                  :options="asyncUploadOptions"
-                  @addDocument="addDocument"
-               >
-               </add-async-upload>
-            </li>
-         </ul>
+                      <ul
+                        class="dropdown-menu"
+                        aria-labelledby="btnGroupNotifyButtons"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            @click="goToGenerateDocumentNotification(d, true)"
+                          >{{ $t('notification_notify_referrer') }}</a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            @click="goToGenerateDocumentNotification(d, false)"
+                          >{{ $t('notification_notify_any') }}</a>
+                        </li>
+                      </ul>
+                    </template>
+                  </li>
+                  <li>
+                    <document-action-buttons-group
+                      :stored-object="d.storedObject"
+                      :filename="d.title"
+                      :can-edit="true"
+                      :execute-before-leave="submitBeforeLeaveToEditor"
+                      :dav-link="d.storedObject._links?.dav_link.href"
+                      :dav-link-expiration="d.storedObject._links?.dav_link.expiration"
+                      @on-stored-object-status-change="onStatusDocumentChanged"
+                    />
+                  </li>
+                  <li>
+                    <add-async-upload
+                      :button-title="$t('replace')"
+                      :options="asyncUploadOptions"
+                      :btn-classes="{'btn': true, 'btn-edit': true}"
+                      @add-document="(arg) => replaceDocument(d, arg)"
+                    />
+                  </li>
+                  <li v-if="d.workflows.length === 0">
+                    <a
+                      class="btn btn-delete"
+                      @click="removeDocument(d)"
+                    />
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
-     </div>
-   </div>
-</div>
+      <div class="row mb-3">
+        <h6>{{ $t('document_add') }} :</h6>
+        <pick-template
+          entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+          :id="evaluation.id"
+          :templates="getTemplatesAvailables"
+          :prevent-default-move-to-generate="true"
+          @go-to-generate-document="submitBeforeGenerate"
+        >
+          <template #title>
+            <label class="col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
+          </template>
+        </pick-template>
+        <div>
+          <label class="col-form-label">{{ $t('document_upload') }}</label>
+          <ul class="record_actions document-upload">
+            <li>
+              <add-async-upload
+                :button-title="$t('browse')"
+                :options="asyncUploadOptions"
+                @add-document="addDocument"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
index 3b23ab0ad..519044fb3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
@@ -1,72 +1,80 @@
 <template>
+  <fieldset
+    class="mb-3"
+    id="actionType"
+  >
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('action.label') }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="action"
+          :options="actions.options"
+          @select="selectAction"
+          @remove="unselectAction"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('action.placeholder')"
+          :custom-label="formatSocialAction"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 
-      <fieldset class="mb-3" id="actionType">
-         <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('action.label')}}</legend>
-            <div class="col-sm-8">
+  <fieldset
+    class="mb-3"
+    id="goal"
+  >
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('goal.label') }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="goal"
+          :options="goals.options"
+          @select="selectGoal"
+          @remove="unselectGoal"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('goal.placeholder')"
+          label="title"
+          :custom-label="transTitle"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 
-               <VueMultiselect
-                  v-model="action"
-                  :options="actions.options"
-                  @select="selectAction"
-                  @remove="unselectAction"
-                  :multiple="true"
-                  :close-on-select="false"
-                  :placeholder="$t('action.placeholder')"
-                  :custom-label="formatSocialAction"
-                  track-by="id"
-                  :searchable="true"
-               ></VueMultiselect>
-
-            </div>
-         </div>
-      </fieldset>
-
-      <fieldset class="mb-3" id="goal">
-         <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('goal.label')}}</legend>
-            <div class="col-sm-8">
-
-               <VueMultiselect
-                  v-model="goal"
-                  :options="goals.options"
-                  @select="selectGoal"
-                  @remove="unselectGoal"
-                  :multiple="true"
-                  :close-on-select="false"
-                  :placeholder="$t('goal.placeholder')"
-                  label="title"
-                  :custom-label="transTitle"
-                  track-by="id"
-                  :searchable="true"
-               ></VueMultiselect>
-
-            </div>
-         </div>
-      </fieldset>
-
-      <fieldset class="mb-3" id="result">
-         <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('result.label')}}</legend>
-            <div class="col-sm-8">
-
-               <VueMultiselect
-                  v-model="result"
-                  :options="results.options"
-                  @select="selectResult"
-                  @remove="unselectResult"
-                  :multiple="true"
-                  :close-on-select="false"
-                  :placeholder="$t('result.placeholder')"
-                  label="title"
-                  :custom-label="transTitle"
-                  track-by="id"
-                  :searchable="true"
-               ></VueMultiselect>
-
-            </div>
-         </div>
-      </fieldset>
+  <fieldset
+    class="mb-3"
+    id="result"
+  >
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('result.label') }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="result"
+          :options="results.options"
+          @select="selectResult"
+          @remove="unselectResult"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('result.placeholder')"
+          label="title"
+          :custom-label="transTitle"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
index 52047c630..798b1d061 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -1,38 +1,62 @@
 <template>
   <ol class="breadcrumb">
     <li
-        v-for="s in steps"
-        :key="s"
-        class="breadcrumb-item" :class="{ active: step === s }"
+      v-for="s in steps"
+      :key="s"
+      class="breadcrumb-item"
+      :class="{ active: step === s }"
     >
-        {{ $t('household_members_editor.app.steps.'+s) }}
+      {{ $t('household_members_editor.app.steps.'+s) }}
     </li>
   </ol>
-  <concerned v-if="step === 'concerned'"></concerned>
-  <household v-if="step === 'household'" @ready-to-go="goToNext"></household>
-  <household-address v-if="step === 'household_address'"></household-address>
-  <positioning v-if="step === 'positioning'"></positioning>
-  <dates v-if="step === 'confirm'"></dates>
-  <confirmation v-if="step === 'confirm'"></confirmation>
+  <concerned v-if="step === 'concerned'" />
+  <household
+    v-if="step === 'household'"
+    @ready-to-go="goToNext"
+  />
+  <household-address v-if="step === 'household_address'" />
+  <positioning v-if="step === 'positioning'" />
+  <dates v-if="step === 'confirm'" />
+  <confirmation v-if="step === 'confirm'" />
 
   <ul class="record_actions sticky-form-buttons">
-    <li class="cancel" v-if="step !== 'concerned'">
-      <button class="btn btn-cancel" @click="goToPrevious">
+    <li
+      class="cancel"
+      v-if="step !== 'concerned'"
+    >
+      <button
+        class="btn btn-cancel"
+        @click="goToPrevious"
+      >
         {{ $t('household_members_editor.app.previous') }}
       </button>
     </li>
-    <li class="cancel" v-else-if="hasReturnPath">
-      <button class="btn btn-cancel" @click="goToPrevious">
+    <li
+      class="cancel"
+      v-else-if="hasReturnPath"
+    >
+      <button
+        class="btn btn-cancel"
+        @click="goToPrevious"
+      >
         {{ $t('household_members_editor.app.cancel') }}
       </button>
     </li>
     <li v-if="step !== 'confirm'">
-      <button class="btn btn-action" @click="goToNext" :disabled="!isNextAllowed">
-        {{ $t('household_members_editor.app.next') }}&nbsp;<i class="fa fa-arrow-right"></i>
+      <button
+        class="btn btn-action"
+        @click="goToNext"
+        :disabled="!isNextAllowed"
+      >
+        {{ $t('household_members_editor.app.next') }}&nbsp;<i class="fa fa-arrow-right" />
       </button>
     </li>
     <li v-else>
-      <button class="btn btn-save" @click="confirm" :disabled="hasWarnings || !lastStepIsSaveAllowed">
+      <button
+        class="btn btn-save"
+        @click="confirm"
+        :disabled="hasWarnings || !lastStepIsSaveAllowed"
+      >
         {{ $t('household_members_editor.app.save') }}
       </button>
     </li>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
index 62d9090f7..c1d97f089 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
@@ -1,5 +1,7 @@
 <template>
-  <h2 class="mt-4">{{ $t('household_members_editor.concerned.title') }}</h2>
+  <h2 class="mt-4">
+    {{ $t('household_members_editor.concerned.title') }}
+  </h2>
 
   <div v-if="noPerson">
     <div class="alert alert-info">
@@ -10,33 +12,47 @@
     <p>{{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:</p>
 
     <ul class="list-suggest remove-items inline">
-      <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
-        <span><person-text :person="c.person"></person-text></span>
+      <li
+        v-for="c in concerned"
+        :key="c.person.id"
+        @click="removeConcerned(c)"
+      >
+        <span><person-text :person="c.person" /></span>
       </li>
     </ul>
 
-    <div class="alert alert-info" v-if="concernedPersonsWithHouseholds.length > 0">
+    <div
+      class="alert alert-info"
+      v-if="concernedPersonsWithHouseholds.length > 0"
+    >
       <p>{{ $t('household_members_editor.concerned.persons_with_household') }}</p>
-      <ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
+      <ul
+        v-for="c in concernedPersonsWithHouseholds"
+        :key="c.person.id"
+      >
         <li>
           {{ c.person.text }}
           {{ $t('household_members_editor.concerned.already_belongs_to_household') }}
-          <a target="_blank" :href="this.makeHouseholdLink(c.person.current_household_id)">{{c.person.current_household_id}}</a>.
+          <a
+            target="_blank"
+            :href="this.makeHouseholdLink(c.person.current_household_id)"
+          >{{ c.person.current_household_id }}</a>.
         </li>
       </ul>
     </div>
-
   </div>
 
   <ul class="record_actions">
     <li class="add-persons">
       <add-persons
-          buttonTitle="household_members_editor.concerned.add_persons"
-          modalTitle="household_members_editor.concerned.search"
-          v-bind:key="addPersons.key"
-          v-bind:options="addPersons.options"
-          @addNewPersons="addNewPersons"
-          ref="addPersons"> <!-- to cast child method -->
+        button-title="household_members_editor.concerned.add_persons"
+        modal-title="household_members_editor.concerned.search"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="addNewPersons"
+        ref="addPersons"
+      >
+        <!-- to cast child method -->
       </add-persons>
     </li>
   </ul>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
index 9e52599a4..5826e3a24 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="hasWarning" class="alert alert-warning">
+  <div
+    v-if="hasWarning"
+    class="alert alert-warning"
+  >
     {{ $t('household_members_editor.confirmation.there_are_warnings') }}
   </div>
 
@@ -8,10 +11,18 @@
   </p>
 
   <ul>
-    <li v-for="(msg, i) in warnings" class="warning" :key="i">
+    <li
+      v-for="(msg, i) in warnings"
+      class="warning"
+      :key="i"
+    >
       {{ $t(msg.m, msg.a) }}
     </li>
-    <li v-for="(msg, i) in errors" class="error" :key="i">
+    <li
+      v-for="(msg, i) in errors"
+      class="error"
+      :key="i"
+    >
       {{ msg }}
     </li>
   </ul>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
index 15b8a4346..83578b937 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
@@ -1,25 +1,31 @@
 <template>
-  <div class="flex-table mb-5" v-if="hasHousehold">
+  <div
+    class="flex-table mb-5"
+    v-if="hasHousehold"
+  >
     <div class="item-bloc">
-      <household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
+      <household-render-box :household="fakeHouseholdWithConcerned" />
     </div>
   </div>
-  <div class="flex-table" v-if="isModeLeave">
+  <div
+    class="flex-table"
+    v-if="isModeLeave"
+  >
     <div class="item-bloc">
       <section>
         <div class="item-row">
           <div class="item-col">
             <div class="h4">
-                  <span class="fa-stack fa-lg">
-                     <i class="fa fa-home fa-stack-1x"></i>
-                     <i class="fa fa-ban fa-stack-2x text-danger"></i>
-                  </span>
+              <span class="fa-stack fa-lg">
+                <i class="fa fa-home fa-stack-1x" />
+                <i class="fa fa-ban fa-stack-2x text-danger" />
+              </span>
               {{ $t('household_members_editor.household.leave_without_household') }}
             </div>
           </div>
         </div>
         <div class="item-row">
-          {{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
+          {{ $t('household_members_editor.household.will_leave_any_household_explanation') }}
         </div>
       </section>
     </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
index 03feb0329..83c27710f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
@@ -1,15 +1,21 @@
 <template>
-
-  <current-household></current-household>
+  <current-household />
 
   <h2>{{ $t('household_members_editor.dates.dates_title') }}</h2>
 
   <div class="mb-3 row">
-    <label for="start_date" class="col-form-label col-sm-4 required">
+    <label
+      for="start_date"
+      class="col-form-label col-sm-4 required"
+    >
       {{ $t('household_members_editor.dates.start_date') }}
     </label>
     <div class="col-sm-8">
-      <input type="date" v-model="startDate" class="form-control" />
+      <input
+        type="date"
+        v-model="startDate"
+        class="form-control"
+      >
     </div>
   </div>
 
@@ -18,15 +24,30 @@
     <div class="mb-3 row">
       <label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.household_composition') }}</label>
       <div class="col-sm-8">
-        <select v-model="householdCompositionType" class="form-select form-control">
-          <option v-for="t in householdCompositionTypes" :key="t.id" :value="t.id">{{ t.label.fr }}</option>
+        <select
+          v-model="householdCompositionType"
+          class="form-select form-control"
+        >
+          <option
+            v-for="t in householdCompositionTypes"
+            :key="t.id"
+            :value="t.id"
+          >
+            {{ t.label.fr }}
+          </option>
         </select>
       </div>
     </div>
     <div class="mb-3 row">
       <label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.number_of_children') }}</label>
       <div class="col-sm-8">
-        <input type="number" v-model="numberOfChildren" min="0" max="30" class="form-control"/>
+        <input
+          type="number"
+          v-model="numberOfChildren"
+          min="0"
+          max="30"
+          class="form-control"
+        >
       </div>
     </div>
   </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index c9b1b8f8a..078fa5106 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -1,49 +1,77 @@
 <template>
+  <h2 class="mt-4">
+    {{ $t('household_members_editor.household_part') }}
+  </h2>
 
-  <h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
-
-  <div class="alert alert-info" v-if="!hasHousehold">
+  <div
+    class="alert alert-info"
+    v-if="!hasHousehold"
+  >
     {{ $t('household_members_editor.household.no_household_choose_one') }}
   </div>
   <template v-else>
-    <current-household></current-household>
+    <current-household />
   </template>
 
-  <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
+  <div
+    v-if="hasHouseholdSuggestion"
+    class="householdSuggestions my-5"
+  >
     <h4 class="mb-3">
       {{ $t('household_members_editor.household.household_suggested') }}
     </h4>
     <p>{{ $t('household_members_editor.household.household_suggested_explanation') }}</p>
-    <div class="accordion" id="householdSuggestions">
+    <div
+      class="accordion"
+      id="householdSuggestions"
+    >
       <div class="accordion-item">
-        <h2 class="accordion-header" id="heading_household_suggestions">
-          <button v-if="!showHouseholdSuggestion"
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  aria-expanded="false"
-                  @click="toggleHouseholdSuggestion">
+        <h2
+          class="accordion-header"
+          id="heading_household_suggestions"
+        >
+          <button
+            v-if="!showHouseholdSuggestion"
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="false"
+            @click="toggleHouseholdSuggestion"
+          >
             {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
           </button>
-          <button v-if="showHouseholdSuggestion"
-                  class="accordion-button"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  aria-expanded="true"
-                  @click="toggleHouseholdSuggestion">
+          <button
+            v-if="showHouseholdSuggestion"
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            @click="toggleHouseholdSuggestion"
+          >
             {{ $t('household_members_editor.hide_household_suggestion') }}
           </button>
           <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
         </h2>
-        <div class="accordion-collapse" id="collapse_household_suggestions"
-             aria-labelledby="heading_household_suggestions" data-bs-parent="#householdSuggestions">
+        <div
+          class="accordion-collapse"
+          id="collapse_household_suggestions"
+          aria-labelledby="heading_household_suggestions"
+          data-bs-parent="#householdSuggestions"
+        >
           <div v-if="showHouseholdSuggestion">
             <div class="flex-table householdSuggestionList">
-              <div v-for="(s, i) in getSuggestions" class="item-bloc" :key="`householdSuggestions-${i}`">
-                <household-render-box :household="s.household"></household-render-box>
+              <div
+                v-for="(s, i) in getSuggestions"
+                class="item-bloc"
+                :key="`householdSuggestions-${i}`"
+              >
+                <household-render-box :household="s.household" />
                 <ul class="record_actions">
                   <li>
-                    <button class="btn btn-sm btn-choose" @click="selectHousehold(s.household)">
+                    <button
+                      class="btn btn-sm btn-choose"
+                      @click="selectHousehold(s.household)"
+                    >
                       {{ $t('household_members_editor.select_household') }}
                     </button>
                   </li>
@@ -59,24 +87,42 @@
 
   <ul class="record_actions">
     <li v-if="hasHousehold">
-      <button @click="resetMode" class="btn btn-sm btn-misc">{{ $t('household_members_editor.household.reset_mode')}}</button>
+      <button
+        @click="resetMode"
+        class="btn btn-sm btn-misc"
+      >
+        {{ $t('household_members_editor.household.reset_mode') }}
+      </button>
     </li>
-    <li v-if="!hasHousehold" class="add-persons">
+    <li
+      v-if="!hasHousehold"
+      class="add-persons"
+    >
       <add-persons
-          modalTitle="Chercher un ménage existant"
-          buttonTitle="Chercher un ménage existant"
-          v-bind:key="addPersons.key"
-          v-bind:options="addPersons.options"
-          @addNewPersons="pickHouseholdFound"
-          ref="pickHousehold"> <!-- to cast child method -->
+        modal-title="Chercher un ménage existant"
+        button-title="Chercher un ménage existant"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="pickHouseholdFound"
+        ref="pickHousehold"
+      >
+        <!-- to cast child method -->
       </add-persons>
     </li>
     <li v-if="!hasHousehold">
-      <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
+      <button
+        @click="setModeNew"
+        class="btn btn-sm btn-create"
+      >
+        {{ $t('household_members_editor.household.create_household') }}
+      </button>
     </li>
     <li v-if="isModeLeaveAllowed && !hasHousehold">
-      <button @click="setModeLeave" class="btn btn-sm btn-misc">
-        <i class="fa fa-sign-out"></i>
+      <button
+        @click="setModeLeave"
+        class="btn btn-sm btn-misc"
+      >
+        <i class="fa fa-sign-out" />
         {{ $t('household_members_editor.household.leave') }}
       </button>
     </li>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
index 46026a33d..bb0b5eb58 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
@@ -1,5 +1,5 @@
 <template>
-  <current-household></current-household>
+  <current-household />
 
   <ul class="record_actions">
     <!-- <li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
@@ -9,20 +9,21 @@
     </li> -->
     <li v-if="!hasHouseholdAddress">
       <add-address
-          :context="getAddressContext"
-          :key="addAddress.key"
-          :options="addAddress.options"
-          :addressChangedCallback="addressChanged"
-      ></add-address>
+        :context="getAddressContext"
+        :key="addAddress.key"
+        :options="addAddress.options"
+        :address-changed-callback="addressChanged"
+      />
     </li>
     <li v-if="hasHouseholdAddress">
-      <button class="btn btn-remove"
-              @click="removeHouseholdAddress">
+      <button
+        class="btn btn-remove"
+        @click="removeHouseholdAddress"
+      >
         {{ $t('household_members_editor.household_address.remove_address') }}
       </button>
     </li>
   </ul>
-
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
index fd2ef7bdb..0f281b078 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
@@ -3,17 +3,26 @@
     <div class="item-row">
       <div class="item-col">
         <div>
-          <person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
-          <span v-if="isHolder" class="badge bg-primary holder">
+          <person-render-box
+            render="badge"
+            :options="{}"
+            :person="conc.person"
+          />
+          <span
+            v-if="isHolder"
+            class="badge bg-primary holder"
+          >
             {{ $t('household_members_editor.holder') }}
           </span>
         </div>
-        <div v-if="conc.person.birthdate !== null">{{ $t('person.born', {'gender': conc.person.gender.genderTranslation} ) }}</div>
+        <div v-if="conc.person.birthdate !== null">
+          {{ $t('person.born', {'gender': conc.person.gender.genderTranslation} ) }}
+        </div>
       </div>
       <div class="item-col">
         <ul class="list-content fa-ul">
           <li>
-            <i class="fa fa-li fa-map-marker"></i>
+            <i class="fa fa-li fa-map-marker" />
             <span class="chill-no-data-statement">Sans adresse</span>
           </li>
         </ul>
@@ -21,24 +30,42 @@
     </div>
 
     <div class="item-row comment">
-      <ckeditor :editor="editor" v-model="comment" tag-name="textarea"></ckeditor>
+      <ckeditor
+        :editor="editor"
+        v-model="comment"
+        tag-name="textarea"
+      />
     </div>
 
     <div class="item-row participation-details">
-      <div v-if="conc.position.allowHolder" class="action">
-        <button class="btn" :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}" @click="toggleHolder">
-           {{ $t(isHolder ? 'household_members_editor.is_holder' : 'household_members_editor.is_not_holder') }}
+      <div
+        v-if="conc.position.allowHolder"
+        class="action"
+      >
+        <button
+          class="btn"
+          :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}"
+          @click="toggleHolder"
+        >
+          {{ $t(isHolder ? 'household_members_editor.is_holder' : 'household_members_editor.is_not_holder') }}
         </button>
       </div>
 
       <div>
-        <button @click="removePosition" class="btn btn-outline-primary">
+        <button
+          @click="removePosition"
+          class="btn btn-outline-primary"
+        >
           {{ $t('household_members_editor.remove_position', {position: conc.position.label.fr}) }}
         </button>
       </div>
 
       <div>
-        <button v-if="conc.allowRemove" @click="removeConcerned" class="btn btn-primary">
+        <button
+          v-if="conc.allowRemove"
+          @click="removeConcerned"
+          class="btn btn-primary"
+        >
           {{ $t('household_members_editor.remove_concerned') }}
         </button>
       </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
index f29cb1d4b..b13539526 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
@@ -1,11 +1,11 @@
 <template>
   <ckeditor
-      name="content"
-      v-bind:placeholder="$t('household_members_editor.positioning.comment_placeholder')"
-      :editor="editor"
-      v-model="content"
-      tag-name="textarea">
-  </ckeditor>
+    name="content"
+    :placeholder="$t('household_members_editor.positioning.comment_placeholder')"
+    :editor="editor"
+    v-model="content"
+    tag-name="textarea"
+  />
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
index 005d46122..a08f84e0b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -1,51 +1,51 @@
 <template>
-  <current-household></current-household>
+  <current-household />
 
-    <h2>{{ $t('household_members_editor.positioning.persons_to_positionnate')}}</h2>
+  <h2>{{ $t('household_members_editor.positioning.persons_to_positionnate') }}</h2>
 
-    <div class="list-household-members flex-table">
-      <div
-          v-for="conc in concerned"
-          class="item-bloc"
-          v-bind:key="conc.person.id"
-      >
-          <div class="pick-position item-row">
-            <div class="person">
-              <!-- <h3>{{ conc.person.text }}</h3> -->
-              <h3><person-text :person="conc.person"></person-text></h3>
-            </div>
-            <div class="holder">
-              <button
-                class="btn"
-                :disabled="!allowHolderForConcerned(conc)"
-                :class="{'btn-outline-chill-green': !conc.holder, 'btn-chill-green': conc.holder }"
-                @click="toggleHolder(conc)"
-              >
-                {{ $t('household_members_editor.positioning.holder') }}
-              </button>
-            </div>
-            <div
-                v-for="(position, i) in positions"
-                :key="`position-${i}`"
-                class="position"
-            >
-              <button
-                  class="btn"
-                  :class="{ 'btn-primary': conc.position === position, 'btn-outline-primary': conc.position !== position }"
-                  @click="moveToPosition(conc.person.id, position.id)"
-              >
-                {{ position.label.fr }}
-              </button>
-            </div>
-          </div>
-          <div class="item-row">
-            <div>
-              <h6>{{ $t('household_members_editor.positioning.comment') }}</h6>
-              <person-comment :conc="conc"></person-comment>
-            </div>
-          </div>
+  <div class="list-household-members flex-table">
+    <div
+      v-for="conc in concerned"
+      class="item-bloc"
+      :key="conc.person.id"
+    >
+      <div class="pick-position item-row">
+        <div class="person">
+          <!-- <h3>{{ conc.person.text }}</h3> -->
+          <h3><person-text :person="conc.person" /></h3>
+        </div>
+        <div class="holder">
+          <button
+            class="btn"
+            :disabled="!allowHolderForConcerned(conc)"
+            :class="{'btn-outline-chill-green': !conc.holder, 'btn-chill-green': conc.holder }"
+            @click="toggleHolder(conc)"
+          >
+            {{ $t('household_members_editor.positioning.holder') }}
+          </button>
+        </div>
+        <div
+          v-for="(position, i) in positions"
+          :key="`position-${i}`"
+          class="position"
+        >
+          <button
+            class="btn"
+            :class="{ 'btn-primary': conc.position === position, 'btn-outline-primary': conc.position !== position }"
+            @click="moveToPosition(conc.person.id, position.id)"
+          >
+            {{ position.label.fr }}
+          </button>
+        </div>
+      </div>
+      <div class="item-row">
+        <div>
+          <h6>{{ $t('household_members_editor.positioning.comment') }}</h6>
+          <person-comment :conc="conc" />
+        </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index da597e522..761ee0416 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,127 +1,166 @@
 <template>
+  <div id="visgraph" />
 
-   <div id="visgraph"></div>
-
-   <teleport to="#visgraph-legend">
-      <div class="post-menu">
-         <div class="list-group mt-4">
-            <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="createRelationship">
-               <i class="fa fa-plus"></i> {{ $t('visgraph.add_link') }}
-            </button>
-            <a type="button" class="list-group-item list-group-item-action btn btn-misc" id="exportCanvasBtn" @click="exportCanvasAsImage">
-               <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
-            </a>
-         </div>
-
-         <div v-if="displayHelpMessage" class="alert alert-info mt-3">
-            {{ $t('visgraph.create_link_help') }}
-         </div>
-
-         <div class="my-4 legend">
-            <h3>{{ $t('visgraph.Legend') }}</h3>
-            <div class="list-group">
-               <label class="list-group-item" v-for="(layer, i) in legendLayers" :key="`layer-${i}`">
-                  <input
-                     class="form-check-input me-1"
-                     type="checkbox"
-                     :value="layer.id"
-                     v-model="checkedLayers"
-                     @change="toggleLayer"
-                     />
-                     {{ layer.label }}
-               </label>
-            </div>
-         </div>
+  <teleport to="#visgraph-legend">
+    <div class="post-menu">
+      <div class="list-group mt-4">
+        <button
+          type="button"
+          class="list-group-item list-group-item-action btn btn-misc"
+          @click="createRelationship"
+        >
+          <i class="fa fa-plus" /> {{ $t('visgraph.add_link') }}
+        </button>
+        <a
+          type="button"
+          class="list-group-item list-group-item-action btn btn-misc"
+          id="exportCanvasBtn"
+          @click="exportCanvasAsImage"
+        >
+          <i class="fa fa-camera fa-fw" /> {{ $t('visgraph.screenshot') }}
+        </a>
       </div>
-   </teleport>
 
-   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
-         <template v-slot:header>
-            <h2 class="modal-title">{{ $t(modal.title) }}</h2>
-            <!-- {{ modal.data.id }} -->
-         </template>
-         <template v-slot:body>
-            <div v-if="modal.action === 'delete'">
-               <p>{{ $t('visgraph.delete_confirmation_text') }}</p>
+      <div
+        v-if="displayHelpMessage"
+        class="alert alert-info mt-3"
+      >
+        {{ $t('visgraph.create_link_help') }}
+      </div>
+
+      <div class="my-4 legend">
+        <h3>{{ $t('visgraph.Legend') }}</h3>
+        <div class="list-group">
+          <label
+            class="list-group-item"
+            v-for="(layer, i) in legendLayers"
+            :key="`layer-${i}`"
+          >
+            <input
+              class="form-check-input me-1"
+              type="checkbox"
+              :value="layer.id"
+              v-model="checkedLayers"
+              @change="toggleLayer"
+            >
+            {{ layer.label }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </teleport>
+
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(modal.title) }}
+        </h2>
+        <!-- {{ modal.data.id }} -->
+      </template>
+      <template #body>
+        <div v-if="modal.action === 'delete'">
+          <p>{{ $t('visgraph.delete_confirmation_text') }}</p>
+        </div>
+        <div v-else>
+          <form>
+            <div class="row">
+              <div class="col-12 text-center">
+                {{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}
+              </div>
+              <div class="col">
+                <small>{{ getPersonAge(modal.data.from) }}</small>
+                <h4>{{ getPerson(modal.data.from).text }}</h4>
+                <p
+                  class="text-start"
+                  v-if="relation && relation.title"
+                >
+                  <span v-if="reverse">
+                    {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ]) }}
+                  </span>
+                  <span v-else>
+                    {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ]) }}
+                  </span>
+                </p>
+              </div>
+              <div class="col text-end">
+                <small>{{ getPersonAge(modal.data.to) }}</small>
+                <h4>{{ getPerson(modal.data.to).text }}</h4>
+                <p
+                  class="text-end"
+                  v-if="relation && relation.title"
+                >
+                  <span v-if="reverse">
+                    {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ]) }}
+                  </span>
+                  <span v-else>
+                    {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ]) }}
+                  </span>
+                </p>
+              </div>
             </div>
-            <div v-else>
-               <form>
-                  <div class="row">
-                     <div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
-                     <div class="col">
-                        <small>{{ getPersonAge(modal.data.from) }}</small>
-                        <h4>{{ getPerson(modal.data.from).text }}</h4>
-                        <p class="text-start" v-if="relation && relation.title">
-                           <span v-if="reverse">
-                              {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
-                           </span>
-                           <span v-else>
-                              {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}
-                           </span>
-                        </p>
-                     </div>
-                     <div class="col text-end">
-                        <small>{{ getPersonAge(modal.data.to) }}</small>
-                        <h4>{{ getPerson(modal.data.to).text }}</h4>
-                        <p class="text-end" v-if="relation && relation.title">
-                           <span v-if="reverse">
-                              {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}
-                           </span>
-                           <span v-else>
-                              {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
-                           </span>
-                        </p>
-                     </div>
-                  </div>
-                  <div class="my-3">
-                     <VueMultiselect
-                        id="relation"
-                        label="title"
-                        track-by="id"
-                        :custom-label="customLabel"
-                        :placeholder="$t('visgraph.choose_relation')"
-                        :close-on-select="true"
-                        :multiple="false"
-                        :searchable="true"
-                        :options="relations"
-                        v-model="relation"
-                        :value="relation"
-                        >
-                     </VueMultiselect>
-                  </div>
-                  <div class="form-check form-switch">
-                     <input
-                        class="form-check-input"
-                        type="checkbox"
-                        id="reverse"
-                        v-model="reverse"
-                        >
-                     <label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
-                  </div>
-               </form>
+            <div class="my-3">
+              <VueMultiselect
+                id="relation"
+                label="title"
+                track-by="id"
+                :custom-label="customLabel"
+                :placeholder="$t('visgraph.choose_relation')"
+                :close-on-select="true"
+                :multiple="false"
+                :searchable="true"
+                :options="relations"
+                v-model="relation"
+                :value="relation"
+              />
             </div>
-         </template>
-         <template v-slot:footer>
-            <button class="btn" :class="modal.button.class" @click="submitRelationship">
-               {{ $t(modal.button.text)}}
-            </button>
-            <button class="btn btn-delete" v-if="modal.action === 'edit'" @click="dropRelationship"></button>
-         </template>
-      </modal>
-   </teleport>
-   <ul class="record_actions sticky-form-buttons">
-     <li>
-       <add-persons
-           buttonTitle="visgraph.add_person"
-           modalTitle="visgraph.add_person"
-           v-bind:key="addPersons.key"
-           v-bind:options="addPersons.options"
-           @addNewPersons="addNewPersons"
-           ref="addPersons">
-       </add-persons>
-     </li>
-   </ul>
+            <div class="form-check form-switch">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                id="reverse"
+                v-model="reverse"
+              >
+              <label
+                class="form-check-label"
+                for="reverse"
+              >{{ $t('visgraph.reverse_relation') }}</label>
+            </div>
+          </form>
+        </div>
+      </template>
+      <template #footer>
+        <button
+          class="btn"
+          :class="modal.button.class"
+          @click="submitRelationship"
+        >
+          {{ $t(modal.button.text) }}
+        </button>
+        <button
+          class="btn btn-delete"
+          v-if="modal.action === 'edit'"
+          @click="dropRelationship"
+        />
+      </template>
+    </modal>
+  </teleport>
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+      <add-persons
+        button-title="visgraph.add_person"
+        modal-title="visgraph.add_person"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="addNewPersons"
+        ref="addPersons"
+      />
+    </li>
+  </ul>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
index 96196f6fd..f1df3de3b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
@@ -1,7 +1,16 @@
 <template>
-<ul class="list-suggest add-items" v-if="suggested.length > 0">
-  <li v-for="(r, i) in suggested" @click="setReferrer(r)" :key="i"><span>{{ r.text }}</span></li>
-</ul>
+  <ul
+    class="list-suggest add-items"
+    v-if="suggested.length > 0"
+  >
+    <li
+      v-for="(r, i) in suggested"
+      @click="setReferrer(r)"
+      :key="i"
+    >
+      <span>{{ r.text }}</span>
+    </li>
+  </ul>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 84984fc01..395b18307 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -1,91 +1,114 @@
 <template>
-   <a class="btn" :class="getClassButton" :title="$t(buttonTitle || '')" @click="openModal">
-      <span v-if="displayTextButton">{{ $t(buttonTitle || '') }}</span>
-   </a>
+  <a
+    class="btn"
+    :class="getClassButton"
+    :title="$t(buttonTitle || '')"
+    @click="openModal"
+  >
+    <span v-if="displayTextButton">{{ $t(buttonTitle || '') }}</span>
+  </a>
 
   <teleport to="body">
-      <modal v-if="modal.showModal"
-         :modalDialogClass="modal.modalDialogClass"
-         @close="modal.showModal = false">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h3 class="modal-title">
+          {{ $t(modalTitle) }}
+        </h3>
+      </template>
 
-         <template v-slot:header>
-            <h3 class="modal-title">{{ $t(modalTitle) }}</h3>
-         </template>
+      <template #body-head>
+        <div class="modal-body">
+          <div class="search">
+            <label
+              class="col-form-label"
+              style="float: right;"
+            >
+              {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+            </label>
 
-         <template v-slot:body-head>
-            <div class="modal-body">
-               <div class="search">
+            <input
+              id="search-persons"
+              name="query"
+              v-model="query"
+              :placeholder="$t('add_persons.search_some_persons')"
+              ref="search"
+            >
+            <i class="fa fa-search fa-lg" />
+            <i
+              class="fa fa-times"
+              v-if="queryLength >= 3"
+              @click="resetSuggestion"
+            />
+          </div>
+        </div>
+        <div
+          class="modal-body"
+          v-if="checkUniq === 'checkbox'"
+        >
+          <div class="count">
+            <span>
+              <a
+                v-if="suggestedCounter > 2"
+                @click="selectAll"
+              >
+                {{ $t('action.check_all') }}
+              </a>
+              <a
+                v-if="selectedCounter > 0"
+                @click="resetSelection"
+              >
+                <i v-if="suggestedCounter > 2"> • </i>
+                {{ $t('action.reset') }}
+              </a>
+            </span>
+            <span v-if="selectedCounter > 0">
+              {{ $tc('add_persons.selected_counter', selectedCounter) }}
+            </span>
+          </div>
+        </div>
+      </template>
 
-                  <label class="col-form-label" style="float: right;">
-                     {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-                  </label>
+      <template #body>
+        <div class="results">
+          <person-suggestion
+            v-for="item in this.selectedAndSuggested.slice().reverse()"
+            :key="itemKey(item)"
+            :item="item"
+            :search="search"
+            :type="checkUniq"
+            @save-form-on-the-fly="saveFormOnTheFly"
+            @new-prior-suggestion="newPriorSuggestion"
+            @update-selected="updateSelected"
+          />
 
-                  <input id="search-persons"
-                     name="query"
-                     v-model="query"
-                     :placeholder="$t('add_persons.search_some_persons')"
-                     ref="search" />
-                  <i class="fa fa-search fa-lg"></i>
-                  <i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>
+          <div class="create-button">
+            <on-the-fly
+              v-if="queryLength >= 3 && (options.type.includes('person') || options.type.includes('thirdparty'))"
+              :button-text="$t('onthefly.create.button', {q: query})"
+              :allowed-types="options.type"
+              :query="query"
+              action="create"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </div>
+        </div>
+      </template>
 
-               </div>
-            </div>
-            <div class="modal-body" v-if="checkUniq === 'checkbox'">
-               <div class="count">
-                  <span>
-                     <a v-if="suggestedCounter > 2" @click="selectAll">
-                        {{ $t('action.check_all')}}
-                     </a>
-                     <a v-if="selectedCounter > 0" @click="resetSelection">
-                        <i v-if="suggestedCounter > 2"> • </i>
-                        {{ $t('action.reset')}}
-                     </a>
-                  </span>
-                  <span v-if="selectedCounter > 0">
-                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
-                  </span>
-               </div>
-            </div>
-         </template>
-
-         <template v-slot:body>
-            <div class="results">
-
-               <person-suggestion
-                  v-for="item in this.selectedAndSuggested.slice().reverse()"
-                  v-bind:key="itemKey(item)"
-                  v-bind:item="item"
-                  v-bind:search="search"
-                  v-bind:type="checkUniq"
-                  @saveFormOnTheFly="saveFormOnTheFly"
-                  @newPriorSuggestion="newPriorSuggestion"
-                  @updateSelected="updateSelected">
-               </person-suggestion>
-
-               <div class="create-button">
-                  <on-the-fly
-                     v-if="queryLength >= 3 && (options.type.includes('person') || options.type.includes('thirdparty'))"
-                     :buttonText="$t('onthefly.create.button', {q: query})"
-                     :allowedTypes="options.type"
-                     :query="query"
-                     action="create"
-                     @saveFormOnTheFly="saveFormOnTheFly"
-                     ref="onTheFly">
-                  </on-the-fly>
-               </div>
-
-            </div>
-         </template>
-
-         <template v-slot:footer>
-            <button class="btn btn-create"
-               @click.prevent="$emit('addNewPersons', { selected, modal })">
-               {{ $t('action.add')}}
-            </button>
-         </template>
-
-      </modal>
-   </teleport>
+      <template #footer>
+        <button
+          class="btn btn-create"
+          @click.prevent="$emit('addNewPersons', { selected, modal })"
+        >
+          {{ $t('action.add') }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
index b605cd5b5..7005ba833 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -1,39 +1,41 @@
 <template>
-   <div class="list-item" :class="{ checked: isChecked }">
+  <div
+    class="list-item"
+    :class="{ checked: isChecked }"
+  >
+    <label>
+      <div>
+        <input
+          :type="type"
+          v-model="selected"
+          name="item"
+          :id="item"
+          :value="setValueByType(item, type)"
+        >
+      </div>
 
-      <label>
-         <div>
-            <input
-               v-bind:type="type"
-               v-model="selected"
-               name="item"
-               v-bind:id="item"
-               v-bind:value="setValueByType(item, type)" />
-         </div>
+      <suggestion-person
+        v-if="item.result.type === 'person'"
+        :item="item"
+      />
 
-         <suggestion-person
-            v-if="item.result.type === 'person'"
-            v-bind:item="item">
-         </suggestion-person>
+      <suggestion-third-party
+        v-if="item.result.type === 'thirdparty'"
+        @new-prior-suggestion="newPriorSuggestion"
+        :item="item"
+      />
 
-         <suggestion-third-party
-            v-if="item.result.type === 'thirdparty'"
-            @newPriorSuggestion="newPriorSuggestion"
-            v-bind:item="item">
-         </suggestion-third-party>
+      <suggestion-user
+        v-if="item.result.type === 'user'"
+        :item="item"
+      />
 
-         <suggestion-user
-            v-if="item.result.type === 'user'"
-            v-bind:item="item">
-         </suggestion-user>
-
-         <suggestion-household
-               v-if="item.result.type === 'household'"
-               v-bind:item="item">
-         </suggestion-household>
-      </label>
-
-   </div>
+      <suggestion-household
+        v-if="item.result.type === 'household'"
+        :item="item"
+      />
+    </label>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
index 546e8cb2f..815c90ea1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
@@ -1,14 +1,17 @@
 <template>
-   <div class="container household">
-     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
-   </div>
+  <div class="container household">
+    <household-render-box
+      :household="item.result"
+      :is-address-multiline="false"
+    />
+  </div>
 
-   <div class="right_actions">
-      <badge-entity
-        :entity="item.result"
-        :options="{ displayLong: true }">
-      </badge-entity>
-   </div>
+  <div class="right_actions">
+    <badge-entity
+      :entity="item.result"
+      :options="{ displayLong: true }"
+    />
+  </div>
 </template>
 
 <script>
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 aec765c53..457719541 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -1,28 +1,34 @@
 <template>
-   <div class="container">
-      <span class="name">
-         <person-text :person="item.result"></person-text>
-      </span>
-      <span class="birthday" v-if="hasBirthdate">
-         {{ $d(item.result.birthdate.datetime, 'short') }}
-       </span>
-      <span class="location" v-if="hasAddress">
-         {{ item.result.current_household_address.text }} -
-         {{ item.result.current_household_address.postcode.name }}
-      </span>
-   </div>
+  <div class="container">
+    <span class="name">
+      <person-text :person="item.result" />
+    </span>
+    <span
+      class="birthday"
+      v-if="hasBirthdate"
+    >
+      {{ $d(item.result.birthdate.datetime, 'short') }}
+    </span>
+    <span
+      class="location"
+      v-if="hasAddress"
+    >
+      {{ item.result.current_household_address.text }} -
+      {{ item.result.current_household_address.postcode.name }}
+    </span>
+  </div>
 
-   <div class="right_actions">
-      <badge-entity
-        :entity="item.result"
-        :options="{ displayLong: true }">
-      </badge-entity>
-      <on-the-fly
-         type="person"
-         v-bind:id="item.result.id"
-         action="show">
-      </on-the-fly>
-   </div>
+  <div class="right_actions">
+    <badge-entity
+      :entity="item.result"
+      :options="{ displayLong: true }"
+    />
+    <on-the-fly
+      type="person"
+      :id="item.result.id"
+      action="show"
+    />
+  </div>
 </template>
 
 <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 7fb77226d..1f6a397e3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -1,41 +1,48 @@
 <template>
-    <div class="container tpartycontainer">
-      <div class="tparty-identification">
-        <span v-if="item.result.profession" class="profession">{{ item.result.profession }}</span>
-        <span class="name">
-          {{ item.result.text }}&nbsp;
-        </span>
-        <span class="location">
-          <template v-if="hasAddress">
-            {{ getAddress.text }} -
-            {{ getAddress.postcode.name }}
-          </template>
-        </span>
-      </div>
-      <div class="tpartyparent" v-if="hasParent">
-        <span class="name">
-          > {{ item.result.parent.text }}
-        </span>
-      </div>
+  <div class="container tpartycontainer">
+    <div class="tparty-identification">
+      <span
+        v-if="item.result.profession"
+        class="profession"
+      >{{ item.result.profession }}</span>
+      <span class="name">
+        {{ item.result.text }}&nbsp;
+      </span>
+      <span class="location">
+        <template v-if="hasAddress">
+          {{ getAddress.text }} -
+          {{ getAddress.postcode.name }}
+        </template>
+      </span>
     </div>
+    <div
+      class="tpartyparent"
+      v-if="hasParent"
+    >
+      <span class="name">
+        > {{ item.result.parent.text }}
+      </span>
+    </div>
+  </div>
 
-    <div class="right_actions">
-      <badge-entity
-        :entity="item.result"
-        :options="{ displayLong: true }">
-      </badge-entity>
-      <on-the-fly v-if="item.result.kind === 'company'"
-          v-bind:parent="item.result"
-          @saveFormOnTheFly="saveFormOnTheFly"
-          action="addContact"
-          ref="onTheFly"
-      ></on-the-fly>
-      <on-the-fly
-          type="thirdparty"
-          v-bind:id="item.result.id"
-          action="show">
-      </on-the-fly>
-    </div>
+  <div class="right_actions">
+    <badge-entity
+      :entity="item.result"
+      :options="{ displayLong: true }"
+    />
+    <on-the-fly
+      v-if="item.result.kind === 'company'"
+      :parent="item.result"
+      @save-form-on-the-fly="saveFormOnTheFly"
+      action="addContact"
+      ref="onTheFly"
+    />
+    <on-the-fly
+      type="thirdparty"
+      :id="item.result.id"
+      action="show"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue
index a549e7970..e1875a92b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue
@@ -1,15 +1,15 @@
 <template>
-    <div class="container usercontainer">
-      <div class="user-identification">
-        <user-render-box-badge :user="item.result"></user-render-box-badge>
-      </div>
-    </div>
-    <div class="right_actions">
-       <badge-entity
-          :entity="item.result"
-          :options="{ displayLong: true }">
-       </badge-entity>
+  <div class="container usercontainer">
+    <div class="user-identification">
+      <user-render-box-badge :user="item.result" />
     </div>
+  </div>
+  <div class="right_actions">
+    <badge-entity
+      :entity="item.result"
+      :options="{ displayLong: true }"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
index 163f49bcf..4e1f66295 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@@ -1,53 +1,78 @@
 <template>
-   <section class="chill-entity entity-household">
-      <div class="item-row">
-         <div class="item-col">
-
-            <!-- identifier -->
-            <div v-if="isHouseholdNew()" class="h4">
-               <i class="fa fa-home"></i>
-               {{ $t('new_household') }}
-            </div>
-            <div v-else class="h4">
-               <i class="fa fa-home"></i>
-               {{ $t('household_number', { number: household.id } ) }}
-            </div>
-
-         </div>
-         <div class="item-col">
-            <ul class="list-content">
-
-               <!-- member part -->
-               <li v-if="hasCurrentMembers" class="members" :title="$t('current_members')">
-                  <span v-for="m in currentMembers()" :key="m.id" class="m" :class="{ is_new: m.is_new === true}">
-                     <person-render-box render="badge"
-                       :person="m.person"
-                       :options="{
-                          isHolder: m.holder,
-                          addLink: true
-                       }">
-                       <template v-slot:post-badge v-if="m.is_new === true">
-                         <span class="post-badge is_new"><i class="fa fa-sign-in"></i></span>
-                       </template>
-                     </person-render-box>
-                  </span>
-               </li>
-               <li v-else class="members" :title="$t('current_members')">
-                  <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
-               </li>
-
-               <!-- address part -->
-               <li v-if="hasAddress()">
-                  <address-render-box :address="household.current_address" :isMultiline="isMultiline"></address-render-box>
-               </li>
-               <li v-else>
-                  <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
-               </li>
-
-            </ul>
-         </div>
+  <section class="chill-entity entity-household">
+    <div class="item-row">
+      <div class="item-col">
+        <!-- identifier -->
+        <div
+          v-if="isHouseholdNew()"
+          class="h4"
+        >
+          <i class="fa fa-home" />
+          {{ $t('new_household') }}
+        </div>
+        <div
+          v-else
+          class="h4"
+        >
+          <i class="fa fa-home" />
+          {{ $t('household_number', { number: household.id } ) }}
+        </div>
       </div>
-   </section>
+      <div class="item-col">
+        <ul class="list-content">
+          <!-- member part -->
+          <li
+            v-if="hasCurrentMembers"
+            class="members"
+            :title="$t('current_members')"
+          >
+            <span
+              v-for="m in currentMembers()"
+              :key="m.id"
+              class="m"
+              :class="{ is_new: m.is_new === true}"
+            >
+              <person-render-box
+                render="badge"
+                :person="m.person"
+                :options="{
+                  isHolder: m.holder,
+                  addLink: true
+                }"
+              >
+                <template
+                  #post-badge
+                  v-if="m.is_new === true"
+                >
+                  <span class="post-badge is_new"><i class="fa fa-sign-in" /></span>
+                </template>
+              </person-render-box>
+            </span>
+          </li>
+          <li
+            v-else
+            class="members"
+            :title="$t('current_members')"
+          >
+            <p class="chill-no-data-statement">
+              {{ $t('no_members_yet') }}
+            </p>
+          </li>
+
+          <!-- address part -->
+          <li v-if="hasAddress()">
+            <address-render-box
+              :address="household.current_address"
+              :is-multiline="isMultiline"
+            />
+          </li>
+          <li v-else>
+            <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 26f13d65f..2f59ae566 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,59 +1,101 @@
 <template>
-  <div v-if="render === 'bloc'" class="item-bloc">
+  <div
+    v-if="render === 'bloc'"
+    class="item-bloc"
+  >
     <section class="chill-entity entity-person">
       <div class="item-row entity-bloc">
-
         <div class="item-col">
           <div class="entity-label">
-
             <div :class="'denomination h' + options.hLevel">
-
-              <a v-if="options.addLink === true" :href="getUrl">
+              <a
+                v-if="options.addLink === true"
+                :href="getUrl"
+              >
                 <!-- use person-text here to avoid code duplication ? TODO -->
                 <span class="firstname">{{ person.firstName }}</span>
                 <span class="lastname">{{ person.lastName }}</span>
-                <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-                <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
-                            <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
-                        </span>
+                <span
+                  v-if="person.suffixText"
+                  class="suffixtext"
+                >&nbsp;{{ person.suffixText }}</span>
+                <span
+                  v-if="person.altNames && options.addAltNames == true"
+                  class="altnames"
+                >
+                  <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+                </span>
               </a>
 
               <!-- use person-text here to avoid code duplication ? TODO -->
               <span class="firstname">{{ person.firstName }}</span>
               <span class="lastname">{{ person.lastName }}</span>
-              <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-              <span v-if="person.deathdate" class="deathdate"> (‡)</span>
-              <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
-                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
-                    </span>
+              <span
+                v-if="person.suffixText"
+                class="suffixtext"
+              >&nbsp;{{ person.suffixText }}</span>
+              <span
+                v-if="person.deathdate"
+                class="deathdate"
+              > (‡)</span>
+              <span
+                v-if="person.altNames && options.addAltNames == true"
+                class="altnames"
+              >
+                <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+              </span>
 
-              <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-
-              <badge-entity v-if="options.addEntity === true"
-                            :entity="person"
-                            :options="{ displayLong: options.entityDisplayLong }">
-              </badge-entity>
+              <span
+                v-if="options.addId == true"
+                class="id-number"
+                :title="'n° ' + person.id"
+              >{{ person.id }}</span>
 
+              <badge-entity
+                v-if="options.addEntity === true"
+                :entity="person"
+                :options="{ displayLong: options.entityDisplayLong }"
+              />
             </div>
 
-            <p v-if="options.addInfo === true" class="moreinfo">
-              <gender-icon-render-box v-if="person.gender" :gender="person.gender"></gender-icon-render-box>
-              <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
+            <p
+              v-if="options.addInfo === true"
+              class="moreinfo"
+            >
+              <gender-icon-render-box
+                v-if="person.gender"
+                :gender="person.gender"
+              />
+              <time
+                v-if="person.birthdate && !person.deathdate"
+                :datetime="person.birthdate"
+                :title="birthdate"
+              >
                 {{ $t(person.gender ? `renderbox.birthday.${person.gender.genderTranslation}` : 'renderbox.birthday.neutral') + ' ' + $d(birthdate, 'text') }}
               </time>
 
-              <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
-                    :title="person.deathdate">
+              <time
+                v-else-if="person.birthdate && person.deathdate"
+                :datetime="person.deathdate"
+                :title="person.deathdate"
+              >
                 {{ $d(birthdate) }} - {{ $d(deathdate) }}
               </time>
 
-              <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
+              <time
+                v-else-if="person.deathdate"
+                :datetime="person.deathdate"
+                :title="person.deathdate"
+              >
                 {{ $t('renderbox.deathdate') + ' ' + deathdate }}
               </time>
 
-              <span v-if="options.addAge && person.birthdate" class="age">{{
-                  $tc('renderbox.years_old', person.age)
-                }}</span>
+              <span
+                v-if="options.addAge && person.birthdate"
+                class="age"
+              >{{
+                $tc('renderbox.years_old', person.age)
+              }}</span>
             </p>
           </div>
         </div>
@@ -62,118 +104,177 @@
           <div class="float-button bottom">
             <div class="box">
               <div class="action">
-                <slot name="record-actions"></slot>
+                <slot name="record-actions" />
               </div>
               <ul class="list-content fa-ul">
                 <li v-if="person.current_household_id">
-                  <i class="fa fa-li fa-map-marker"></i>
-                  <address-render-box v-if="person.current_household_address" :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
-                  <p v-else class="chill-no-data-statement">{{ $t('renderbox.household_without_address') }}</p>
-                  <a v-if="options.addHouseholdLink === true"
-                     :href="getCurrentHouseholdUrl"
-                     :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
-                       <span class="badge rounded-pill bg-chill-beige">
-                           <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
-                       </span>
+                  <i class="fa fa-li fa-map-marker" />
+                  <address-render-box
+                    v-if="person.current_household_address"
+                    :address="person.current_household_address"
+                    :is-multiline="isMultiline"
+                  />
+                  <p
+                    v-else
+                    class="chill-no-data-statement"
+                  >
+                    {{ $t('renderbox.household_without_address') }}
+                  </p>
+                  <a
+                    v-if="options.addHouseholdLink === true"
+                    :href="getCurrentHouseholdUrl"
+                    :title="$t('persons_associated.show_household_number', {id: person.current_household_id})"
+                  >
+                    <span class="badge rounded-pill bg-chill-beige">
+                      <i class="fa fa-fw fa-home" /><!--{{ $t('persons_associated.show_household') }}-->
+                    </span>
                   </a>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-map-marker"></i><p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                  <i class="fa fa-li fa-map-marker" /><p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
                 </li>
 
                 <template v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
-                   <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
-                      <i class="fa fa-li fa-map-marker"></i>
-                      <div v-if="addr.address">
-                         <span class="item-key">{{ $t('renderbox.residential_address') }}:</span>
-                         <div style="margin-top: -1em;">
-                           <address-render-box :address="addr.address" :isMultiline="isMultiline"></address-render-box>
-                         </div>
+                  <li
+                    v-for="(addr, i) in person.current_residential_addresses"
+                    :key="i"
+                  >
+                    <i class="fa fa-li fa-map-marker" />
+                    <div v-if="addr.address">
+                      <span class="item-key">{{ $t('renderbox.residential_address') }}:</span>
+                      <div style="margin-top: -1em;">
+                        <address-render-box
+                          :address="addr.address"
+                          :is-multiline="isMultiline"
+                        />
                       </div>
-                      <div v-else-if="addr.hostPerson" class="mt-3">
-                         <p>{{ $t('renderbox.located_at') }}:</p>
-                         <span class="chill-entity entity-person badge-person">
-                             <person-text v-if="addr.hostPerson" :person="addr.hostPerson"></person-text>
-                         </span>
-                         <address-render-box v-if="addr.hostPerson.address" :address="addr.hostPerson.address" :isMultiline="isMultiline"></address-render-box>
-                      </div>
-                      <div v-else-if="addr.hostThirdParty" class="mt-3">
-                         <p>{{ $t('renderbox.located_at') }}:</p>
-                         <span class="chill-entity entity-person badge-thirdparty">
-                             <third-party-text v-if="addr.hostThirdParty" :thirdparty="addr.hostThirdParty"></third-party-text>
-                         </span>
-                         <address-render-box v-if="addr.hostThirdParty.address" :address="addr.hostThirdParty.address" :isMultiline="isMultiline"></address-render-box>
-                      </div>
-                   </li>
+                    </div>
+                    <div
+                      v-else-if="addr.hostPerson"
+                      class="mt-3"
+                    >
+                      <p>{{ $t('renderbox.located_at') }}:</p>
+                      <span class="chill-entity entity-person badge-person">
+                        <person-text
+                          v-if="addr.hostPerson"
+                          :person="addr.hostPerson"
+                        />
+                      </span>
+                      <address-render-box
+                        v-if="addr.hostPerson.address"
+                        :address="addr.hostPerson.address"
+                        :is-multiline="isMultiline"
+                      />
+                    </div>
+                    <div
+                      v-else-if="addr.hostThirdParty"
+                      class="mt-3"
+                    >
+                      <p>{{ $t('renderbox.located_at') }}:</p>
+                      <span class="chill-entity entity-person badge-thirdparty">
+                        <third-party-text
+                          v-if="addr.hostThirdParty"
+                          :thirdparty="addr.hostThirdParty"
+                        />
+                      </span>
+                      <address-render-box
+                        v-if="addr.hostThirdParty.address"
+                        :address="addr.hostThirdParty.address"
+                        :is-multiline="isMultiline"
+                      />
+                    </div>
+                  </li>
                 </template>
 
                 <li v-if="person.email">
-                  <i class="fa fa-li fa-envelope-o"></i>
+                  <i class="fa fa-li fa-envelope-o" />
                   <a :href="'mailto: ' + person.email">{{ person.email }}</a>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-envelope-o"></i>
-                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                  <i class="fa fa-li fa-envelope-o" />
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
                 </li>
 
                 <li v-if="person.mobilenumber">
-                  <i class="fa fa-li fa-mobile"></i>
+                  <i class="fa fa-li fa-mobile" />
                   <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-mobile"></i>
-                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                  <i class="fa fa-li fa-mobile" />
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
                 </li>
                 <li v-if="person.phonenumber">
-                  <i class="fa fa-li fa-phone"></i>
+                  <i class="fa fa-li fa-phone" />
                   <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-phone"></i>
-                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                  <i class="fa fa-li fa-phone" />
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
                 </li>
 
                 <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
-                  <i class="fa fa-li fa-long-arrow-right"></i>
-                  <template v-for="c in person.centers">{{ c.name }}</template>
+                  <i class="fa fa-li fa-long-arrow-right" />
+                  <template v-for="c in person.centers">
+                    {{ c.name }}
+                  </template>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-long-arrow-right"></i>
-                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                  <i class="fa fa-li fa-long-arrow-right" />
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
                 </li>
-                <slot name="custom-zone"></slot>
-
+                <slot name="custom-zone" />
               </ul>
             </div>
           </div>
         </div>
-
       </div>
 
-      <slot name="end-bloc"></slot>
-
+      <slot name="end-bloc" />
     </section>
   </div>
 
-  <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
-    <a v-if="options.addLink === true" :href="getUrl">
-        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
-            <i class="fa fa-circle fa-stack-1x text-success"></i>
-            <i class="fa fa-stack-1x">T</i>
-        </span>
+  <span
+    v-if="render === 'badge'"
+    class="chill-entity entity-person badge-person"
+  >
+    <a
+      v-if="options.addLink === true"
+      :href="getUrl"
+    >
+      <span
+        v-if="options.isHolder"
+        class="fa-stack fa-holder"
+        :title="$t('renderbox.holder')"
+      >
+        <i class="fa fa-circle fa-stack-1x text-success" />
+        <i class="fa fa-stack-1x">T</i>
+      </span>
 
-        <person-text :person="person"></person-text>
+      <person-text :person="person" />
     </a>
     <span v-else>
-        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
-            <i class="fa fa-circle fa-stack-1x text-success"></i>
-            <i class="fa fa-stack-1x">T</i>
-        </span>
-        <person-text :person="person"></person-text>
+      <span
+        v-if="options.isHolder"
+        class="fa-stack fa-holder"
+        :title="$t('renderbox.holder')"
+      >
+        <i class="fa fa-circle fa-stack-1x text-success" />
+        <i class="fa fa-stack-1x">T</i>
+      </span>
+      <person-text :person="person" />
     </span>
-    <slot name="post-badge"></slot>
-</span>
-
+    <slot name="post-badge" />
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
index 8b991e3da..641876de6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
@@ -1,15 +1,27 @@
 <template>
-    <span v-if="isCut">{{ cutText }}</span>
-    <span v-else class="person-text">
-        <span class="firstname">{{ person.firstName }}</span>
-        <span class="lastname">{{ person.lastName }}</span>
-        <span v-if="person.altNames && person.altNames.length > 0" class="altnames">
-            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
-        </span>
-        <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
-        <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
+  <span v-if="isCut">{{ cutText }}</span>
+  <span
+    v-else
+    class="person-text"
+  >
+    <span class="firstname">{{ person.firstName }}</span>
+    <span class="lastname">{{ person.lastName }}</span>
+    <span
+      v-if="person.altNames && person.altNames.length > 0"
+      class="altnames"
+    >
+      <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
     </span>
+    <span
+      v-if="person.suffixText"
+      class="suffixtext"
+    >&nbsp;{{ person.suffixText }}</span>
+    <span
+      class="age"
+      v-if="this.addAge && person.birthdate !== null && person.deathdate === null"
+    >{{ $tc('renderbox.years_old', person.age) }}</span>
+    <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
+  </span>
 </template>
 
 <script>
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 c61a7002a..263d2b0a7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -1,179 +1,258 @@
 <template>
-<div v-if="action === 'show'">
-   <div class="flex-table">
-      <person-render-box render="bloc"
-         :person="person"
-         :options="{
-            addInfo: true,
-            addEntity: false,
-            addAltNames: true,
-            addAge: true,
-            addId: true,
-            addLink: false,
-            hLevel: 3,
-            addCenter: true,
-            addNoData: true,
-            isMultiline: true
-         }"
-         :show-residential-addresses="true"
-      ></person-render-box>
-   </div>
-</div>
-
-<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"
-         :placeholder="$t('person.lastname')"
-         @change="checkErrors"
+  <div v-if="action === 'show'">
+    <div class="flex-table">
+      <person-render-box
+        render="bloc"
+        :person="person"
+        :options="{
+          addInfo: true,
+          addEntity: false,
+          addAltNames: true,
+          addAge: true,
+          addId: true,
+          addLink: false,
+          hLevel: 3,
+          addCenter: true,
+          addNoData: true,
+          isMultiline: true
+        }"
+        :show-residential-addresses="true"
       />
-      <label for="lastname">{{ $t('person.lastname') }}</label>
-   </div>
-
-   <div v-if="queryItems">
-      <ul class="list-suggest add-items inline">
-         <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('lastName', qi)">
-            <span class="person-text">{{ qi }}</span>
-         </li>
-      </ul>
-   </div>
-
-   <div class="form-floating mb-3">
-      <input
-         class="form-control form-control-lg"
-         id="firstname"
-         v-model="firstName"
-         :placeholder="$t('person.firstname')"
-         @change="checkErrors"
-      />
-      <label for="firstname">{{ $t('person.firstname') }}</label>
-   </div>
-
-   <div v-if="queryItems">
-      <ul class="list-suggest add-items inline">
-         <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('firstName', qi)">
-            <span class="person-text">{{ qi }}</span>
-         </li>
-      </ul>
-   </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"
-         :value="personAltNamesLabels[i]"
-         @input="onAltNameInput"
-      />
-      <label :for="a.key">{{ a.labels.fr }}</label>
-   </div>
-
-   <!--  TODO fix placeholder if undefined
-   -->
-   <div class="form-floating mb-3">
-     <select
-         class="form-select form-select-lg"
-         id="gender"
-         v-model="gender"
-     >
-       <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
-       <option v-for="g in config.genders" :value="g.id" :key="g.id">
-         {{ g.label.fr }}
-       </option>
-     </select>
-      <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>
 
-   <div class="form-floating mb-3">
+  <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"
+        :placeholder="$t('person.lastname')"
+        @change="checkErrors"
+      >
+      <label for="lastname">{{ $t('person.lastname') }}</label>
+    </div>
+
+    <div v-if="queryItems">
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="(qi, i) in queryItems"
+          :key="i"
+          @click="addQueryItem('lastName', qi)"
+        >
+          <span class="person-text">{{ qi }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="form-floating mb-3">
+      <input
+        class="form-control form-control-lg"
+        id="firstname"
+        v-model="firstName"
+        :placeholder="$t('person.firstname')"
+        @change="checkErrors"
+      >
+      <label for="firstname">{{ $t('person.firstname') }}</label>
+    </div>
+
+    <div v-if="queryItems">
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="(qi, i) in queryItems"
+          :key="i"
+          @click="addQueryItem('firstName', qi)"
+        >
+          <span class="person-text">{{ qi }}</span>
+        </li>
+      </ul>
+    </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"
+        :value="personAltNamesLabels[i]"
+        @input="onAltNameInput"
+      >
+      <label :for="a.key">{{ a.labels.fr }}</label>
+    </div>
+
+    <!--  TODO fix placeholder if undefined
+   -->
+    <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>
+        class="form-select form-select-lg"
+        id="gender"
+        v-model="gender"
+      >
+        <option
+          selected
+          disabled
+        >
+          {{ $t('person.gender.placeholder') }}
+        </option>
+        <option
+          v-for="g in config.genders"
+          :value="g.id"
+          :key="g.id"
+        >
+          {{ g.label.fr }}
+        </option>
+      </select>
+      <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"
+        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>
 
-   <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"
-         class="form-control form-control-lg"
-         id="chill_personbundle_person_birthdate"
-         name="chill_personbundle_person[birthdate]"
-         v-model="birthDate"
-         aria-describedby="birthdate" />
-   </div>
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="birthdate"
+      ><i class="fa fa-fw fa-birthday-cake" /></span>
+      <input
+        type="date"
+        class="form-control form-control-lg"
+        id="chill_personbundle_person_birthdate"
+        name="chill_personbundle_person[birthdate]"
+        v-model="birthDate"
+        aria-describedby="birthdate"
+      >
+    </div>
 
-   <div class="input-group mb-3">
-      <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
-      <input class="form-control form-control-lg"
-         v-model="phonenumber"
-         :placeholder="$t('person.phonenumber')"
-         :aria-label="$t('person.phonenumber')"
-         aria-describedby="phonenumber" />
-   </div>
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="phonenumber"
+      ><i class="fa fa-fw fa-phone" /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="phonenumber"
+        :placeholder="$t('person.phonenumber')"
+        :aria-label="$t('person.phonenumber')"
+        aria-describedby="phonenumber"
+      >
+    </div>
 
-   <div class="input-group mb-3">
-      <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
-      <input class="form-control form-control-lg"
-         v-model="mobilenumber"
-         :placeholder="$t('person.mobilenumber')"
-         :aria-label="$t('person.mobilenumber')"
-         aria-describedby="mobilenumber" />
-   </div>
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="mobilenumber"
+      ><i class="fa fa-fw fa-mobile" /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="mobilenumber"
+        :placeholder="$t('person.mobilenumber')"
+        :aria-label="$t('person.mobilenumber')"
+        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"
-         :placeholder="$t('person.email')"
-         :aria-label="$t('person.email')"
-         aria-describedby="email" />
-   </div>
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="email"
+      ><i class="fa fa-fw fa-at" /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="email"
+        :placeholder="$t('person.email')"
+        :aria-label="$t('person.email')"
+        aria-describedby="email"
+      >
+    </div>
 
-   <div v-if="action === 'create'" class="input-group mb-3 form-check">
-      <input class="form-check-input"
-         type='checkbox'
-         v-model="showAddressForm"
-         name='showAddressForm'/>
+    <div
+      v-if="action === 'create'"
+      class="input-group mb-3 form-check"
+    >
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="showAddressForm"
+        name="showAddressForm"
+      >
       <label class="form-check-label">{{ $t('person.address.show_address_form') }}</label>
-   </div>
-   <div v-if="action === 'create' && showAddressFormValue" class="form-floating mb-3">
+    </div>
+    <div
+      v-if="action === 'create' && showAddressFormValue"
+      class="form-floating mb-3"
+    >
       <p>{{ $t('person.address.warning') }}</p>
       <add-address
-         :context="addAddress.context"
-         :options="addAddress.options"
-         :addressChangedCallback="submitNewAddress"
-         ref="addAddress">
-      </add-address>
-   </div>
+        :context="addAddress.context"
+        :options="addAddress.options"
+        :address-changed-callback="submitNewAddress"
+        ref="addAddress"
+      />
+    </div>
 
 
-   <div class="alert alert-warning" v-if="errors.length">
+    <div
+      class="alert alert-warning"
+      v-if="errors.length"
+    >
       <ul>
-         <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+        <li
+          v-for="(e, i) in errors"
+          :key="i"
+        >
+          {{ e }}
+        </li>
       </ul>
-   </div>
-
-</div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 0a3831df7..e78934b31 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -2,28 +2,39 @@
   <div class="item-bloc col">
     <section class="chill-entity entity-thirdparty">
       <div class="item-row entity-bloc">
-
         <div class="item-col">
           <div class="entity-label">
             <div :class="'denomination h' + options.hLevel">
-
-              <a v-if="this.options.addLink === true" href="#">
+              <a
+                v-if="this.options.addLink === true"
+                href="#"
+              >
                 <span class="name">{{ thirdparty.text }}</span>
               </a>
-              <span class="name" v-else>{{ thirdparty.text }}</span>
+              <span
+                class="name"
+                v-else
+              >{{ thirdparty.text }}</span>
 
-              <span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
-                        {{ thirdparty.id }}
-                    </span>
+              <span
+                v-if="options.addId === true"
+                class="id-number"
+                :title="'n° ' + thirdparty.id"
+              >
+                {{ thirdparty.id }}
+              </span>
 
-              <badge-entity v-if="options.addEntity === true"
-                            :entity="thirdparty"
-                            :options="{ displayLong: options.entityDisplayLong }">
-              </badge-entity>
+              <badge-entity
+                v-if="options.addEntity === true"
+                :entity="thirdparty"
+                :options="{ displayLong: options.entityDisplayLong }"
+              />
             </div>
 
-            <p v-if="this.options.addInfo === true" class="moreinfo">
-            </p>
+            <p
+              v-if="this.options.addInfo === true"
+              class="moreinfo"
+            />
           </div>
         </div>
 
@@ -31,60 +42,68 @@
           <div class="float-button bottom">
             <div class="box">
               <div class="action">
-                <slot name="record-actions"></slot>
+                <slot name="record-actions" />
               </div>
               <ul class="list-content fa-ul">
                 <li v-if="getProfession.length > 0">
-                  <i class="fa fa-li fa-id-card"></i>
+                  <i class="fa fa-li fa-id-card" />
                   <p><span>{{ getProfession[0] }}</span></p>
                 </li>
                 <li v-if="hasParent">
-                  <i class="fa fa-li fa-hand-o-right"></i>
+                  <i class="fa fa-li fa-hand-o-right" />
                   <b class="me-2">{{ $t('child_of') }}</b>
                   <on-the-fly
                     :type="thirdparty.parent.type"
                     :id="thirdparty.parent.id"
-                    :buttonText="thirdparty.parent.text"
-                    :displayBadge="'true' === 'true'"
-                    action="show">
-                  </on-the-fly>
+                    :button-text="thirdparty.parent.text"
+                    :display-badge="'true' === 'true'"
+                    action="show"
+                  />
                 </li>
                 <!-- TODO hasChildren
                     NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
                 -->
               </ul>
               <div v-if="thirdparty.contactDataAnonymous">
-                <confidential :positionBtnFar="false">
-                  <template v-slot:confidential-content>
+                <confidential :position-btn-far="false">
+                  <template #confidential-content>
                     <ul class="list-content fa-ul">
                       <li v-if="thirdparty.address">
-                        <i class="fa fa-li fa-map-marker"></i>
-                        <address-render-box :address="thirdparty.address"
-                                            :isMultiline="isMultiline"></address-render-box>
+                        <i class="fa fa-li fa-map-marker" />
+                        <address-render-box
+                          :address="thirdparty.address"
+                          :is-multiline="isMultiline"
+                        />
                       </li>
                       <li v-if="thirdparty.telephone">
-                        <i class="fa fa-li fa-mobile"></i>
+                        <i class="fa fa-li fa-mobile" />
                         <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
                       </li>
                       <li v-if="thirdparty.email">
-                        <i class="fa fa-li fa-envelope-o"></i>
+                        <i class="fa fa-li fa-envelope-o" />
                         <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
                       </li>
                     </ul>
                   </template>
                 </confidential>
               </div>
-              <ul v-else class="list-content fa-ul">
+              <ul
+                v-else
+                class="list-content fa-ul"
+              >
                 <li v-if="thirdparty.address">
-                  <i class="fa fa-li fa-map-marker"></i>
-                  <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
+                  <i class="fa fa-li fa-map-marker" />
+                  <address-render-box
+                    :address="thirdparty.address"
+                    :is-multiline="isMultiline"
+                  />
                 </li>
                 <li v-if="thirdparty.telephone">
-                  <i class="fa fa-li fa-mobile"></i>
+                  <i class="fa fa-li fa-mobile" />
                   <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
                 </li>
                 <li v-if="thirdparty.email">
-                  <i class="fa fa-li fa-envelope-o"></i>
+                  <i class="fa fa-li fa-envelope-o" />
                   <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
                 </li>
               </ul>
@@ -92,10 +111,9 @@
           </div>
         </div>
       </div>
-      <slot name="end-bloc"></slot>
+      <slot name="end-bloc" />
     </section>
   </div>
-
 </template>
 
 <script>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
index 621a9f8b8..0045b6d49 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
@@ -1,8 +1,11 @@
 <template>
-    <span v-if="isCut">{{ cutText }}</span>
-    <span v-else class="thirdparty-text">
-        <span class="firstname">{{ thirdparty.text }}</span>
-    </span>
+  <span v-if="isCut">{{ cutText }}</span>
+  <span
+    v-else
+    class="thirdparty-text"
+  >
+    <span class="firstname">{{ thirdparty.text }}</span>
+  </span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
index 0c830d673..5b16affcb 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -1,169 +1,247 @@
 <template>
-   <div v-if="action === 'show'">
-      <div class="flex-table">
-         <third-party-render-box
-            :thirdparty="thirdparty"
-            :options="{
-               addInfo: true,
-               addEntity: true,
-               entityDisplayLong: true,
-               addAltNames: true,
-               addId: true,
-               addLink: false,
-               addAge: false,
-               hLevel: 3,
-               addCenter: true,
-               addNoData: true,
-               isMultiline: true
-            }"
-         ></third-party-render-box>
+  <div v-if="action === 'show'">
+    <div class="flex-table">
+      <third-party-render-box
+        :thirdparty="thirdparty"
+        :options="{
+          addInfo: true,
+          addEntity: true,
+          entityDisplayLong: true,
+          addAltNames: true,
+          addId: true,
+          addLink: false,
+          addAge: false,
+          hLevel: 3,
+          addCenter: true,
+          addNoData: true,
+          isMultiline: true
+        }"
+      />
+    </div>
+  </div>
+  <div v-else-if="action === 'edit' || action === 'create' || action === 'addContact'">
+    <div v-if="parent">
+      <div class="parent-info">
+        <i class="fa fa-li fa-hand-o-right" />
+        <b class="me-2">{{ $t('child_of') }}</b>
+        <span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
       </div>
-   </div>
-   <div v-else-if="action === 'edit' || action === 'create' || action === 'addContact'">
-      <div v-if="parent">
-         <div class="parent-info">
-            <i class="fa fa-li fa-hand-o-right"></i>
-            <b class="me-2">{{ $t('child_of') }}</b>
-            <span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
-         </div>
+    </div>
+    <div
+      class="form-floating mb-3"
+      v-else-if="kind !== 'child'"
+    >
+      <div class="form-check">
+        <input
+          class="form-check-input mt-0"
+          type="radio"
+          v-model="kind"
+          value="company"
+          id="tpartyKindInstitution"
+        >
+        <label
+          for="tpartyKindInstitution"
+          class="required"
+        >
+          <badge-entity
+            :entity="{ type: 'thirdparty', kind: 'company' }"
+            :options="{ displayLong: true }"
+          />
+        </label>
       </div>
-      <div class="form-floating mb-3" v-else-if="kind !== 'child'">
-         <div class="form-check">
-            <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
-            <label for="tpartyKindInstitution" class="required">
-                  <badge-entity
-                     :entity="{ type: 'thirdparty', kind: 'company' }"
-                     :options="{ displayLong: true }">
-                  </badge-entity>
-            </label>
-         </div>
-         <div class="form-check">
-            <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
-            <label for="tpartyKindContact" class="required">
-               <badge-entity
-                  :entity="{ type: 'thirdparty', kind: 'contact' }"
-                  :options="{ displayLong: true }">
-               </badge-entity>
-            </label>
-         </div>
-      </div>
-      <div v-else>
-         <p>Contact de&nbsp;:</p>
-         <third-party-render-box :thirdparty="thirdparty.parent"
-            :options="{
-                  addInfo: true,
-                  addEntity: false,
-                  addAltNames: true,
-                  addId: false,
-                  addLink: false,
-                  addAge: false,
-                  hLevel: 4,
-                  addCenter: false,
-                  addNoData: true,
-                  isMultiline: false
-            }"></third-party-render-box>
+      <div class="form-check">
+        <input
+          class="form-check-input mt-0"
+          type="radio"
+          v-model="kind"
+          value="contact"
+          id="tpartyKindContact"
+        >
+        <label
+          for="tpartyKindContact"
+          class="required"
+        >
+          <badge-entity
+            :entity="{ type: 'thirdparty', kind: 'contact' }"
+            :options="{ displayLong: true }"
+          />
+        </label>
       </div>
+    </div>
+    <div v-else>
+      <p>Contact de&nbsp;:</p>
+      <third-party-render-box
+        :thirdparty="thirdparty.parent"
+        :options="{
+          addInfo: true,
+          addEntity: false,
+          addAltNames: true,
+          addId: false,
+          addLink: false,
+          addAge: false,
+          hLevel: 4,
+          addCenter: false,
+          addNoData: true,
+          isMultiline: false
+        }"
+      />
+    </div>
 
-      <div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
-         <div class="child-info">
-            <div class="input-group mb-3 input-section">
-               <select class="form-select form-select-lg" id="civility"
-                  v-model="thirdparty.civility">
-                  <option selected disabled :value="null" >{{ $t('thirdparty.civility') }}</option>
-                  <option v-for="civility in civilities" :key="civility.id" :value="civility">{{ civility.name.fr }}</option>
-               </select>
-            </div>
-           <div class="input-group mb-3 input-section">
-             <input class="form-control form-control-lg"
-                    v-model="thirdparty.profession"
-                    v-bind:placeholder="$t('thirdparty.profession')"
-                    v-bind:aria-label="$t('thirdparty.profession')"
-                    aria-describedby="profession" />
-           </div>
-         </div>
-         <div class="child-info">
-            <div class="input-section">
-               <div class="form-floating mb-3">
-                  <input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstname" v-bind:placeholder="$t('thirdparty.firstname')" />
-                  <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
-               </div>
-               <div v-if="queryItems">
-                  <ul class="list-suggest add-items inline">
-                     <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('firstName', qi)">
-                        <span class="person-text">{{ qi }}</span>
-                     </li>
-                  </ul>
-               </div>
-            </div>
-            <div class="input-section">
-               <div class="form-floating mb-3">
-                  <input class="form-control form-control-lg" id="name" v-model="thirdparty.name" v-bind:placeholder="$t('thirdparty.lastname')" />
-                  <label for="name">{{ $t('thirdparty.lastname') }}</label>
-               </div>
-               <div v-if="queryItems">
-                  <ul class="list-suggest add-items inline">
-                     <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('name', qi)">
-                        <span class="person-text">{{ qi }}</span>
-                     </li>
-                  </ul>
-               </div>
-            </div>
-         </div>
+    <div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
+      <div class="child-info">
+        <div class="input-group mb-3 input-section">
+          <select
+            class="form-select form-select-lg"
+            id="civility"
+            v-model="thirdparty.civility"
+          >
+            <option
+              selected
+              disabled
+              :value="null"
+            >
+              {{ $t('thirdparty.civility') }}
+            </option>
+            <option
+              v-for="civility in civilities"
+              :key="civility.id"
+              :value="civility"
+            >
+              {{ civility.name.fr }}
+            </option>
+          </select>
+        </div>
+        <div class="input-group mb-3 input-section">
+          <input
+            class="form-control form-control-lg"
+            v-model="thirdparty.profession"
+            :placeholder="$t('thirdparty.profession')"
+            :aria-label="$t('thirdparty.profession')"
+            aria-describedby="profession"
+          >
+        </div>
       </div>
-
-      <div v-if="thirdparty.kind === 'company'">
-         <div class="form-floating mb-3">
-            <input class="form-control form-control-lg" id="name" v-model="thirdparty.name" v-bind:placeholder="$t('thirdparty.name')" />
-            <label for="name">{{ $t('thirdparty.name') }}</label>
-         </div>
-         <div v-if="query">
+      <div class="child-info">
+        <div class="input-section">
+          <div class="form-floating mb-3">
+            <input
+              class="form-control form-control-lg"
+              id="firstname"
+              v-model="thirdparty.firstname"
+              :placeholder="$t('thirdparty.firstname')"
+            >
+            <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
+          </div>
+          <div v-if="queryItems">
             <ul class="list-suggest add-items inline">
-               <li @click="addQuery(query)">
-                  <span class="person-text">{{ query }}</span>
-               </li>
+              <li
+                v-for="(qi, i) in queryItems"
+                :key="i"
+                @click="addQueryItem('firstName', qi)"
+              >
+                <span class="person-text">{{ qi }}</span>
+              </li>
             </ul>
-         </div>
+          </div>
+        </div>
+        <div class="input-section">
+          <div class="form-floating mb-3">
+            <input
+              class="form-control form-control-lg"
+              id="name"
+              v-model="thirdparty.name"
+              :placeholder="$t('thirdparty.lastname')"
+            >
+            <label for="name">{{ $t('thirdparty.lastname') }}</label>
+          </div>
+          <div v-if="queryItems">
+            <ul class="list-suggest add-items inline">
+              <li
+                v-for="(qi, i) in queryItems"
+                :key="i"
+                @click="addQueryItem('name', qi)"
+              >
+                <span class="person-text">{{ qi }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
+    </div>
 
-      <template
-         v-if="thirdparty.kind !== 'child'">
-         <add-address
-            key="thirdparty"
-            :context="context"
-            :options="addAddress.options"
-            :address-changed-callback="submitAddress"
-            ref="addAddress">
-         </add-address>
-      </template>
+    <div v-if="thirdparty.kind === 'company'">
+      <div class="form-floating mb-3">
+        <input
+          class="form-control form-control-lg"
+          id="name"
+          v-model="thirdparty.name"
+          :placeholder="$t('thirdparty.name')"
+        >
+        <label for="name">{{ $t('thirdparty.name') }}</label>
+      </div>
+      <div v-if="query">
+        <ul class="list-suggest add-items inline">
+          <li @click="addQuery(query)">
+            <span class="person-text">{{ query }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
 
+    <template
+      v-if="thirdparty.kind !== 'child'"
+    >
+      <add-address
+        key="thirdparty"
+        :context="context"
+        :options="addAddress.options"
+        :address-changed-callback="submitAddress"
+        ref="addAddress"
+      />
+    </template>
+
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="email"
+      ><i class="fa fa-fw fa-envelope" /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="thirdparty.email"
+        :placeholder="$t('thirdparty.email')"
+        :aria-label="$t('thirdparty.email')"
+        aria-describedby="email"
+      >
+    </div>
+
+    <div class="input-group mb-3">
+      <span
+        class="input-group-text"
+        id="phonenumber"
+      ><i class="fa fa-fw fa-phone" /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="thirdparty.telephone"
+        :placeholder="$t('thirdparty.phonenumber')"
+        :aria-label="$t('thirdparty.phonenumber')"
+        aria-describedby="phonenumber"
+      >
+    </div>
+
+    <div v-if="parent">
       <div class="input-group mb-3">
-         <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>
-         <input class="form-control form-control-lg"
-            v-model="thirdparty.email"
-            v-bind:placeholder="$t('thirdparty.email')"
-            v-bind:aria-label="$t('thirdparty.email')"
-            aria-describedby="email" />
+        <span
+          class="input-group-text"
+          id="comment"
+        ><i class="fa fa-fw fa-pencil" /></span>
+        <textarea
+          class="form-control form-control-lg"
+          :placeholder="$t('thirdparty.comment')"
+          v-model="thirdparty.comment"
+        />
       </div>
-
-      <div class="input-group mb-3">
-         <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
-         <input class="form-control form-control-lg"
-            v-model="thirdparty.telephone"
-            v-bind:placeholder="$t('thirdparty.phonenumber')"
-            v-bind:aria-label="$t('thirdparty.phonenumber')"
-            aria-describedby="phonenumber" />
-      </div>
-
-      <div v-if="parent">
-         <div class="input-group mb-3">
-            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-pencil"></i></span>
-            <textarea class="form-control form-control-lg"
-               v-bind:placeholder="$t('thirdparty.comment')"
-               v-model="thirdparty.comment"
-            ></textarea>
-         </div>
-      </div>
-   </div>
+    </div>
+  </div>
 </template>
 
 <script>