diff --git a/src/Bundle/ChillPersonBundle/Entity/SocialWork/SocialIssue.php b/src/Bundle/ChillPersonBundle/Entity/SocialWork/SocialIssue.php
index 2b6df9be2..6b2152cdf 100644
--- a/src/Bundle/ChillPersonBundle/Entity/SocialWork/SocialIssue.php
+++ b/src/Bundle/ChillPersonBundle/Entity/SocialWork/SocialIssue.php
@@ -4,10 +4,15 @@ namespace Chill\PersonBundle\Entity\SocialWork;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Groups;
+use Symfony\Component\Serializer\Annotation\DiscriminatorMap;
 
 /**
  * @ORM\Entity
  * @ORM\Table(name="chill_person_social_issue")
+ * @DiscriminatorMap(typeProperty="type", mapping={
+ *   "social_issue"=SocialIssue::class
+ * })
  */
 class SocialIssue
 {
@@ -35,6 +40,7 @@ class SocialIssue
 
     /**
      * @ORM\Column(type="json")
+     * @Groups({"read"})
      */
     private $title = [];
 
@@ -59,6 +65,11 @@ class SocialIssue
         return $this->parent;
     }
 
+    public function hasParent(): bool
+    {
+        return $this->parent !== null;
+    }
+
     public function setParent(?self $parent): self
     {
         $this->parent = $parent;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss
index 46422d994..7d61483db 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss
@@ -6,13 +6,6 @@
       padding-bottom: 1em;
     }
 
-    &:nth-of-type(odd) {
-      //background-color: var(--chill-light-gray);
-    }
-    &:nth-of-type(even) {
-      //background-color: var(--chill-dark-gray);
-    }
-
     .chill-entity__person {
       .chill-entity__person__first-name,
       .chill-entity__person__last-name {
@@ -23,14 +16,39 @@
 
     & > div {
       display: flex;
-      flex-direction: row;
+    }
+    @media screen and (min-width: 720px) {
+      & > div {
+        flex-direction: row;
 
-      .person-list--with-period__item__box-where {
-        align-self: flex-end;
-        margin-left: auto;
-        width: 33%;
+        .person-list--with-period__item__box-where {
+          align-self: flex-end;
+          margin-left: auto;
+          width: 33%;
 
-        text-align: right;
+          text-align: right;
+        }
+      }
+    }
+
+    @media screen and (max-width: 720px) {
+      & > div {
+        flex-direction: column;
+      }
+    }
+
+    @media screen and (max-width: 460px) {
+      .person-list--with-period__item__box-where__center {
+        display: none;
+      }
+      .chill_address {
+        .street {
+          display: none;
+        }
+
+        .country {
+          display: none;
+        }
       }
     }
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
index eeb3c4712..2db894e3c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
@@ -1,3 +1,13 @@
+{% set reversed_parents = parents|reverse %}
 <span class="chill-entity chill-entity__social-issue">
-
+  <span class="badge badge-primary">
+    {%- for p in reversed_parents %}
+    <span class="chill-entity__social-issue__parent--{{ loop.revindex0 }}">
+      {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
+    </span>
+    {%- endfor -%}
+    <span class="chill-entity__social-issue__child">
+      {{ socialIssue.title|localize_translatable_string }}
+    </span>
+  </span>
 </span>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
index ce5ee2beb..da571d173 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
@@ -44,7 +44,7 @@
         <div class="person-list--with-period__item__box-person">
           <div>
             <span>{{ person|chill_entity_render_box({'addLink': true}) }}</span>
-            <span>{{ person.birthdate|format_date("medium") }}</span>
+            <span>{{ 'Born the %date%'|transchoice(person.genderNumeric, { '%date%': person.birthdate|format_date("medium") }) }}</span>
           </div>
           <div>
             <ul class="record_actions record_actions--left">
@@ -60,17 +60,17 @@
           </div>
         </div>
         <div class="person-list--with-period__item__box-where">
-          <span>{{ person.center }}</span>
+          <span class="person-list--with-period__item__box-where__center">{{ person.center }}</span>
             {% if person.getLastAddress is not null %}
             <span>{{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}</span>
             {% else %}
           <span>{{ 'No address'|trans }}</span>
           {% endif %}
           {% if person.mobilenumber is not empty %}
-             <span>{{ person.mobilenumber }}</span>
+          <span><i class="fa fa-mobile"></i> <a href="tel:{{ person.mobilenumber }}">{{ person.mobilenumber|chill_format_phonenumber }}</a></span>
           {% endif %}
           {% if person.phonenumber is not empty %}
-             <span>{{ person.phonenumber }}</span>
+          <span><i class="fa fa-phone"></i> <a href="tel:{{ person.phonenumber }}">{{ person.phonenumber|chill_format_phonenumber }}</a></span>
           {% endif %}
           <span>
         </div>
diff --git a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
index f7b0da53c..1923325f9 100644
--- a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
+++ b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
@@ -5,10 +5,12 @@ namespace Chill\PersonBundle\Templating\Entity;
 use Chill\MainBundle\Templating\Entity\ChillEntityRenderInterface;
 use Chill\PersonBundle\Entity\SocialWork\SocialIssue;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
+use Symfony\Component\Templating\EngineInterface;
 
 class SocialIssueRender implements ChillEntityRenderInterface
 {
     private TranslatableStringHelper $translatableStringHelper;
+    private EngineInterface $engine;
 
     public const SEPARATOR_KEY = 'default.separator';
 
@@ -16,9 +18,10 @@ class SocialIssueRender implements ChillEntityRenderInterface
        self::SEPARATOR_KEY => ' > ',
    ];
 
-    public function __construct(TranslatableStringHelper $translatableStringHelper)
+    public function __construct(TranslatableStringHelper $translatableStringHelper, EngineInterface $engine)
     {
         $this->translatableStringHelper = $translatableStringHelper;
+        $this->engine = $engine;
     }
 
     public function supports($entity, array $options): bool
@@ -42,9 +45,27 @@ class SocialIssueRender implements ChillEntityRenderInterface
 
         return $str;
     }
-    
-    public function renderBox($entity, array $options): string
+
+    protected function buildParents($socialIssue): array
     {
-        return "renderBox not implemented for social issue";
+        $parents = [];
+        while ($socialIssue->hasParent()) {
+            $socialIssue = $parents[] = $socialIssue->getParent();
+        }
+
+        return $parents;
+    } 
+    
+    public function renderBox($socialIssue, array $options): string
+    {
+        $options = \array_merge(self::DEFAULT_ARGS, $options); 
+        // give some help to twig: an array of parents
+        $parents = $this->buildParents($socialIssue);
+
+        return $this->engine->render('@ChillPerson/Entity/social_issue.html.twig', [
+            'socialIssue' => $socialIssue,
+            'parents' => $parents,
+            'options' => $options
+        ]);
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/config/services/templating.yaml b/src/Bundle/ChillPersonBundle/config/services/templating.yaml
index 5715f344c..aa5dd677a 100644
--- a/src/Bundle/ChillPersonBundle/config/services/templating.yaml
+++ b/src/Bundle/ChillPersonBundle/config/services/templating.yaml
@@ -17,5 +17,6 @@ services:
     Chill\PersonBundle\Templating\Entity\SocialIssueRender:
         arguments:
             $translatableStringHelper: '@Chill\MainBundle\Templating\TranslatableStringHelper'
+            $engine: '@Symfony\Component\Templating\EngineInterface'
         tags:
             - 'chill.render_entity'
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index ab3a5bfe6..fdaf7768b 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -46,7 +46,7 @@ Add new phone: Ajouter un numéro de téléphone
 Remove phone: Supprimer
 'Notes on contact information': 'Remarques sur les informations de contact'
 'Remarks': 'Remarques'
-'{0} Born the %date% | {1} Born the %date%': '{0} Né le %date% | {1} Née le %date%'
+'Born the %date%': '{0} Né le %date% | {1} Née le %date%'
 'Spoken languages': 'Langues parlées'
 'Unknown spoken languages': 'Langues parlées inconnues'
 Male: Homme
@@ -125,6 +125,8 @@ Reset: 'Remise à zéro'
 'Person search results': 'Recherche de personnes'
 Person search results by phonenumber: Recherche de personnes par numéro de téléphone
 'Search within persons': 'Recherche parmi les personnes'
+Open person file: Ouvrir le dossier
+and %number% other: '{0} et aucun autre| {1} et une autre |]1, Inf] et %number% autres'
 '%total% persons matching the search pattern:': '{0} Aucune personne ne correspond aux termes de recherche : | {1} Une personne a été trouvée par la recherche : | ]1,Inf] %total% personnes correspondent aux termes de recherche :'
 'Last opening since %last_opening%': 'Dernière ouverture le %last_opening%.'
 'Person accompanying period - %name%': 'Historique du dossier - %name%'