diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
index 50dcbcd92..bf9c8d5ca 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
@@ -34,13 +34,13 @@
                             </div>
 
                             {% if context == 'person' and activity.accompanyingPeriod is not empty %}
-                                <div class="accompanyingPeriodLink" style="margin-top: 1rem">
-                                    <a href="{{ chill_path_add_return_path(
-                                        "chill_person_accompanying_course_index",
-                                        { 'accompanying_period_id': activity.accompanyingPeriod.id }
-                                    ) }}">
-                                        <i class="fa fa-random"></i>
-                                        {{ activity.accompanyingPeriod.id }}
+                                <div class="mt-3">
+                                    <a class="btn btn-sm btn-outline-primary"
+                                       title="{{ 'Period number %number%'|trans({'%number%': activity.accompanyingPeriod.id}) }}"
+                                       href="{{ chill_path_add_return_path(
+                                           "chill_person_accompanying_course_index",
+                                           { 'accompanying_period_id': activity.accompanyingPeriod.id }
+                                       ) }}"><i class="fa fa-random"></i>
                                     </a>
                                 </div>
                             {% endif %}
@@ -48,6 +48,7 @@
                         </div>
                         <div class="item-col">
                             <ul class="list-content">
+
                                 {% if activity.user and t.userVisible %}
                                     <li>
                                         <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
@@ -70,7 +71,7 @@
                                 <li>
                                     <b>{{ 'location'|trans ~ ': ' }}</b>
                                     Domicile de l'usager
-                                    {#
+                                    {# TODO
                                     {% if activity.location %}{{ activity.location }}{% endif %}
                                     #}
                                 </li>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 9c2b93811..d5ea0e172 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -45,19 +45,15 @@
                     {% endif %}
 
                     {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
-                      <div class="accompanyingPeriodLink" style="margin-top: 1rem">
-                        <a 
-                           href="{{ chill_path_add_return_path(
-                            "chill_user_accompanying_course_index",
-                            { 'accompanying_period_id': calendar.accompanyingPeriod.id }
-                            ) }}"
-                           >
-                          <i class="fa fa-random"></i>
-                          {{ calendar.accompanyingPeriod.id }}
+                        <a class="btn btn-sm btn-outline-primary"
+                            title="{{ 'Period number %number%'|trans({'%number%': calendar.accompanyingPeriod.id}) }}"
+                            href="{{ chill_path_add_return_path(
+                                "chill_user_accompanying_course_index",
+                                { 'accompanying_period_id': calendar.accompanyingPeriod.id }
+                            ) }}"><i class="fa fa-random"></i>
                         </a>
-                      </div>
                     {% endif %}
-                    
+
                 </div>
                 <div class="item-col">
                     <ul class="list-content">
@@ -66,14 +62,14 @@
                             <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
                         </li>
                         {% endif %}
-                        
+
                         {% if calendar.mainUser is not empty %}
                         <li>
                             <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
                         </li>
                         {% endif %}
 
-                 
+
                         <li>
                             {%- if calendar.comment.isEmpty -%}
                                 <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
@@ -81,8 +77,8 @@
                                 {{ calendar.comment|chill_entity_render_box }}
                             {%- endif -%}
                         </li>
-                        
-                        
+
+
                     </ul>
                     <ul class="record_actions">
                         <li>
@@ -107,19 +103,19 @@
                     </ul>
                 </div>
             </div>
-            
-            {%  
+
+            {%
                 if calendar.comment.comment is not empty
                 or calendar.users|length > 0
                 or calendar.thirdParties|length > 0
-                or calendar.users|length > 0 
+                or calendar.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': calendar } %}
                 </div>
-                
+
                 {% if calendar.comment.comment is not empty %}
                 <div class="item-col comment">
                     {{ calendar.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
@@ -127,7 +123,7 @@
                 {% endif %}
             </div>
             {% endif %}
-            
+
         </div>
     {% endfor %}
 </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
index a6727593e..ec6e8a791 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -1,5 +1,5 @@
 $social-issue-color: #4bafe8;
-$social-action-color: $pink;
+$social-action-color: $orange;
 
 ///
 ///  Social Issue mixin
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index 8c8add139..61a3cd035 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -146,6 +146,7 @@ and %number% other: '{0} et aucun autre| {1} et une autre |]1, Inf] et %number%
 'Period opened': 'Période ouverte'
 'Close accompanying period': 'Clôre la période'
 'Open accompanying period': 'Ouvrir la période'
+Period number %number%: 'Période n° %number%'
 'Add an accompanying period in the past': Ajouter une période d'accompagnement dans le passé
 Begin a new accompanying period: Commencer une nouvelle période d'accompagnement
 Create an accompanying period: Créer une période d'accompagnement