diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8a458ca3..fddef86b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,9 @@ and this project adheres to
 * [activity] create work if a work with same social action is not associated to the activity
 * [visgraph] improve and fix bugs on vis-network relationship graph
 * [bugfix] posting of birth- and deathdate through api fixed.
+* [suggestions] improve suggestions lists
+* [badge-entity] design coherency between badge-person and 3 kinds of badge-thirdparty
+* [AddPersons] suggestions row are clickable, not only checkbox
 
 ### Test release 2021-11-19 - bis
 
diff --git a/CONVENTIONS.md b/CONVENTIONS.md
index 2543e54b7..717249a83 100644
--- a/CONVENTIONS.md
+++ b/CONVENTIONS.md
@@ -409,3 +409,4 @@ Créer un titre enlevable (avec une croix rouge cliquable, l'ancre a est vide)
     <a></a>
 </div>
 ```
+Les classes `cols` ou `inline` peuvent être ajoutées à côté de `list-suggest` pour modifier la disposition de la liste.
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 853b43eb0..49b53c8cb 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -11,7 +11,7 @@
             </persons-bloc>
         </div>
         <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
-            <ul class="list-suggest add-items">
+            <ul class="list-suggest add-items inline">
                 <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
                     <span>{{ p.text }}</span>
                 </li>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
index 5a7c084a8..4018e656b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@@ -25,6 +25,15 @@ ul.list-suggest {
         text-align: start;
         margin-bottom: 3px;
     }
+    &.cols {
+        columns: 3;
+    }
+    &.inline {
+        li {
+            display: inline-block;
+            margin-right: 0.2em;
+        }
+    }
     &.add-items {
         li {
             cursor: pointer;
@@ -34,6 +43,9 @@ ul.list-suggest {
                 content: "\f067"; // fa-plus
                 color: var(--bs-success);
             }
+            & span:hover {
+                color: $chill-l-gray;
+            }
         }
     }
     &.remove-items {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
new file mode 100644
index 000000000..3e2d8ab97
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -0,0 +1,42 @@
+<template>
+
+    <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
+        {{ $t('renderbox.person') }}
+    </span>
+
+    <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
+
+        <template v-if="options.displayLong !== true">
+            {{ $t('renderbox.type.thirdparty')}}
+        </template>
+
+        <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('tparty.child')}}</span>
+            <span v-else-if="entity.kind === 'company'">{{ $t('tparty.company')}}</span>
+            <span v-else>{{ $t('tparty.contact')}}</span>
+        </template>
+    </span>
+
+</template>
+
+<script>
+export default {
+    name: "BadgeEntity",
+    props: ['options', 'entity'],
+    i18n: {
+        messages: {
+            fr: {
+                tparty: {
+                    child: "Personne de contact",
+                    company: "Personne morale",
+                    contact: "Personne physique",
+                }
+            }
+        }
+    }
+}
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig b/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
index f9924eb11..515685b9e 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
@@ -1,5 +1,5 @@
 {{ form_start(form) }}
-    <div class="chill_filter_order container">
+    <div class="chill_filter_order container my-4">
         <div class="row">
             {% if form.vars.has_search_box %}
               <div class="col-md-12">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index 39dbb4e55..acf19205f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -162,6 +162,13 @@ div.activity-list {
 }
 
 /*
+* Specific badge rounded-pill
 */
-
+.badge {
+    &.bg-person {
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-green;
+    }
+}
 
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 26e74e944..3ea64bd67 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -48,7 +48,7 @@
    </div>
 
    <div v-if="suggestedPersons.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
              <span>{{ p.text }}</span>
           </li>
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 dad42a504..aa05fe872 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -20,7 +20,7 @@
       </VueMultiselect>
 
       <template v-if="referrersSuggested.length > 0">
-         <ul class="list-suggest add-items">
+         <ul class="list-suggest add-items inline">
             <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
                <span>
                   <user-render-box-badge :user="u"></user-render-box-badge>
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 8b72a9aa2..8993ddb8d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -134,7 +134,7 @@
    </div>
 
    <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
              <span>{{ p.text }}</span>
           </li>
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 87021850e..599f99b21 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -20,7 +20,7 @@
    </div>
 
    <div v-if="suggestedEntities.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
              <span>{{ p.text }}</span>
           </li>
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 f1c08b477..e17555c6a 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
@@ -2,33 +2,81 @@
    <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 }"
-      >
+      :options="{
+         addInfo : true,
+         addId : false,
+         addEntity: true,
+         addLink: false,
+         addAltNames: true,
+         addAge : false,
+         hLevel : 3,
+         isConfidential : true
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
-            <!--
-            <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
-            -->
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </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 }"
-      >
+      :options="{
+         addLink : false,
+         addId : false,
+         addEntity: true,
+         addInfo: false,
+         //addComment: true,
+         hLevel: 3
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </template>
-
    </third-party-render-box>
 </template>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
index 52eac5ea6..5b098846b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -15,7 +15,12 @@
   <confirmation v-if="step === 'confirm'"></confirmation>
 
   <ul class="record_actions sticky-form-buttons">
-    <li class="cancel" v-if="step !== 'concerned' || hasReturnPath">
+    <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">
         {{ $t('household_members_editor.app.cancel') }}
       </button>
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 1f76c8a5b..15b8a4346 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-table" v-if="hasHousehold">
+  <div class="flex-table mb-5" v-if="hasHousehold">
     <div class="item-bloc">
       <household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
     </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
index 7dfff9794..527f3a7da 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -51,6 +51,7 @@ const appMessages = {
        },
       app: {
        next: 'Suivant',
+       previous: 'Précédent',
        cancel: 'Annuler',
        save: 'Enregistrer',
         steps: {
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 e3b4901d7..ce2f52a50 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -1,21 +1,22 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
-         
+
+      <label>
          <div>
-            <input 
-               v-bind:type="type" 
+            <input
+               v-bind:type="type"
                v-model="selected"
                name="item"
                v-bind:id="item"
                v-bind:value="setValueByType(item, type)" />
          </div>
-            
-         <suggestion-person 
+
+         <suggestion-person
             v-if="item.result.type === 'person'"
             v-bind:item="item">
          </suggestion-person>
-         
-         <suggestion-third-party 
+
+         <suggestion-third-party
             v-if="item.result.type === 'thirdparty'"
             v-bind:item="item">
          </suggestion-third-party>
@@ -24,6 +25,7 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+      </label>
 
    </div>
 </template>
@@ -41,7 +43,7 @@ export default {
       SuggestionUser,
    },
    props: [
-      'item', 
+      'item',
       'search',
       'type'
    ],
@@ -69,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-   div.results {   
+   div.results {
       div.list-item {
          padding: 0.4em 0.8em;
          display: flex;
@@ -78,32 +80,36 @@ export default {
             background-color: #ececec;
             border-bottom: 1px dotted #8b8b8b;
          }
-         div.container {
-            & > input {
-               margin-right: 0.8em;
+         label {
+            display: inline-flex;
+            width: 100%;
+            div.container {
+               & > input {
+                  margin-right: 0.8em;
+               }
+               span:not(.name) {
+                  margin-left: 0.5em;
+                  opacity: 0.5;
+                  font-size: 90%;
+                  font-style: italic;
+               }
             }
-            span:not(.name) {
-               margin-left: 0.5em;
-               opacity: 0.5;
-               font-size: 90%;
-               font-style: italic;
+            div.right_actions {
+               margin: 0 0 0 auto;
+               display: flex;
+               align-items: flex-end;
+               & > * {
+                  margin-left: 0.5em;
+                  align-self: baseline;
+               }
+
+               a.btn {
+                  border: 1px solid lightgrey;
+                  font-size: 70%;
+                  padding: 4px;
+               }
             }
          }
-         div.right_actions {
-            margin: 0 0 0 auto;
-            display: flex;
-            align-items: flex-end;
-            & > * {
-               margin-left: 0.5em;
-               align-self: baseline;
-            }
-            
-            a.btn {
-               border: 1px solid lightgrey;
-               font-size: 70%;
-               padding: 4px;
-            } 
-         }
       }
    }
 </style>
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 a6b4695f9..8bd4887cc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -1,6 +1,5 @@
 <template>
    <div class="container">
-   
       <span class="name">
          {{ item.result.text }}
       </span>
@@ -8,32 +7,33 @@
          {{ $d(item.result.birthdate.datetime, 'short') }}
        </span>
       <span class="location" v-if="hasAddress">
-         {{ item.result.current_household_address.text }} - 
+         {{ item.result.current_household_address.text }} -
          {{ item.result.current_household_address.postcode.name }}
       </span>
-      
    </div>
+
    <div class="right_actions">
-      
-      <span class="badge rounded-pill bg-secondary" :title="item.key">
-         {{ $t('item.type_person') }}
-      </span>
+      <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>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
+     BadgeEntity
    },
    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 de24c6fbf..5a367a474 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -17,33 +17,23 @@
         </span>
       </div>
     </div>
+
     <div class="right_actions">
-
-     <span class="badge bg-thirdparty-child" v-if="item.result.kind == 'child'">
-        {{ $t('thirdparty.child')}}
-     </span>
-      <span class="badge bg-thirdparty-company" v-else-if="item.result.kind == 'company'">
-       {{ $t('thirdparty.company')}}
-      </span>
-      <span class="badge bg-thirdparty-contact" v-else="item.result.kind == 'contact'">
-        {{ $t('thirdparty.contact')}}
-      </span>
-
-      <span class="badge rounded-pill bg-secondary" :title="item.key">
-         {{ $t('item.type_thirdparty') }}
-      </span>
-
-      <on-the-fly
-          type="thirdparty"
-          v-bind:id="item.result.id"
-          action="show">
-      </on-the-fly>
-
+       <badge-entity
+         :entity="item.result"
+         :options="{ displayLong: true }">
+       </badge-entity>
+       <on-the-fly
+           type="thirdparty"
+           v-bind:id="item.result.id"
+           action="show">
+       </on-the-fly>
     </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 const i18n = {
   messages: {
@@ -60,7 +50,8 @@ const i18n = {
 export default {
    name: 'SuggestionThirdParty',
    components: {
-      OnTheFly
+      OnTheFly,
+      BadgeEntity
    },
    props: ['item'],
    i18n,
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 adbf3494d..ac4ea5ea5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -24,7 +24,11 @@
                    </span>
 
                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
+
+                   <badge-entity v-if="options.addEntity === true"
+                      :entity="person"
+                      :options="{ displayLong: options.entityDisplayLong }">
+                   </badge-entity>
 
                 </div>
 
@@ -140,12 +144,14 @@
 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';
 
 export default {
     name: "PersonRenderBox",
     components: {
         AddressRenderBox,
-        Confidential
+        Confidential,
+        BadgeEntity
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/members_editor.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/members_editor.html.twig
index 301054666..ee578203a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/members_editor.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/members_editor.html.twig
@@ -4,7 +4,7 @@
 {% block title 'household.Edit household members'|trans  %}
 
 {% block content %}
-<div class="household-members">
+<div class="col-md-10 col-xxl household-members">
 
     <h1>{{ block('title') }}</h1>
     <div id="household_members_editor"></div>
diff --git a/src/Bundle/ChillThirdPartyBundle/Entity/ThirdParty.php b/src/Bundle/ChillThirdPartyBundle/Entity/ThirdParty.php
index fd6f013df..069dba9d8 100644
--- a/src/Bundle/ChillThirdPartyBundle/Entity/ThirdParty.php
+++ b/src/Bundle/ChillThirdPartyBundle/Entity/ThirdParty.php
@@ -128,6 +128,7 @@ class ThirdParty implements TrackCreationInterface, TrackUpdateInterface
 
     /**
      * @ORM\Column(name="comment", type="text", nullable=true)
+     * @Groups({"read"})
      */
     private ?string $comment = null;
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
index 9762a898a..eede1a84d 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
@@ -1,16 +1,23 @@
 @import 'ChillMainAssets/module/bootstrap/shared';
 
-.badge {
-    &.bg-thirdparty-company {
-        //@extend .bg-info;
-        background-color: $yellow;
-    }
-    &.bg-thirdparty-child {
-        //@extend .bg-chill-blue;
-        background-color: $chill-blue;
-    }
-    &.bg-thirdparty-contact {
-        //@extedn .bg-secondary;
-        background-color: $secondary;
+/// Specific badge rounded-pill
+.badge.rounded-pill {
+    &.bg-thirdparty {
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-pink;
+    }
+}
+
+/// force first column width in list
+div.thirdparty-list {
+    div.flex-table {
+        div.item-bloc {
+            div.item-row {
+                div.item-col:first-child {
+                    flex-basis: 25%;
+                }
+            }
+        }
     }
 }
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 1504bdfb9..47565a427 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -7,30 +7,19 @@
             <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">{{ thirdparty.text }}</span>
+                    <span class="name" v-else>{{ thirdparty.text }}</span>
 
-                    <span class="badge bg-thirdparty-child" v-if="thirdparty.kind == 'child'">
-                        {{ $t('thirdparty.child')}}
-                    </span>
-                    <span class="badge bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
-                       {{ $t('thirdparty.company')}}
-                    </span>
-                    <span class="badge bg-thirdparty-contact" v-else>
-                        {{ $t('thirdparty.contact')}}
+                    <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>
-                    <span v-if="options.addEntity ==  true && thirdparty.type === 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
-
-                </div>
-
-                <div v-if="hasParent">
-                    <span class="name tparty-parent">
-                        > {{ thirdparty.parent.text }}
-                    </span>
+                    <badge-entity v-if="options.addEntity === true"
+                        :entity="thirdparty"
+                        :options="{ displayLong: options.entityDisplayLong }">
+                    </badge-entity>
                 </div>
 
                 <p v-if="this.options.addInfo === true" class="moreinfo">
@@ -38,13 +27,38 @@
             </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">
+                     <li v-if="hasParent">
+                         <i class="fa fa-li fa-hand-o-right"></i>
+                         <b class="me-2">{{ $t('child_of') }}</b>
+                         <span class="chill-entity badge-thirdparty">{{ thirdparty.parent.text }}</span>
+                         <!-- console: [Vue warn]: Failed to resolve component: on-the-fly ...
+                             <on-the-fly type="thirdparty" action="show" :id="thirdparty.parent.id"
+                                 :buttonText="thirdparty.parent.text" :displayBadge="'true' === 'true'"
+                             ></on-the-fly>
+                         -->
+                     </li>
+                     <!-- TODO hasChildren
+                     <li v-if="hasChildren">
+                         <i class="fa fa-li fa-hand-o-right"></i>
+                         <b class="me-2">{{ $t('children') }}</b>
+                         <span v-for="child in thirdparty.activeChildren">
+                             <on-the-fly type="thirdparty"
+                                 action="show"
+                                 :id="child.id"
+                                 :buttonText="child.text"
+                                 displayBadge="'true' === 'true'">
+                             </on-the-fly>
+                         </span>
+                     </li>
+                     -->
+                 </ul>
                  <confidential v-if="thirdparty.contactDataAnonymous">
                     <template v-slot:confidential-content>
                         <ul class="list-content fa-ul">
@@ -62,21 +76,24 @@
                             </li>
                         </ul>
                     </template>
-                </confidential>
-                <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>
-                    </li>
-                    <li v-if="thirdparty.phonenumber">
-                        <i class="fa fa-li fa-mobile"></i>
-                        <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
-                    </li>
-                    <li v-if="thirdparty.email">
-                        <i class="fa fa-li fa-envelope-o"></i>
-                        <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                    </li>
-                </ul>
+                 </confidential>
+                 <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>
+                     </li>
+                     <li v-if="thirdparty.phonenumber">
+                         <i class="fa fa-li fa-mobile"></i>
+                         <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
+                     </li>
+                     <li v-if="thirdparty.email">
+                         <i class="fa fa-li fa-envelope-o"></i>
+                         <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                     </li>
+                 </ul>
+                  <div v-if="options.addComment && !thirdparty.contactDataAnonymous && thirdparty.comment">
+                      <blockquote class="chill-user-quote">{{ thirdparty.comment }}</blockquote>
+                  </div>
               </div>
            </div>
         </div>
@@ -91,25 +108,24 @@
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
-
-const i18n = {
-    messages: {
-        fr: {
-            tparty: {
-                contact: "Personne physique",
-                company: "Personne morale"
-            }
-        }
-    }
-};
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+//import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 
 export default {
     name: "ThirdPartyRenderBox",
     components: {
         AddressRenderBox,
-        Confidential
+        Confidential,
+        BadgeEntity,
+        //OnTheFly
+    },
+    i18n: {
+        messages: {
+            fr: {
+                children: "Personnes de contact: ",
+                child_of: "Contact de: ",
+        }}
     },
-    i18n,
     props: ['thirdparty', 'options'],
     computed: {
         isMultiline: function() {
@@ -120,8 +136,13 @@ export default {
             }
         },
         hasParent() {
-            return !(this.$props.thirdparty.parent === null || this.$props.thirdparty.parent === undefined);
-        }
+            return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
+        },
+        /* TODO need backend normalizer to serve children without circular reference
+        hasChildren() {
+            //console.log(this.thirdparty.activeChildren.length > 0)
+            return false
+        } */
     }
 }
 </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 5b605c748..2d540530d 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -5,7 +5,8 @@
             :thirdparty="thirdparty"
             :options="{
                addInfo: true,
-               addEntity: false,
+               addEntity: true,
+               entityDisplayLong: true,
                addAltNames: true,
                addId: true,
                addLink: false,
@@ -13,6 +14,7 @@
                hLevel: 3,
                addCenter: true,
                addNoData: true,
+               addComment: true,
                isMultiline: true
             }"
          ></third-party-render-box>
@@ -24,7 +26,7 @@
            <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">
-                   <span class="badge bg-thirdparty-company" style="padding-top: 0;">
+                   <span class="badge rounded-pill bg-thirdparty-company" style="padding-top: 0;">
                        {{ $t('tparty.company')}}
                    </span>
                </label>
@@ -32,7 +34,7 @@
            <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">
-                   <span class="badge bg-thirdparty-contact" style="padding-top: 0;">
+                   <span class="badge rounded-pill bg-thirdparty-contact" style="padding-top: 0;">
                        {{ $t('tparty.contact')}}
                    </span>
                </label>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
index 755d4f2eb..4f1e739a8 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
@@ -82,7 +82,19 @@
     <div class="item-row entity-bloc">
         <div class="item-col">
             {{ _self.label(thirdparty, options) }}
-             <span class="badge bg-thirdparty-{{ thirdparty.kind }}">{{ ('thirdparty.' ~ thirdparty.kind)|trans }}</span>
+            {% if thirdparty.kind == 'child' %}
+                <span class="badge rounded-pill bg-thirdparty">
+                    <i class="fa fa-fw fa-user"></i>{{ 'thirdparty.child'|trans }}
+                </span>
+            {% elseif thirdparty.kind == 'company' %}
+                <span class="badge rounded-pill bg-thirdparty">
+                    <i class="fa fa-fw fa-hospital-o"></i>{{ 'thirdparty.company'|trans }}
+                </span>
+            {% else %}
+                <span class="badge rounded-pill bg-thirdparty">
+                    <i class="fa fa-fw fa-user-md"></i>{{ 'thirdparty.contact'|trans }}
+                </span>
+            {% endif %}
         </div>
         <div class="item-col">
         {% if options['isConfidential'] %}
@@ -160,26 +172,33 @@
     </div>
     {% if options['showContacts'] and thirdparty.activeChildren|length > 0 %}
     <div class="item-row">
-        {{ 'thirdparty.Children'|trans }}&nbsp;:
-        {% for c in thirdparty.activeChildren %}
-            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                targetEntity: { name: 'thirdparty', id: c.id },
-                action: 'show',
-                displayBadge: true,
-                buttonText: c|chill_entity_render_string
-            } %}
-        {% endfor %}
+        <div class="item-col"></div>
+        <div class="item-col">
+            <h5 class="me-2">{{ 'thirdparty.Children'|trans ~ ': ' }}</h5>
+            {% for c in thirdparty.activeChildren %}
+                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                    targetEntity: { name: 'thirdparty', id: c.id },
+                    action: 'show',
+                    displayBadge: true,
+                    buttonText: c|chill_entity_render_string
+                } %}
+            {% endfor %}
+        </div>
     </div>
     {% endif %}
+
     {% if options['showParent'] and thirdparty.isChild %}
         <div class="item-row">
-            {{ 'thirdparty.Contact of'|trans }}&nbsp;:
-            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                targetEntity: { name: 'thirdparty', id: thirdparty.parent.id },
-                action: 'show',
-                displayBadge: true,
-                buttonText: thirdparty.parent|chill_entity_render_string
-            } %}
+            <div class="item-col"></div>
+            <div class="item-col">
+                <h5 class="me-2">{{ 'thirdparty.Contact of'|trans ~ ': ' }}</h5>
+                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                    targetEntity: { name: 'thirdparty', id: thirdparty.parent.id },
+                    action: 'show',
+                    displayBadge: true,
+                    buttonText: thirdparty.parent|chill_entity_render_string
+                } %}
+            </div>
         </div>
     {% endif %}
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/index.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/index.html.twig
index 72e20fa87..cb9c4bcf5 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/index.html.twig
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/index.html.twig
@@ -6,6 +6,26 @@
 
 {% block content %}
     {% embed '@ChillMain/CRUD/_index.html.twig' %}
+
+        {% macro rowCustomButtons(tp) %}
+            {% if is_granted('CHILL_3PARTY_3PARTY_UPDATE', tp) %}
+                <li>
+                    <a href="{{ chill_path_add_return_path('chill_crud_3party_3party_edit',
+                        { 'id': (tp.isParent ? tp.id : tp.parent.id) }) }}"
+                       title="{{ 'Edit'|trans }}"
+                       class="btn btn-sm btn-update"></a>
+                </li>
+            {% endif %}
+            {% if is_granted('CHILL_3PARTY_3PARTY_SHOW', tp) %}
+                <li>
+                    <a href="{{ chill_path_add_return_path('chill_crud_3party_3party_view',
+                        { 'id': (tp.isParent ? tp.id : tp.parent.id) }) }}"
+                       title="{{ 'Show'|trans }}"
+                       class="btn btn-sm btn-show"></a>
+                </li>
+            {% endif %}
+        {% endmacro %}
+
         {% block index_header %}
             <h1>{{ 'List of third parties'|trans  }}</h1>
         {% endblock %}
@@ -13,37 +33,25 @@
         {% block table_entities %}
             <div class="thirdparty-list my-5">
                 <div class="row justify-content-center">
-                    <div>
 
-                        <label class="counter">
-                            <span>{{ paginator.totalItems }}</span> {{ 'third parties'|trans }}
-                        </label>
+                    <label class="counter text-end">
+                        <span>{{ paginator.totalItems }}</span> {{ 'third parties'|trans }}
+                    </label>
 
-                        <div class="flex-table">
-                            {% for tp in third_parties %}
-                                <div class="item-bloc">
-                                    {{ tp|chill_entity_render_box({'render': 'bloc', 'addLink': false, 'showContacts': true, 'isConfidential': (tp.contactDataAnonymous ? true : false) }) }}
-                                    <div class="item-row separator">
-                                        <ul class="record_actions">
-                                            {% if is_granted('CHILL_3PARTY_3PARTY_UPDATE', tp) %}
-                                                <li>
-                                                    <a href="{{ chill_path_add_return_path('chill_crud_3party_3party_edit',
-                                                        { 'id': (tp.isParent ? tp.id : tp.parent.id) }) }}" class="btn btn-sm btn-update"></a>
-                                                </li>
-                                            {% endif %}
-                                            {% if is_granted('CHILL_3PARTY_3PARTY_SHOW', tp) %}
-                                                <li>
-                                                    <a href="{{ chill_path_add_return_path('chill_crud_3party_3party_view',
-                                                        { 'id': (tp.isParent ? tp.id : tp.parent.id) }) }}" class="btn btn-sm btn-show"></a>
-                                                </li>
-                                            {% endif %}
-                                        </ul>
-
-                                    </div>
-                                </div>
-                            {% endfor %}
-                        </div>
+                    <div class="flex-table">
+                        {% for tp in third_parties %}
+                            <div class="item-bloc">
+                                {{ tp|chill_entity_render_box({
+                                    'render': 'bloc',
+                                    'showContacts': true,
+                                    'addLink': true,
+                                    'customButtons': { 'replace': _self.rowCustomButtons(tp) },
+                                    'isConfidential': (tp.contactDataAnonymous ? true : false)
+                                }) }}
+                            </div>
+                        {% endfor %}
                     </div>
+
                 </div>
             </div>
         {% endblock %}
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/view.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/view.html.twig
index 6b6395b19..06c5e1391 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/view.html.twig
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/view.html.twig
@@ -12,10 +12,10 @@
             {% block crud_content_header %}
                 <h1>
                     {{ title_ }}
-                    <span class="badge bg-{{ thirdParty.active ? 'success' : 'danger' }}"
+                    <span class="badge bg-{{ thirdParty.active ? 'success' : 'danger' }} float-end"
                           title="{{ (thirdParty.active ? 'shown to users' : 'not shown to users')|trans }}">
-                    {{ (thirdParty.active ? 'Active' : 'Inactive')|trans }}
-                </span>
+                        {{ (thirdParty.active ? 'Active' : 'Inactive')|trans }}
+                    </span>
                 </h1>
             {% endblock %}
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Serializer/Normalizer/ThirdPartyNormalizer.php b/src/Bundle/ChillThirdPartyBundle/Serializer/Normalizer/ThirdPartyNormalizer.php
index b6e98b6f0..91592ffde 100644
--- a/src/Bundle/ChillThirdPartyBundle/Serializer/Normalizer/ThirdPartyNormalizer.php
+++ b/src/Bundle/ChillThirdPartyBundle/Serializer/Normalizer/ThirdPartyNormalizer.php
@@ -45,6 +45,7 @@ class ThirdPartyNormalizer implements NormalizerAwareInterface, NormalizerInterf
             'parent' => $this->normalizer->normalize($thirdParty->getParent(), $format, $context),
             'civility' => $this->normalizer->normalize($thirdParty->getCivility(), $format, $context),
             'contactDataAnonymous' => $thirdParty->isContactDataAnonymous(),
+            'comment' => $thirdParty->getComment(),
         ];
     }