diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe26e1978..22a516029 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,12 +11,20 @@ and this project adheres to
 ## Unreleased
 
 <!-- write down unreleased development here -->
+* [person] accompanying course: optimisation: do not fetch some resources for the banner (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/409)
+* [person] accompanying course: close modal when edit participation (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/420)
+* [person] accompanying course: treat validation error when editing on-the-fly entities (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/420)
+* [activity] show activity attendee (présence) in the activity list (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/412)
+* [activity] admin: change validation rule for social action visible field (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/413)
 * [parcours]: component added to change the opening date of a parcours (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/411)
 * [search]: listing of parcours display changed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/410)
 * [user]: page with accompanying periods to which is user is referent (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/408)
 * [person]: Comment on marital status is possible even if marital status is not defined (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/421)
 * [parcours]: In the list of person results the requestor is not displayed if defined as anonymous (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/424)
 * [bugfix]: modal closes and newly created person/thirdparty is selected when multiple persons/thirdparties are created through the modal (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/429)
+* [person] age added to renderstring + renderbox/ vue component created to display person text (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/389)
+* [household member editor] allow to push to existing household
+
 
 ## Test releases
 
@@ -34,10 +42,10 @@ and this project adheres to
 
 ### test release 2021-01-26
 
+>>>>>>> origin/master
 * [parcours] comments truncated if too long + link added (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/406)
 * [person]: possibility to add person resources (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/382)
 * [person ressources]: module added
-* [parcours] bugfix if deathdate is not defined (eg. for a thirdparty) parcours is still displayed. Gave error before.
 
 
 ### test release 2022-01-24
diff --git a/src/Bundle/ChillActivityBundle/Entity/ActivityType.php b/src/Bundle/ChillActivityBundle/Entity/ActivityType.php
index c7448e07d..94f732a89 100644
--- a/src/Bundle/ChillActivityBundle/Entity/ActivityType.php
+++ b/src/Bundle/ChillActivityBundle/Entity/ActivityType.php
@@ -16,6 +16,7 @@ use InvalidArgumentException;
 use Symfony\Component\Serializer\Annotation as Serializer;
 use Symfony\Component\Serializer\Annotation\Groups;
 use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\Component\Validator\Context\ExecutionContextInterface;
 
 /**
  * Class ActivityType.
@@ -193,7 +194,6 @@ class ActivityType
 
     /**
      * @ORM\Column(type="smallint", nullable=false, options={"default": 1})
-     * @Assert\EqualTo(propertyPath="socialIssuesVisible", message="This parameter must be equal to social issue parameter")
      */
     private int $socialActionsVisible = self::FIELD_INVISIBLE;
 
@@ -263,6 +263,23 @@ class ActivityType
      */
     private int $userVisible = self::FIELD_REQUIRED;
 
+    /**
+     * @Assert\Callback
+     *
+     * @param mixed $payload
+     */
+    public function checkSocialActionsVisibility(ExecutionContextInterface $context, $payload)
+    {
+        if ($this->socialIssuesVisible !== $this->socialActionsVisible) {
+            if (!($this->socialIssuesVisible === 2 && $this->socialActionsVisible === 1)) {
+                $context
+                    ->buildViolation('The socialActionsVisible value is not compatible with the socialIssuesVisible value')
+                    ->atPath('socialActionsVisible')
+                    ->addViolation();
+            }
+        }
+    }
+
     /**
      * Get active
      * return true if the type is active.
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 f5057eb25..45483dc95 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -1,45 +1,48 @@
 <template>
-    <teleport to="#add-persons" v-if="isComponentVisible">
+   <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}`">
-                    <span>{{ p.text }}</span>
-                </li>
-            </ul>
-        </div>
+      <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>
 
-        <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>
+      <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>
 
-    </teleport>
+   </teleport>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: "ConcernedGroups",
    components: {
       AddPersons,
-      PersonsBloc
+      PersonsBloc,
+      PersonText
    },
    data() {
       return {
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 de78c9b85..0a611e217 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,21 +1,29 @@
 <template>
    <li>
       <span :title="person.text">
-         <span class="chill_denomination" @click.prevent="$emit('remove', person)">{{ textCutted }}</span>
+         <span class="chill_denomination" @click.prevent="$emit('remove', person)">
+            <person-text :person="person" :isCut="true"></person-text>
+         </span>
       </span>
    </li>
 </template>
 
 <script>
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
+
 export default {
    name: "PersonBadge",
    props: ['person'],
-   computed: {
-      textCutted() {
-         let more = (this.person.text.length > 15) ?'…' : '';
-         return this.person.text.slice(0,15) + more;
-      }
+   components: {
+      PersonText
    },
+   // computed: {
+   //    textCutted() {
+   //       let more = (this.person.text.length > 15) ?'…' : '';
+   //       return this.person.text.slice(0,15) + more;
+   //    }
+   // },
    emits: ['remove'],
 }
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/_list_item.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/_list_item.html.twig
index 6b2e33dfb..fadf7ff14 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/_list_item.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/_list_item.html.twig
@@ -41,6 +41,17 @@
                 </div>
             {% endif %}
 
+            {% if activity.attendee and t.attendeeVisible %}
+                <div class="wl-row">
+                    <div class="wl-col title"><h3>{{ 'Attendee'|trans }}</h3></div>
+                    <div class="wl-col list">
+                        <p class="wl-item">
+                            {{ activity.attendee.name|localize_translatable_string }}
+                        </p>
+                    </div>
+                </div>
+            {% endif %}
+
             {% if activity.sentReceived is not empty and t.sentReceivedVisible %}
                 <div class="wl-row">
                     <div class="wl-col title"><h3>{{ 'Sent received'|trans }}</h3></div>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig
index 0f426c5a9..e8be2c49e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig
@@ -48,7 +48,7 @@
                         <li class="associated-persons">
                             <span class="item-key">{{ 'Participants'|trans ~ ' : ' }}</span>
                             {% for p in activity.personsAssociated %}
-                                <span class="badge-person">{{ p|chill_entity_render_box }}</span>
+                                <span class="badge-person">{{ p|chill_entity_render_box({'addAgeBadge': true}) }}</span>
                             {% endfor %}
                         </li>
                     </ul>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
index 546ba99ce..a5e3bd1fd 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
@@ -165,11 +165,7 @@
                 <dt class="inline">{{ 'Attendee'|trans }}</dt>
                 <dd>
                     {% if entity.attendee is not null %}
-                        {% if entity.attendee %}
-                            {{ 'present'|trans|capitalize }}
-                        {% else %}
-                            {{ 'not present'|trans|capitalize }}
-                        {% endif %}
+                        {{ entity.attendee.name|localize_translatable_string }}
                     {% else %}
                         <span class="chill-no-data-statement">{{ 'None'|trans|capitalize }}</span>
                     {% endif %}
diff --git a/src/Bundle/ChillActivityBundle/translations/validators.fr.yml b/src/Bundle/ChillActivityBundle/translations/validators.fr.yml
index 072ac55d2..1f4f97a63 100644
--- a/src/Bundle/ChillActivityBundle/translations/validators.fr.yml
+++ b/src/Bundle/ChillActivityBundle/translations/validators.fr.yml
@@ -20,3 +20,4 @@ For this type of activity, you must add at least one social action: Pour ce type
 
 # admin
 This parameter must be equal to social issue parameter: Ce paramètre doit être égal au paramètre "Visibilité du champs Problématiques sociales"
+The socialActionsVisible value is not compatible with the socialIssuesVisible value: Cette valeur du paramètre "Visibilité du champs Actions sociales" n'est pas compatible avec la valeur du paramètre "Visibilité du champs Problématiques sociales"
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
index 4d213645e..bfd43064b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@@ -12,6 +12,7 @@
         display: block;
         top: calc(50% - 7px);
         right: 10px;
+        line-height: 11px;
     }
 }
 
@@ -62,14 +63,19 @@ ul.list-suggest {
             & span:hover {
                 color: $chill-l-gray;
             }
+            .person-text {
+                span {
+                    padding-left: 0px;
+                }
+            }
         }
     }
     &.remove-items {
         li {
             position: relative;
-            span {
+            & > span {
                 display: block;
-                padding-right: .75rem;
+                padding-right: 1.75rem;
                 @include remove_link;
             }
         }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
index 1eb437a2a..a95c4b993 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
@@ -22,6 +22,7 @@ $chill-theme-buttons: (
    "cancel":        $gray-300,
    "choose":        $gray-300,
    "notify":        $gray-300,
+   "search":        $gray-300,
    "unlink":        $chill-red,
    "tpchild":       $chill-pink,
 );
@@ -80,6 +81,7 @@ $chill-theme-buttons: (
    &.btn-notify::before,
    &.btn-tpchild::before,
    &.btn-download::before,
+   &.btn-search::before,
    &.btn-cancel::before {
       font: normal normal normal 14px/1 ForkAwesome;
       margin-right: 0.5em;
@@ -108,6 +110,7 @@ $chill-theme-buttons: (
    &.btn-notify::before    { content: "\f1d8"; } // fa-paper-plane
    &.btn-tpchild::before   { content: "\f007"; } // fa-user
    &.btn-download::before  { content: "\f019"; } // fa-download
+   &.btn-search::before    { content: "\f002"; } // fa-search
 }
 
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
index 5dd770328..4e99b7fd3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -24,6 +24,11 @@
         {{ $t('user')}}
     </span>
 
+    <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
+        {{ $t('household')}}
+    </span>
+
+
 </template>
 
 <script>
@@ -40,7 +45,8 @@ export default {
                     company: "Personne morale",
                     contact: "Personne physique",
                 },
-                user: 'TMS'
+                user: 'TMS',
+                household: 'Ménage',
             }
         }
     }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 1ab8eb29a..c1eac0b06 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -61,14 +61,15 @@ const messages = {
             woman: "Née le"
          },
          deathdate: "Date de décès",
-         years_old: "ans",
          household_without_address: "Le ménage de l'usager est sans adresse",
          no_data: "Aucune information renseignée",
          type: {
             thirdparty: "Tiers",
             person: "Usager"
          },
-         holder: "Titulaire"
+         holder: "Titulaire",
+         years_old: "an | {n} an | {n} ans",
+
       }
    }
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
index 1f29bfe7a..16e9cbf02 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
@@ -42,6 +42,3 @@
     {% endif %}
 
 ></span>
-
-{{ encore_entry_script_tags('vue_onthefly') }}
-{{ encore_entry_link_tags('vue_onthefly') }}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index a123ce405..ef48414e0 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -13,6 +13,7 @@
     {{ encore_entry_link_tags('mod_ckeditor5') }}
     {{ encore_entry_link_tags('chill') }}
     {{ encore_entry_link_tags('mod_blur') }}
+    {{ encore_entry_link_tags('vue_onthefly') }}
     {% block css %}<!-- nothing added to css -->{% endblock %}
 </head>
 
@@ -94,6 +95,7 @@
     {{ encore_entry_script_tags('mod_ckeditor5') }}
     {{ encore_entry_script_tags('mod_blur') }}
     {{ encore_entry_script_tags('chill') }}
+    {{ encore_entry_script_tags('vue_onthefly') }}
 
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function(e) {
diff --git a/src/Bundle/ChillMainBundle/Search/SearchApiQuery.php b/src/Bundle/ChillMainBundle/Search/SearchApiQuery.php
index 2fcea304d..57193a96d 100644
--- a/src/Bundle/ChillMainBundle/Search/SearchApiQuery.php
+++ b/src/Bundle/ChillMainBundle/Search/SearchApiQuery.php
@@ -22,6 +22,10 @@ class SearchApiQuery
 
     private array $fromClauseParams = [];
 
+    private bool $isDistinct = false;
+
+    private ?string $isDistinctKey = null;
+
     private ?string $jsonbMetadata = null;
 
     private array $jsonbMetadataParams = [];
@@ -105,6 +109,11 @@ class SearchApiQuery
         ]);
     }
 
+    public function getDistinct(): bool
+    {
+        return $this->isDistinct;
+    }
+
     public function getFromClause(): string
     {
         return $this->fromClause;
@@ -139,6 +148,14 @@ class SearchApiQuery
         return $this;
     }
 
+    public function setDistinct(bool $distinct, string $distinctKey): self
+    {
+        $this->isDistinct = $distinct;
+        $this->isDistinctKey = $distinctKey;
+
+        return $this;
+    }
+
     public function setFromClause(string $fromClause, array $params = []): self
     {
         $this->fromClause = $fromClause;
@@ -185,7 +202,11 @@ class SearchApiQuery
     private function buildSelectClause(bool $countOnly = false): string
     {
         if ($countOnly) {
-            return 'count(*) AS c';
+            if (!$this->isDistinct) {
+                return 'count(*) AS c';
+            }
+
+            return 'count(distinct ' . $this->isDistinctKey . ') AS c';
         }
 
         $selects = $this->getSelectClauses();
@@ -202,7 +223,7 @@ class SearchApiQuery
             $selects[] = strtr('{pertinence} AS pertinence', ['{pertinence}' => $this->pertinence]);
         }
 
-        return implode(', ', $selects);
+        return ($this->isDistinct ? 'DISTINCT ' : '') . implode(', ', $selects);
     }
 
     private function buildSelectParams(bool $count = false): array
diff --git a/src/Bundle/ChillMainBundle/chill.api.specs.yaml b/src/Bundle/ChillMainBundle/chill.api.specs.yaml
index 4f2e3648e..034dfe74b 100644
--- a/src/Bundle/ChillMainBundle/chill.api.specs.yaml
+++ b/src/Bundle/ChillMainBundle/chill.api.specs.yaml
@@ -134,6 +134,7 @@ paths:
                 - search
                 - person
                 - thirdparty
+                - household
             description: >
                 The search is performed across multiple entities. The entities must be listed into
                 `type` parameters.
@@ -159,6 +160,7 @@ paths:
                                 - person
                                 - thirdparty
                                 - user
+                                - household
             responses:
                 200:
                     description: "OK"
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 435dfe0c8..497f3e9b7 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
@@ -4,7 +4,7 @@
          <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.text" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
+         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.textAge" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
       </span>
    </span>
 </template>
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 3ea64bd67..202d5b376 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -27,7 +27,7 @@
                   :value="p.person.id"
                />
                <label class="form-check-label">
-                  {{ p.person.text }}
+                  <person-text :person="p.person"></person-text>
                </label>
             </div>
             <input type="hidden" name="expand_suggestions" value="true">
@@ -50,9 +50,9 @@
    <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)">
-             <span>{{ p.text }}</span>
-          </li>
-        </ul>
+            <person-text :person="p"></person-text>
+         </li>
+      </ul>
    </div>
 
    <div>
@@ -76,12 +76,14 @@
 import {mapGetters, mapState} from 'vuex';
 import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue";
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: 'PersonsAssociated',
    components: {
       ParticipationItem,
-      AddPersons
+      AddPersons,
+      PersonText
    },
    data() {
       return {
@@ -110,15 +112,15 @@ export default {
          )
          // filter persons appearing twice in requestor and resources
          .filter(
-             (e, index, suggested) => {
+            (e, index, suggested) => {
                for (let i = 0; i < suggested.length; i = i+1) {
-                 if (i < index && e.id === suggested[i].id) {
-                   return false
-                 }
+                  if (i < index && e.id === suggested[i].id) {
+                     return false
+                  }
                }
 
                return true;
-             }
+            }
          )
       }),
       ...mapGetters([
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 dd6d6c70c..2ed08ffc0 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
@@ -28,7 +28,7 @@
                </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"></on-the-fly></li>
+            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" :canCloseModal="canCloseOnTheFlyModal"></on-the-fly></li>
             <li>
                <button v-if="!participation.endDate"
                   class="btn btn-sm btn-remove"
@@ -63,6 +63,7 @@ import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: 'ParticipationItem',
@@ -88,7 +89,8 @@ export default {
                addAge: false,
                hLevel: 1
             }
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -110,14 +112,53 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'participation';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+
       }
    }
 }
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 a5d6791fb..8f29f4771 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -45,7 +45,8 @@
                   addInfo: true,
                   hLevel: 3,
                   isMultiline: true,
-                  isConfidential: false
+                  isConfidential: false,
+                  addAge: true,
                   }"
             >
                <template v-slot:record-actions>
@@ -113,7 +114,7 @@
          <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"></on-the-fly></li>
+               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" :canCloseModal="canCloseOnTheFlyModal"></on-the-fly></li>
             </ul>
          </template>
       </person-render-box>
@@ -136,9 +137,10 @@
    <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)">
-             <span>{{ p.text }}</span>
-          </li>
-        </ul>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
+         </li>
+      </ul>
    </div>
 
    <div>
@@ -162,6 +164,9 @@ import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import { mapState } from 'vuex';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
 
 export default {
    name: 'Requestor',
@@ -170,7 +175,8 @@ export default {
       OnTheFly,
       PersonRenderBox,
       ThirdPartyRenderBox,
-      Confidential
+      Confidential,
+      PersonText
    },
    props: ['isAnonymous'],
    data() {
@@ -182,7 +188,8 @@ export default {
                priority: null,
                uniq: true,
             }
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -246,14 +253,52 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'requestor';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
       },
       addSuggestedEntity(e) {
          this.$store.dispatch('addRequestor', { result: e, type: e.type })
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 ed1f85cf3..3697d8b64 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -22,7 +22,8 @@
    <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)">
-            <span>{{ p.text }}</span>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
          </li>
       </ul>
    </div>
@@ -45,12 +46,15 @@
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ResourceItem from './Resources/ResourceItem.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
 
 export default {
    name: 'Resources',
    components: {
       AddPersons,
-      ResourceItem
+      ResourceItem,
+      PersonText
    },
    data() {
       return {
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 e7bc18371..102dcf741 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
@@ -34,7 +34,8 @@
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly">
+                  @saveFormOnTheFly="saveFormOnTheFly"
+                  :canCloseModal="canCloseOnTheFlyModal">
                </on-the-fly>
             </li>
             <li>
@@ -80,7 +81,8 @@
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly">
+                  @saveFormOnTheFly="saveFormOnTheFly"
+                  :canCloseModal="canCloseOnTheFlyModal">
                </on-the-fly>
             </li>
             <li>
@@ -101,6 +103,7 @@ import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import WriteComment from './WriteComment';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: 'ResourceItem',
@@ -113,6 +116,11 @@ export default {
    },
    props: ['resource'],
    emits: ['remove'],
+   data() {
+      return {
+         canCloseOnTheFlyModal: false
+      }
+   },
    computed: {
       parent() {
          return {
@@ -136,14 +144,52 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'resource';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
       },
       updateComment(resource) {
          console.log('updateComment', resource);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
index 2af2d2d21..8440e50d5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
@@ -13,7 +13,7 @@ const root = window.vueRootComponent;
 *  Load all App component, for AccompanyingCourse edition page
 */
 if (root === 'app') {
-   initPromise.then(store => {
+   initPromise(root).then(store => {
 
       const i18n = _createI18n(appMessages);
 
@@ -37,7 +37,7 @@ if (root === 'app') {
 *  Load only Banner sub-component, for all others AccompanyingCourse page
 */
 if (root === 'banner') {
-   initPromise.then(store => {
+   initPromise(root).then(store => {
 
       const i18n = _createI18n(appMessages);
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 1fdc65c5e..ea8f3f556 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -14,10 +14,14 @@ import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/j
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
 
-let scopesPromise = fetchScopes();
+let getScopesPromise = (root) => {
+   if (root === 'app') {
+      return fetchScopes();
+   }
+}
 let accompanyingCoursePromise = getAccompanyingCourse(id);
 
-let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
+let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCoursePromise])
   .then(([scopes, accompanyingCourse]) => new Promise((resolve, reject) => {
 
       const store = createStore({
@@ -291,6 +295,12 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                commit('removeParticipation', payload);
                // fetch DELETE request...
             },
+            addPerson({ commit }, payload) {
+               commit('updatePerson', { target: payload.target, person: payload.body });
+            },
+            addThirdparty({ commit }, payload) {
+               commit('updateThirdparty', { target: payload.target, thirdparty: payload.body });
+            },
             /**
              * Add/close participation
              */
@@ -810,8 +820,11 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
          }
       });
 
-      store.dispatch('fetchReferrersSuggested');
-      store.dispatch('fetchUsers');
+      if (root === 'app') {
+         store.dispatch('fetchReferrersSuggested');
+         store.dispatch('fetchUsers');
+      }
+
       resolve(store);
    }));
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index 5f4973f3e..503a00c59 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -57,8 +57,12 @@
 
         <ul>
           <li v-for="p in personsReachables" :key="p.id">
-            <input type="checkbox" :value="p.id" v-model="personsPicked">
-            <person-render-box render="badge" :options="{}" :person="p"></person-render-box>
+            <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>
+              </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -124,7 +128,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
 import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
-import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 const i18n = {
   messages: {
@@ -146,7 +150,7 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
-    PersonRenderBox,
+    PersonText,
   },
   methods: {
     submit() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index e43608895..5237dc7e2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -141,10 +141,12 @@
 
          <ul class="list-unstyled">
             <li v-for="p in personsReachables" :key="p.id">
-               <label :for="p.id">
-                  <input v-model="personsPicked" :value="p.id" :id="p.id" type="checkbox" class="me-2">
-                  {{ p.text }}
+              <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>
             </li>
          </ul>
       </div>
@@ -281,6 +283,7 @@ import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 const i18n = {
    messages: {
@@ -329,7 +332,8 @@ export default {
       ThirdPartyRenderBox,
       PickTemplate,
       PickWorkflow,
-      OnTheFly
+      OnTheFly,
+     PersonText,
    },
    i18n,
    data() {
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 74271954f..57d9ee3aa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
@@ -11,7 +11,7 @@
 
     <ul class="list-suggest remove-items inline">
       <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
-        <span>{{ c.person.text }}</span>
+        <span><person-text :person="c.person"></person-text></span>
       </li>
     </ul>
 
@@ -57,12 +57,14 @@
 import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
   name: 'Concerned',
   components: {
     AddPersons,
     PersonRenderBox,
+    PersonText,
   },
   computed: {
     ...mapState([
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 493092d81..5a8fe9c8d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -61,6 +61,16 @@
     <li v-if="hasHousehold">
       <button @click="resetMode" class="btn btn-sm btn-misc">{{ $t('household_members_editor.household.reset_mode')}}</button>
     </li>
+    <li v-if="!hasHousehold">
+      <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 -->
+      </add-persons>
+    </li>
     <li v-if="!hasHousehold">
       <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
     </li>
@@ -77,16 +87,30 @@
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
 import CurrentHousehold from './CurrentHousehold';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons';
 
 export default {
   name: 'Household',
   components: {
+    AddPersons,
     CurrentHousehold,
     HouseholdRenderBox,
   },
   emits: ['readyToGo'],
   data() {
     return {
+      addPersons: {
+        key: 'household_find',
+        options: {
+          type: ['household'],
+          priority: null,
+          uniq: true,
+          button: {
+            size: 'btn-sm',
+            type: 'btn-search',
+          }
+        }
+      },
       addAddress: {
         key: 'household_new',
         options: {
@@ -166,6 +190,13 @@ export default {
       this.$store.dispatch('selectHousehold', h);
       this.$emit('readyToGo');
     },
+    pickHouseholdFound({selected, modal}) {
+      selected.forEach(function(item) {
+        this.selectHousehold(item.result);
+      }, this);
+      this.$refs.pickHousehold.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
     },
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 487fb230e..005d46122 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -6,12 +6,13 @@
     <div class="list-household-members flex-table">
       <div
           v-for="conc in concerned"
-           class="item-bloc"
-           v-bind:key="conc.person.id"
+          class="item-bloc"
+          v-bind:key="conc.person.id"
       >
           <div class="pick-position item-row">
             <div class="person">
-              <h3>{{ conc.person.text }}</h3>
+              <!-- <h3>{{ conc.person.text }}</h3> -->
+              <h3><person-text :person="conc.person"></person-text></h3>
             </div>
             <div class="holder">
               <button
@@ -53,6 +54,7 @@ import {mapGetters, mapState} from "vuex";
 import CurrentHousehold from "./CurrentHousehold";
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import PersonComment from './PersonComment';
+import PersonText from '../../_components/Entity/PersonText.vue';
 
 export default {
   name: "Positioning",
@@ -60,6 +62,7 @@ export default {
     CurrentHousehold,
     PersonRenderBox,
     PersonComment,
+    PersonText
   },
   computed: {
     ...mapState([
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index c880ad2fd..f9b32f091 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -1,12 +1,12 @@
 <template>
-   <ul class="record_actions">
+    <ul class="record_actions">
       <li class="add-persons">
-         <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>
       </li>
-   </ul>
+    </ul>
 
-   <teleport to="body">
+  <teleport to="body">
       <modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
@@ -181,7 +181,7 @@ export default {
       },
       hasPriorSuggestion() {
          return this.search.priorSuggestion.key ? true : false;
-      }
+      },
    },
    methods: {
       openModal() {
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 ce2f52a50..9e40724d4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -25,6 +25,11 @@
             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>
@@ -34,6 +39,7 @@
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';
 
 export default {
    name: 'PersonSuggestion',
@@ -41,6 +47,7 @@ export default {
       SuggestionPerson,
       SuggestionThirdParty,
       SuggestionUser,
+      SuggestionHousehold,
    },
    props: [
       'item',
@@ -70,7 +77,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
    div.results {
       div.list-item {
          padding: 0.4em 0.8em;
@@ -83,11 +90,11 @@ export default {
          label {
             display: inline-flex;
             width: 100%;
-            div.container {
+            div.container:not(.household) {
                & > input {
                   margin-right: 0.8em;
                }
-               span:not(.name) {
+               > span:not(.name) {
                   margin-left: 0.5em;
                   opacity: 0.5;
                   font-size: 90%;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
new file mode 100644
index 000000000..546e8cb2f
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
@@ -0,0 +1,27 @@
+<template>
+   <div class="container household">
+     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+   </div>
+
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+   </div>
+</template>
+
+<script>
+
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
+
+export default {
+   name: 'SuggestionHousehold',
+   components: {
+     BadgeEntity,
+     HouseholdRenderBox,
+   },
+   props: ['item'],
+}
+</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 8bd4887cc..aec765c53 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="container">
       <span class="name">
-         {{ item.result.text }}
+         <person-text :person="item.result"></person-text>
       </span>
       <span class="birthday" v-if="hasBirthdate">
          {{ $d(item.result.birthdate.datetime, 'short') }}
@@ -28,12 +28,14 @@
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
-     BadgeEntity
+     BadgeEntity,
+     PersonText,
    },
    props: ['item'],
    computed: {
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 5a367a474..249e7582d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -2,7 +2,7 @@
     <div class="container tpartycontainer">
       <div class="tparty-identification">
         <span class="name">
-           {{ item.result.text }}
+           {{ item.result.text }}&nbsp;
         </span>
           <span class="location">
           <template v-if="hasAddress">
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 970d42c51..dd26db217 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,14 +1,15 @@
 <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-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.altNames && options.addAltNames ==  true" class="altnames">
@@ -16,19 +17,20 @@
                         </span>
                     </a>
 
-                   <span class="firstname">{{ person.firstName }}</span>
-                   <span class="lastname">{{ person.lastName }}</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>
+                  <!-- 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.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>
+                    <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>
+                    <badge-entity v-if="options.addEntity === true"
+                        :entity="person"
+                        :options="{ displayLong: options.entityDisplayLong }">
+                    </badge-entity>
 
                 </div>
 
@@ -47,98 +49,96 @@
                         {{ $t('renderbox.deathdate') + ' ' + deathdate }}
                     </time>
 
-                    <span v-if="options.addAge && person.birthdate" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
+                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
                 </p>
             </div>
         </div>
 
         <div class="item-col">
-           <div class="float-button bottom">
-              <div class="box">
-                 <div class="action">
-                    <slot name="record-actions"></slot>
-                 </div>
-                 <ul class="list-content fa-ul">
+            <div class="float-button bottom">
+                <div class="box">
+                    <div class="action">
+                        <slot name="record-actions"></slot>
+                    </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>
+                            </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>
+                        </li>
 
-                    <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>
-                       </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>
-                    </li>
+                        <li v-if="person.mobilenumber">
+                            <i class="fa fa-li fa-mobile"></i>
+                            <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>
+                        </li>
+                        <li v-if="person.phonenumber">
+                            <i class="fa fa-li fa-phone"></i>
+                            <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>
+                        </li>
 
-                    <li v-if="person.mobilenumber">
-                       <i class="fa fa-li fa-mobile"></i>
-                       <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>
-                    </li>
-                    <li v-if="person.phonenumber">
-                       <i class="fa fa-li fa-phone"></i>
-                       <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>
-                    </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>
+                        </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>
+                        </li>
+                        <slot name="custom-zone"></slot>
 
-                    <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>
-                    </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>
-                    </li>
-                    <slot name="custom-zone"></slot>
+                    </ul>
+                </div>
+            </div>
+            </div>
 
-                 </ul>
-              </div>
-           </div>
         </div>
-
-      </div>
     </section>
-  </div>
+</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>
-      {{ person.text }}
-      <span v-if="person.deathdate" class="deathdate"> (‡)</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>
+            <i class="fa fa-stack-1x">T</i>
+        </span>
+
+        <person-text :person="person"></person-text>
     </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 }}
-      <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+        <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>
     <slot name="post-badge"></slot>
-  </span>
+</span>
 
 </template>
 
@@ -147,13 +147,15 @@ import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
         AddressRenderBox,
         Confidential,
-        BadgeEntity
+        BadgeEntity,
+        PersonText
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {
@@ -168,7 +170,7 @@ export default {
             return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
         },
         getGenderTranslation: function() {
-           return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+            return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
         },
         getGender() {
             return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
@@ -200,24 +202,6 @@ export default {
         getUrl: function() {
             return `/fr/person/${this.person.id}/general`;
         },
-        getAge: function() {
-            // TODO only one abstract function
-            if(this.person.birthdate && !this.person.deathdate){
-                const birthday = new Date(this.person.birthdate.datetime)
-                const now = new Date()
-                return (now.getFullYear() - birthday.getFullYear())
-            } else if(this.person.birthdate && this.person.deathdate){
-                    const birthday = new Date(this.person.birthdate.datetime)
-                    const deathdate = new Date(this.person.deathdate.datetime)
-                    return (deathdate.getFullYear() - birthday.getFullYear())
-            } else if(!this.person.birthdate && this.person.deathdate.datetime) {
-                // todo: change this
-                    return "Age unknown"
-            } else {
-                // todo: change this
-                    return "Age unknown"
-            }
-        },
         getCurrentHouseholdUrl: function() {
            let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
            return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
new file mode 100644
index 000000000..8f89649d8
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
@@ -0,0 +1,50 @@
+<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 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>
+
+export default {
+    name: "PersonText",
+    props: {
+      person: {
+        required: true,
+      },
+      isCut: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      addAge: {
+        type: Boolean,
+        required: false,
+        default: true,
+      }
+    },
+    computed: {
+        altNameLabel: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
+            }
+        },
+        altNameKey: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
+            }
+        },
+        cutText: function() {
+            let more = (this.person.text.length > 15) ?'…' : '';
+            return this.person.text.slice(0,15) + more;
+        }
+    }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
index d45ba40ca..7f2fb0177 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
@@ -31,7 +31,7 @@
                     <li class="associated-persons">
                         <span class="item-key">{{ 'Participants'|trans ~ ' : ' }}</span>
                         {% for p in w.persons %}
-                            <span class="badge-person">{{ p|chill_entity_render_box }}</span>
+                            <span class="badge-person">{{ p|chill_entity_render_box({'addAgeBadge': true}) }}</span>
                         {% endfor %}
                     </li>
                 </ul>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
index 622318643..9bee504a9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
@@ -11,6 +11,7 @@
     * addCenter     bool
     * hLevel        integer
     * addDeath      bool
+    * addAgeBadge   bool
     * address_multiline     bool
     * customButtons [
         'before'    Twig\Markup, (injected with macro)
@@ -40,6 +41,11 @@
         {%- endfor -%}
         </span>
     {%- endif -%}
+    {%- if options['addAgeBadge'] -%}
+        {% if person.age is not null and person.deathDate is null %}
+        <span>({{- 'years_old'|trans({ 'age': person.age }) -}})</span>
+        {% endif %}
+    {% endif %}
 {% endmacro raw %}
 
 {% macro label(person, options) %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig
index 5b41a15e3..fdd1e0717 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig
@@ -14,6 +14,7 @@
                 'render': 'label',
                 'addLink': true,
                 'addInfo': true,
+                'addAgeBadge': true,
                 'customArea': {
                     'afterLabel': _self.addHolder(member.holder)
                 }
diff --git a/src/Bundle/ChillPersonBundle/Search/SearchHouseholdApiProvider.php b/src/Bundle/ChillPersonBundle/Search/SearchHouseholdApiProvider.php
new file mode 100644
index 000000000..6e7953b8e
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Search/SearchHouseholdApiProvider.php
@@ -0,0 +1,109 @@
+<?php
+
+/**
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Chill\PersonBundle\Search;
+
+use Chill\MainBundle\Search\SearchApiInterface;
+use Chill\MainBundle\Search\SearchApiQuery;
+use Chill\MainBundle\Search\Utils\ExtractDateFromPattern;
+use Chill\MainBundle\Search\Utils\ExtractPhonenumberFromPattern;
+use Chill\MainBundle\Security\Authorization\AuthorizationHelperInterface;
+use Chill\PersonBundle\Repository\Household\HouseholdRepository;
+use Chill\PersonBundle\Repository\PersonACLAwareRepositoryInterface;
+use Symfony\Component\Security\Core\Security;
+
+use function array_map;
+use function count;
+use function in_array;
+
+class SearchHouseholdApiProvider implements SearchApiInterface
+{
+    private AuthorizationHelperInterface $authorizationHelper;
+
+    private ExtractDateFromPattern $extractDateFromPattern;
+
+    private ExtractPhonenumberFromPattern $extractPhonenumberFromPattern;
+
+    private HouseholdRepository $householdRepository;
+
+    private PersonACLAwareRepositoryInterface $personACLAwareRepository;
+
+    private Security $security;
+
+    public function __construct(
+        HouseholdRepository $householdRepository,
+        PersonACLAwareRepositoryInterface $personACLAwareRepository,
+        Security $security,
+        AuthorizationHelperInterface $authorizationHelper,
+        ExtractDateFromPattern $extractDateFromPattern,
+        ExtractPhonenumberFromPattern $extractPhonenumberFromPattern
+    ) {
+        $this->householdRepository = $householdRepository;
+        $this->personACLAwareRepository = $personACLAwareRepository;
+        $this->security = $security;
+        $this->authorizationHelper = $authorizationHelper;
+        $this->extractDateFromPattern = $extractDateFromPattern;
+        $this->extractPhonenumberFromPattern = $extractPhonenumberFromPattern;
+    }
+
+    public function getResult(string $key, array $metadata, float $pertinence)
+    {
+        return $this->householdRepository->find($metadata['id']);
+    }
+
+    public function prepare(array $metadatas): void
+    {
+        $ids = array_map(static fn ($m) => $m['id'], $metadatas);
+
+        $this->householdRepository->findBy(['id' => $ids]);
+    }
+
+    public function provideQuery(string $pattern, array $parameters): SearchApiQuery
+    {
+        $datesResult = $this->extractDateFromPattern->extractDates($pattern);
+        $phoneResult = $this->extractPhonenumberFromPattern->extractPhonenumber($datesResult->getFilteredSubject());
+        $filtered = $phoneResult->getFilteredSubject();
+
+        $query = $this->personACLAwareRepository->buildAuthorizedQuery(
+            $filtered,
+            null,
+            null,
+            count($datesResult->getFound()) > 0 ? $datesResult->getFound()[0] : null,
+            null,
+            null,
+            null,
+            null,
+            count($phoneResult->getFound()) > 0 ? $phoneResult->getFound()[0] : null
+        );
+
+        $query
+            ->setDistinct(true, 'household_id')
+            ->setFromClause(
+                'view_chill_person_household_address AS vcpha ' .
+                'JOIN chill_person_person AS person ON vcpha.person_id = person.id'
+            )
+            ->setSelectKey('household')
+            ->andWhereClause('vcpha.validTo IS NULL', [])
+            ->setSelectJsonbMetadata("jsonb_build_object('id', vcpha.household_id)");
+
+        return $query;
+    }
+
+    public function supportsResult(string $key, array $metadatas): bool
+    {
+        return 'household' === $key;
+    }
+
+    public function supportsTypes(string $pattern, array $types, array $parameters): bool
+    {
+        return in_array('household', $types, true);
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php b/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php
index 568926f79..6288663e2 100644
--- a/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php
+++ b/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php
@@ -179,11 +179,13 @@ class PersonJsonNormalizer implements
         return [
             'type' => 'person',
             'id' => $person->getId(),
-            'text' => $this->render->renderString($person),
+            'text' => $this->render->renderString($person, ['addAge' => false]),
+            'textAge' => $this->render->renderString($person, ['addAge' => true]),
             'firstName' => $person->getFirstName(),
             'lastName' => $person->getLastName(),
             'birthdate' => $this->normalizer->normalize($person->getBirthdate(), $format, $context),
             'deathdate' => $this->normalizer->normalize($person->getDeathdate(), $format, $context),
+            'age' => $this->normalizer->normalize($person->getAge(), $format, $context),
             'centers' => $this->normalizer->normalize($this->centerResolverManager->resolveCenters($person), $format, $context),
             'phonenumber' => $person->getPhonenumber(),
             'mobilenumber' => $person->getMobilenumber(),
diff --git a/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php b/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php
index 6464500c2..0898bc32a 100644
--- a/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php
+++ b/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php
@@ -15,6 +15,7 @@ use Chill\MainBundle\Templating\Entity\AbstractChillEntityRender;
 use Chill\PersonBundle\Config\ConfigPersonAltNamesHelper;
 use Chill\PersonBundle\Entity\Person;
 use Symfony\Component\Templating\EngineInterface;
+use Symfony\Contracts\Translation\TranslatorInterface;
 
 use function array_key_exists;
 
@@ -27,12 +28,16 @@ class PersonRender extends AbstractChillEntityRender
 
     private EngineInterface $engine;
 
+    private TranslatorInterface $translator;
+
     public function __construct(
         ConfigPersonAltNamesHelper $configAltNamesHelper,
-        EngineInterface $engine
+        EngineInterface $engine,
+        TranslatorInterface $translator
     ) {
         $this->configAltNamesHelper = $configAltNamesHelper;
         $this->engine = $engine;
+        $this->translator = $translator;
     }
 
     /**
@@ -53,6 +58,7 @@ class PersonRender extends AbstractChillEntityRender
             'customButtons' => $options['customButtons'] ?? [],
             'customArea' => $options['customArea'] ?? [],
             'addDeath' => $options['addDeath'] ?? true,
+            'addAgeBadge' => $options['addAgeBadge'] ?? false,
         ];
 
         return
@@ -70,6 +76,13 @@ class PersonRender extends AbstractChillEntityRender
      */
     public function renderString($person, array $options): string
     {
+        $options = array_merge(['addAge' => true], $options);
+
+        if (null !== $person->getAge() && $person->getDeathDate() === null && $options['addAge']) {
+            return $person->getFirstName() . ' ' . $person->getLastName()
+            . $this->addAltNames($person, false) . ' (' . $this->translator->trans('years_old', ['age' => $person->getAge()]) . ')';
+        }
+
         return $person->getFirstName() . ' ' . $person->getLastName()
             . $this->addAltNames($person, false);
     }
diff --git a/src/Bundle/ChillPersonBundle/config/services/search.yaml b/src/Bundle/ChillPersonBundle/config/services/search.yaml
index 5428c8105..d700eef19 100644
--- a/src/Bundle/ChillPersonBundle/config/services/search.yaml
+++ b/src/Bundle/ChillPersonBundle/config/services/search.yaml
@@ -11,3 +11,7 @@ services:
     Chill\PersonBundle\Search\SearchPersonApiProvider:
         autowire: true
         autoconfigure: true
+
+    Chill\PersonBundle\Search\SearchHouseholdApiProvider:
+        autowire: true
+        autoconfigure: true