diff --git a/src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss
index 92a84cfbb..a18037cbd 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss
+++ b/src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss
@@ -33,3 +33,64 @@ div.flex-bloc.concerned-groups {
       flex-basis: 33%; //3 blocs
    }
 }
+
+// exceptions for flex-table in list-records
+div.flex-table.list-records {
+   div.item-bloc {
+      div.item-row.main {
+         div.item-col {
+            &:first-child {
+               flex-basis: 27%;
+            }
+            ul.list-content {
+               li.social-issues, li.social-actions {
+                  .badge-primary {
+                     font-variant: small-caps;
+                     font-weight: bold;
+                     font-size: 88%;
+                     margin-bottom: 0.2em;
+                  }
+               }
+               li.social-issues .badge-primary {
+                  background-color: var(--chill-orange);
+               }
+               li.social-actions .badge-primary {
+                  background-color: var(--chill-green);
+               }
+            }
+         }
+      }
+      div.item-row.details {
+         flex-direction: row;
+         & > div.item-col {
+            justify-content: flex-start;
+            align-self: center;
+            &:nth-child(1) {
+               flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
+            }
+            &:nth-child(2) {
+               flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
+            }
+         }
+         div.concerned-groups {
+            font-size: 85%;
+            h4 {
+               text-transform: uppercase;
+            }
+         }
+      }
+      ul.list-content {
+         list-style-type: none;
+         padding-left: 1em;
+         margin: 0 0;
+         li {
+            margin-bottom: 0.2em;
+         }
+      }
+   }
+   div.duration {
+      font-size: smaller;
+      padding-left: 1em;
+      margin-top: 1em;
+   }
+}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig
index f39eafd08..a7acc7491 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig
@@ -46,14 +46,27 @@
     ] %}
 {% endif %}
 
-<div class="flex-bloc concerned-groups {{ context }}">
+{% set level1 = (with_display == 'bloc') ? context ~ ' flex-bloc ' : '' %}
+{% set level2 = (with_display == 'bloc') ? 'item-bloc ' : '' %}
+{% set level3 = (with_display == 'bloc') ? 'item-row '  : '' %}
+{% set level4 = (with_display == 'bloc') ? 'item-col '  : '' %}
+
+<div class="{{ level1 }}concerned-groups">
+
     {% for bloc in blocs %}
-    <div class="item-bloc">
-        <div class="item-row">
-            <div class="item-col">
-                <h4>{{ bloc.title }}</h4>
+    <div class="{{ level2 }}">
+        <div class="{{ level3 }}">
+            <div class="{{ level4 }}">
+                
+                {% if with_display == 'bloc' or bloc.items|length > 0 %}
+                    <h4>{{ bloc.title }}</h4>
+                {% endif %}
+            
+                {% if with_display == 'bloc' %}
             </div>
-            <div class="item-col">
+            <div class="{{ level4 }}">
+                {% endif %}
+                
                 <ul class="list-content">
                     {% for item in bloc.items %}
                     <li>
@@ -69,4 +82,5 @@
         </div>
     </div>
     {% endfor %}
+    
 </div>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
index de30d5366..dbe84a771 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
@@ -16,7 +16,9 @@
         <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="sc-button bt-create button-small"></a>
     </p>
 {% else %}
-<table class="records_list">
+
+<div class="flex-table list-records {{ context }}">
+    <!--
     <thead>
         <tr>
             <th class="chill-red">{{'Date' | trans }}</th>
@@ -26,48 +28,149 @@
             <th>&nbsp;</th>
         </tr>
     </thead>
-    <tbody>
+-->
     {% for activity in activities %}
-        <tr>
-            <td>{% if activity.date %}{{ activity.date|format_date('long') }}{% endif %}</td>
-            <td>{{ activity.durationTime|date('H:i') }}</td>
-            <td>
+        <div class="item-bloc">
+            <div class="item-row main">
+                <div class="item-col">
+                    
+                    {% if activity.date %}
+                        <h3>{{ activity.date|format_date('long') }}</h3>
+                    {% endif %}
+                    
+                    <div class="duration">
+                        <p>
+                            <i class="fa fa-fw fa-hourglass-end"></i>
+                            {{ activity.durationTime|date('H:i') }}
+                        </p>
+                        
+                        {% if activity.travelTime %}
+                        <p>
+                            <i class="fa fa-fw fa-car"></i>
+                            {{ activity.travelTime|date('H:i') }}
+                        </p>
+                        {% endif %}
+                    </div>
+                    
+                </div>
+                <div class="item-col">
+                    <ul class="list-content">
+                        
+                        {% if activity.user %}
+                        <li>
+                            <b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
+                        </li>
+                        {% endif %}
+                        
+                        <li>
+                            <b>{{ activity.type.name | localize_translatable_string }}</b>
+                            
+                            {% if activity.attendee is not null %}
+                                {% if activity.attendee %}
+                                    {{ '→ ' ~ 'present'|trans|capitalize }} 
+                                {% else %} 
+                                    {{ '→ ' ~ 'not present'|trans|capitalize }}
+                                {% endif %}
+                            {% endif %}
+                        </li>
+                        
+                        <li>
+                            <b>{{ 'location'|trans ~ ': ' }}</b>
+                            Domicile de l'usager
+                            {#
+                                {% if activity.location %}{{ activity.location }}{% endif %}
+                            #}
+                        </li>
+                        
+                        {%- if activity.reasons is defined -%}
+                        <li>
+                            {%- if activity.reasons is empty -%}
+                                <span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
+                            {%- else -%}
+                                {% for r in activity.reasons %}
+                                    {{ r|chill_entity_render_box }}
+                                {% endfor %}
+                            {%- endif -%}
+                        </li>
+                        {% endif %}
+
+                        {%- if activity.socialIssues is defined -%}
+                            <li class="social-issues">
+                                {%- if activity.socialIssues is empty -%}
+                                    <span class="chill-no-data-statement">{{ 'No social issues associated'|trans }}</span>
+                                {%- else -%}
+                                    {% for r in activity.socialIssues %}
+                                        <span class="badge badge-primary">
+                                            {% if r.parent %}
+                                                {{ r.parent.title|localize_translatable_string ~ ' > ' }}
+                                            {% endif %}
+                                            {{ r.title|localize_translatable_string }}
+                                        </span>
+                                    {% endfor %}
+                                {%- endif -%}
+                            </li>
+                        {% endif %}
+                        
+                        {%- if activity.socialActions is defined -%}
+                            <li class="social-actions">
+                                {%- if activity.socialActions is empty -%}
+                                    <span class="chill-no-data-statement">{{ 'No social actions associated'|trans }}</span>
+                                {%- else -%}
+                                    {% for r in activity.socialActions %}
+                                        <span class="badge badge-primary">{{ r.title|localize_translatable_string }}</span>
+                                    {% endfor %}
+                                {%- endif -%}
+                            </li>
+                        {% endif %}
+
+                        
+                    </ul>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-show "></a>
+                        </li>
+                        {# TOOD
+                        {% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
+                        #}
+                        <li>
+                            <a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-update "></a>
+                        </li>
+                        {# TOOD
+                        {% endif %}
+                        {% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
+                        #}
+                        <li>
+                            <a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="sc-button bt-delete "></a>
+                        </li>
+                        {#
+                        {% endif %}
+                        #}
+                    </ul>
+                </div>
+            </div>
+            
+            {%  
+                if activity.comment.comment is not empty 
+                or activity.persons|length > 0
+                or activity.thirdParties|length > 0
+                or activity.users|length > 0 
+            %}
+            <div class="item-row details">
+                <div class="item-col">
+                    {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
+                </div>
+                
                 {% if activity.comment.comment is not empty %}
-                        {{ activity.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
+                <div class="item-col comment">
+                    {{ activity.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
+                </div>
                 {% endif %}
-                {%- if activity.reasons is empty -%}
-                    {{ 'No reason associated'|trans }}
-                {%- else -%}
-                    {% for r in activity.reasons %}{{ r|chill_entity_render_box }} {% endfor %}
-                {%- endif -%}
-            </td>
-            <td>{{ activity.type.name | localize_translatable_string }}</td>
-            <td>
-                <ul class="record_actions">
-                    <li>
-                        <a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-show "></a>
-                    </li>
-                    {# TOOD
-                    {% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
-                    #}
-                    <li>
-                        <a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-update "></a>
-                    </li>
-                    {# TOOD
-                    {% endif %}
-                    {% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
-                    #}
-                    <li>
-                        <a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="sc-button bt-delete "></a>
-                    </li>
-                    {#
-                    {% endif %}
-                    #}
-            </td>
-        </tr>
+            </div>
+            {% endif %}
+            
+        </div>
     {% endfor %}
-    </tbody>
-</table>
+</div>
 {% endif %}
 
 <ul class="record_actions">
@@ -77,3 +180,4 @@
         </a>
     </li>
 </ul>
+{{ dump()}}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
index 7607ac79a..53e7ec86e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
@@ -5,5 +5,5 @@
 {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
 
 {% block content %}
-    {% include 'ChillActivityBundle:Activity:list.html.twig' %}
+    {% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'accompanyingCourse'} %}
 {% endblock %}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
index db441ee69..6856459c6 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
@@ -21,5 +21,5 @@
 {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
 
 {% block personcontent %}
-    {% include 'ChillActivityBundle:Activity:list.html.twig' %}
+    {% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'person'} %}
 {% endblock %}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
index 0a4f86bf3..9999e5cee 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
@@ -10,7 +10,7 @@
 </dl>
 
 <h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
-{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context } %}
+{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'bloc' } %}
 
 <h2 class="chill-red">{{ 'Activity data'|trans }}</h2>
 <dl class="chill_view_data">
diff --git a/src/Bundle/ChillActivityBundle/translations/messages.fr.yml b/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
index 532f25cf4..f7bdff7e6 100644
--- a/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
@@ -24,6 +24,8 @@ Update activity: Modifier l'activité
 Scope: Cercle
 Activity data: Données de l'activité
 No reason associated: Aucun sujet
+No social issues associated: Aucune problématique sociale
+No social actions associated: Aucune action d'accompagnement
 There isn't any activities.: Aucune activité enregistrée.
 type_name: type de l'activité
 person_firstname: prénom
@@ -39,6 +41,8 @@ Emergency: Urgent
 Sent received: Envoyer / Recevoir
 Sent: Envoyer
 Received: Recevoir
+by: 'Par '
+location: Lieu
 
 
 #forms
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 38bc19cf7..105425c46 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -75,6 +75,6 @@ export default {
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
    span.multiselect__tag {
-      background: #e2793d;
+      background: var(--chill-orange);
    }
 </style>