diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
index 6264a3a95..c2995e57d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
@@ -62,10 +62,10 @@ $chill-theme-buttons: (
    &.btn-view::before,
    &.btn-save::before,
    &.btn-duplicate::before,
-      &.btn-not-duplicate::before,
-      &.btn-submit::before,
-      &.btn-reset::before,
-      &.btn-action::before,
+      // &.btn-not-duplicate::before,
+      // &.btn-submit::before,
+      // &.btn-reset::before,
+      // &.btn-action::before,
    &.btn-delete::before,
    &.btn-remove::before,
    &.btn-cancel::before {
@@ -101,3 +101,13 @@ $chill-theme-buttons: (
       color: $light;
    }
 }
+
+/// allow to hide icon (herited from scratch)
+.btn {
+   &.change-icon {
+      &::before {
+         content: '';
+         margin-right: 0;
+      }
+   }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
index 7b4ac4a61..af358c01e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
@@ -1,39 +1,28 @@
 {% block content %}
-
+    <div class="flex-table accompanyingcourse-list">
     {% for accompanying_period in accompanying_periods %}
-    <div class="flex-table">
         <div class="item-bloc">
             <div class="item-row">
+
                 <div class="item-col">
-                    {{'period'|trans}} <b>#{{ accompanying_period.id }}</b>
+                    <b>#{{ accompanying_period.id }}</b>
                     {% if accompanying_period.emergency %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Emergency'|trans|upper -}}
-                    </span>
+                        <span class="badge bg-primary">{{- 'Emergency'|trans|upper -}}</span>
                     {% endif %}
                     {% if accompanying_period.confidential %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Confidential'|trans|upper -}}
-                    </span>
+                        <span class="badge bg-primary">{{- 'Confidential'|trans|upper -}}</span>
                     {% endif %}
                     {% if accompanying_period.step == 'DRAFT' %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Draft'|trans|upper -}}
-                    </span>
+                        <span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
                     {% else %}
-                    <span class="badge bg-primary">
-                        {{- 'Confirmed'|trans|upper -}}
-                    </span>
+                        <span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
                     {% endif %}
                 </div>
 
                 <div class="item-col">
                 {% if chill_accompanying_periods.fields.user == 'visible'  %}
                     {% if accompanying_period.user %}
-                    {{ accompanying_period.user.username }}
+                        {{ accompanying_period.user.username }}
                     {% else %}
                         <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
                     {% endif %}
@@ -42,6 +31,7 @@
 
             </div>
             <div class="item-row">
+
                 {% if accompanying_period.closingDate == null %}
                     {{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
                 {% else %}
@@ -49,92 +39,95 @@
                         '%opening_date%': accompanying_period.openingDate|format_date('long'),
                         '%closing_date%': accompanying_period.closingDate|format_date('long')}
                     ) }}
-
                     {% if accompanying_period.isOpen == false %}
                         <dl class="chill_view_data">
                             <dt>{{ 'Closing motive'|trans }}&nbsp;:</dt>
                             <dd>{{ accompanying_period.closingMotive|chill_entity_render_box }}</dd>
                         </dl>
                     {% endif %}
-
                 {% endif %}
+
             </div>
-
-                <div class="item-col">
-                    <h3>{{ 'Participants'|trans }}</h3>
-                    {% if accompanying_period.participations.count > 0 %}
-                        {% for p in accompanying_period.participations %}
-                        <p>
-                            <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
-                                {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-                            </a>
-                        </p>
-                        {% endfor %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
-                </div>
-                <div class="item-col">
-                    <h3>{{ 'Requestor'|trans }}</h3>
-                    {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
-                        {% if accompanying_period.requestorPerson is not null %}
-                        <p>{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}</p>
-                        {% endif %}
-                        {% if accompanying_period.requestorThirdParty is not null %}
-                        <p>{{ accompanying_period.requestorThirdParty.name }}</p>
-                        {% endif %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
-                </div>
-
-                <div class="item-col">
-                    <h3>{{ 'Social issues'|trans }}</h3>
-                    {% if accompanying_period.socialIssues.count > 0 %}
-                        {% for si in accompanying_period.socialIssues %}
-                        <p>{{ si.title|localize_translatable_string }}</p>
-                        {% endfor %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
-                </div>
-
             <div class="item-row">
+
+                <h3>{{ 'Participants'|trans }}</h3>
+                {% if accompanying_period.participations.count > 0 %}
+                    {% for p in accompanying_period.participations %}
+                    <p>
+                        <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
+                            {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
+                        </a>
+                    </p>
+                    {% endfor %}
+                {% else %}
+                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                {% endif %}
+
+            </div>
+            <div class="item-row">
+
+                <h3>{{ 'Requestor'|trans }}</h3>
+                {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
+                    {% if accompanying_period.requestorPerson is not null %}
+                    <p>{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}</p>
+                    {% endif %}
+                    {% if accompanying_period.requestorThirdParty is not null %}
+                    <p>{{ accompanying_period.requestorThirdParty.name }}</p>
+                    {% endif %}
+                {% else %}
+                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                {% endif %}
+
+            </div>
+            <div class="item-row">
+
+                <h3>{{ 'Social issues'|trans }}</h3>
+                {% if accompanying_period.socialIssues.count > 0 %}
+                    {% for si in accompanying_period.socialIssues %}
+                    <p>{{ si.title|localize_translatable_string }}</p>
+                    {% endfor %}
+                {% else %}
+                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                {% endif %}
+
+            </div>
+            <div class="item-row">
+
                 <ul class="record_actions">
                     {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
                     <li>
                         <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
                            class="btn btn-primary" title="{{ 'See accompanying period'|trans }}">
-                            <i class="fa fa-random"></i>
+                            <i class="fa fa-fw fa-random"></i>
                             {{ 'See this period'|trans }}
                         </a>
                     </li>
-                    {#
                     <li>
-                        <a  href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-update no-content"></a>
+                        <a  href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
+                            class="btn btn-update" title="{{ 'Edit Accompanying Course'|trans }}"></a>
                     </li>
                     {% if accompanying_period.isOpen == true %}
-                    <li>
-                        <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}" class="btn btn-update has-hidden change-icon">
-                            <i class="fa fa-lock" aria-hidden="true"></i><span class="show-on-hover">{{'Close accompanying period'|trans }}</span>
-                        </a>
-                    </li>
+                        <li>
+                            <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}"
+                               class="btn btn-update change-icon">
+                                <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+                                {{'Close accompanying period'|trans }}
+                            </a>
+                        </li>
                     {% endif %}
                     {% if accompanying_period.canBeReOpened(person) == true %}
-                    <li>
-                        <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-create change-icon has-hidden">
-                            <i class="fa fa-unlock" aria-hidden="true"></i><span class="show-on-hover">{{'Re-open accompanying period'|trans }}</span>
-                        </a>
-                    </li>
+                        <li>
+                            <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
+                               class="btn btn-create change-icon">
+                                <i class="fa fa-fw fa-unlock" aria-hidden="true"></i>
+                                {{'Re-open accompanying period'|trans }}
+                            </a>
+                        </li>
                     {% endif %}
-                    #}
                 </ul>
+
             </div>
-
         </div>
-    </div>
-    <p></p>
     {% endfor %}
-
-
+    </div>
 {% endblock content %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/list.html.twig
index 8ca4dd26e..4dc7a90aa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/list.html.twig
@@ -5,36 +5,44 @@
 {% block title %}{{ 'Person accompanying period - %name%'|trans({ '%name%' : person.__toString}) }}{% endblock title %}
 
 {% block personcontent %}
-<h1>{{ 'Accompanying period list'|trans }}</h1>
+<div class="accompanyingcourse-list">
 
-{% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
+    <h1>{{ 'Accompanying period list'|trans }}</h1>
 
-<ul class="record_actions sticky-form-buttons">
-    <li class="cancel">
-        <a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}" class="btn btn-cancel">
-            {{ 'Person details'|trans }}
-        </a>
-    </li>
-    <li>
-        <a href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}" class="btn btn-create">
-          {{ 'Create an accompanying period'|trans }}
-        </a>
-    </li>
-    {#
-    <li>
-        <a href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}" class="btn btn-create has-hidden">
-            <span class="show-on-hover">{{ 'Add an accompanying period in the past'|trans }}</span>
-        </a>
-    </li>
-    {% if person.isOpen == false %}
-    <li>
-        <a href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}" class="btn btn-create change-icon has-hidden">
-            <i class="fa fa-unlock" aria-hidden="true"></i>
-            <span class="show-on-hover">{{'Begin a new accompanying period'|trans }}</span>
-        </a>
-    </li>
-    {% endif %}
-    #}
-</ul>
+    {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
 
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}"
+               class="btn btn-cancel">{{ 'Person details'|trans }}
+            </a>
+        </li>
+        <li class="dropdown">
+            <a class="btn btn-create change-icon dropdown-toggle"
+               href="#" role="button" id="newAccompanyingPeriod" data-bs-toggle="dropdown" aria-expanded="false">
+                {{ 'Create an accompanying period'|trans }}
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="newAccompanyingPeriod">
+                <li>
+                    <a class="dropdown-item" href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}">
+                        <i class="fa fa-fw fa-plus"></i> {{ 'Create an accompanying period'|trans }}
+                    </a>
+                </li>
+                <li>
+                    <a class="dropdown-item" href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}">
+                        <i class="fa fa-fw fa-reply"></i> {{ 'Add an accompanying period in the past'|trans }}
+                    </a>
+                </li>
+                {% if person.isOpen == false %}
+                <li>
+                    <a class="dropdown-item" href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}">
+                        <i class="fa fa-fw fa-unlock"></i> {{'Begin a new accompanying period'|trans }}
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </li>
+    </ul>
+
+</div>
 {% endblock %}