diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 4f421afe6..145487a89 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -67,3 +67,43 @@ div#header-accompanying_course-details {
   padding-top: 1em;
   padding-bottom: 1em;
 }
+
+
+div.flex-bloc {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   align-items: stretch;
+   align-content: stretch;
+   &.right {
+      justify-content: flex-end;
+   }
+   div.item-bloc {
+      border: 1px solid #000;
+      margin: 0 1em 1em 0;
+      padding: 1em;
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: 30%;
+      
+      display: flex;
+      flex-direction: column;
+      h5 {
+         margin-top: 0;
+         margin-bottom: 0.3em;
+      }
+      .content-bloc {
+         margin: 0;
+         font-size: 90%;
+      }
+      dl {
+      }
+      ul.record_actions {
+         margin-top: auto;
+         margin-bottom: 0;
+      }
+   }
+   @media only screen and (max-width: 768px) {
+      flex-direction: column;
+   }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index d87b33a2b..563f57b25 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -19,40 +19,53 @@
     {% endif %}
 
     <h2>{{ 'Associated peoples'|trans }}</h2>
-
+    <div class="flex-bloc right">
     {% for p in accompanyingCourse.participations %}
         {% if p.enddate is null %}
-            <h5>
-                {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-            </h5>
-            {{ p.person.gender == 'woman' ? 'F' : 'M' }}<br>
-            {{ 'né le ' ~ p.person.birthdate|format_date('short') }}<br>
+            <div class="item-bloc">
+            
+                <h5>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h5>
+                <dl class="content-bloc">
+                        
+                    <dd>
+                        {{ p.person.gender == 'woman' ? 'F' : 'M' }}
+                    </dd>
+                    <dd>
+                        {{ 'né le ' ~ p.person.birthdate|format_date('short') }}
+                    </dd>
+                    <dd>
+                        {% if p.person.mobilenumber %}
+                            <dt class="fa fa-fw fa-mobile"></dt>{{ p.person.mobilenumber }}
+                        {% else %}
+                            <dt class="fa fa-fw fa-phone"></dt>
+                            {% if p.person.phonenumber %}
+                                {{ p.person.phonenumber }}
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                            {% endif %}
+                        {% endif %}
+                    </dd>
+                    <dd>
+                        {%- if p.person.lastAddress is not empty -%}
+                            {{ address._render(p.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
+                        {%- else -%}
+                            <dt class="fa fa-fw fa-map-marker"></dt>
+                            <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                        {%- endif -%}
+                    </dd>
 
-            {% if p.person.mobilenumber %}
-                <i class="fa fa-fw fa-mobile"></i>{{ p.person.mobilenumber }}
-            {% else %}
-                <i class="fa fa-fw fa-phone"></i>
-                {% if p.person.phonenumber %}
-                    {{ p.person.phonenumber }}
-                {% else %}
-                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                {% endif %}
-            {% endif %}<br>
-
-            {%- if p.person.lastAddress is not empty -%}
-                {{ address._render(p.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
-            {%- else -%}
-                <i class="fa fa-fw fa-map-marker"></i>
-                <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-            {%- endif -%}
-
-            <ul class="record_actions">
-                <li>
-                    <a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
-                </li>
-            </ul>
+                </dl>
+                <ul class="record_actions">
+                    <li>
+                        <a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
+                    </li>
+                </ul>
+                
+            </div>
         {% endif %}
     {% endfor %}
+    </div>
+
 
     <h2>{{ 'Resources'|trans }}</h2>