diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
index bdd2d7ba4..27699c45e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
@@ -1,10 +1,6 @@
 /// AccompanyingCourse Work list Page
 div.accompanying_course_work-list {
 
-    // ?? howto calculate border:groove generated from $orange ??
-    // see mixin badge_social_action
-    $groove-border-color-connect: #965028;
-
     h2.title {
         display: flex;
         flex-direction: row;
@@ -14,13 +10,13 @@ div.accompanying_course_work-list {
 
         span.title_label {
             border-radius: 0.35rem 0 0 0.35rem;
-            background-color: $groove-border-color-connect;
+            background-color: $social-action-label-color;
             color: $white;
             font-size: 80%;
             padding: 0.5em;
             padding-right: 0;
         }
-        span.action_title {
+        span.title_action {
             flex-grow: 1;
             margin: 0 0 0 auto;
             border-radius: 0 0.35rem 0.35rem 0;
@@ -36,39 +32,36 @@ div.accompanying_course_work-list {
             display: flex;
             align-items: center;
             justify-content: center;
+
             padding: 0;
             list-style-type: none;
 
             > li {
                 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
-                min-width: 210px;
 
-                div.date {
-                    margin-bottom: 20px;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                }
-                div.label {
+                div {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
 
-                    padding: 0 40px;
-                    border-top: 3px solid var(--bs-chill-green);
+                    &.date {
+                        margin-bottom: 1em;
+                    }
+                    &.label {
+                        border-top: 3px solid $chill-green;
 
-                    &:before {
-                        content: '';
-                        display: inline-block;
-                        position: relative;
-                        width: 12px;
-                        height: 12px;
+                        &:before {
+                            content: '';
+                            display: inline-block;
+                            position: relative;
+                            width: 15px;
+                            height: 15px;
+                            top: -9px;
 
-                        background-color: white;
-                        border-radius: 12px;
-                        border: 2px solid var(--bs-chill-green);
-
-                        top: -9px;
+                            background-color: $white;
+                            border-radius: 12px;
+                            border: 2px solid $chill-green;
+                        }
                     }
                 }
             }
@@ -76,41 +69,65 @@ div.accompanying_course_work-list {
     }
 
     div.objective_results {
-        display: grid;
         width: 100%;
-        grid-template-areas:
-        "obj res"
-        ;
+        display: grid;
+        grid-template-areas: "obj res";
         grid-template-columns: 50%;
-        column-gap: 1rem;
+        column-gap: 0.5rem;
         padding: 0.3rem;
-        .obj {
+
+        div.objective {
             grid-area: obj;
-        }
-        .res {
-            grid-area: res;
-            ul.result_list {
-                list-style-type: none;
-                padding: 0;
+            h4.title_label {
+                border-radius: 0.35rem 0 0 0.35rem;
             }
         }
-        &:nth-child(2n+2) {
-            background-color: var(--bs-chill-llight-gray);
+        div.results {
+            grid-area: res;
+            h4.title_label {
+                border-radius: 0 0.35rem 0.35rem 0;
+            }
         }
-    }
+        //&:nth-child(even) { background-color: $chill-llight-gray; }
+        &.without-objectives {}
+        &.with-objectives {}
 
-    &.short {
-        .item {
-            padding-bottom: 0;
-            ul.record_actions {
+
+        h4.title_label {
+            display: block;
+            margin: 0;
+            padding: 0.1em 0.5em;
+            font-variant-caps: small-caps;
+            background-color: $light;
+            + * {
+                margin-top: 0;
+            }
+        }
+        ul {
+            &.goal_title,
+            &.result_list {
+                padding-left: 1em;
                 margin-bottom: 0;
+                li {
+                    padding-left: 0.3em;
+                    &::marker {
+                        content: '→';
+                        font-weight: bold;
+                        font-size: 120%;
+                    }
+                }
+            }
+            &.goal_title li::marker {
+                color: $sky-blue;
+            }
+            &.result_list li::marker {
+                color: $pink;
             }
         }
     }
 
     .updatedBy {
-        margin-top: 1rem;
-        text-align: right;
+        margin-top: 0.3rem;
         font-size: 0.9rem;
         font-style: italic;
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
index 488281914..4ff1d72bc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -1,6 +1,14 @@
-$social-issue-color: #4bafe8;
+// Additionnal colors
+$sky-blue: #4bafe8;
+
+// mixins variables
+$social-issue-color: $sky-blue;
 $social-action-color: $orange;
 
+// Calculate same color then border:groove
+// origin: $orange, computed: #965028
+$social-action-label-color: shade-color($orange, 34%);
+
 ///
 ///  Social Issue mixin
 //   define visual badge for all social issues
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 8ead7bf9c..a0c4d30bb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -135,7 +135,7 @@
         <div class="item">
             <div class="title">
             <p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p >
-                <h2 class="action_title">
+                <h2 class="title_action">
                   {{ w.socialAction|chill_entity_render_box({ 'no-badge': false }) }}
                 </h2>
             </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
index b1d6f841d..1f7b3716b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
@@ -18,12 +18,12 @@
 
           <h2 class="title">
             <span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
-            <span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
+            <span class="title_action">{{ w.socialAction|chill_entity_render_string }}</span>
           </h2>
 
         </div>
         <div class="item-row separator">
-            
+
           <div class="timeline">
             <ul>
               <li class="completed">
@@ -54,19 +54,22 @@
           </div>
 
         </div>
-        <div class="item-row">
+        <div class="">
 
+          {% if w.results|length > 0 and w.goals|length > 0 %}
+
+          {% endif %}
           {% if w.results|length > 0 %}
-            <div class="objective_results objective_results__without-objectives">
-              <div class="obj without_objective">
-                <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
+            <div class="objective_results without-objectives">
+              <div class="objective">
+                <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
                 <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
               </div>
-              <div class="res results">
-                <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
+              <div class="results">
+                <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
                 <ul class="result_list">
                   {% for r in w.results %}
-                    <li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
+                    <li>{{ r.title|localize_translatable_string }}</li>
                   {% endfor %}
                 </ul>
               </div>
@@ -74,20 +77,19 @@
           {% endif %}
           {% if w.goals|length > 0 %}
             {% for g in w.goals %}
-              <div class="objective_results objective_results--with-objectives">
-                <div class="objective obj">
-                  <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
-                  <h4 class="goal_title">{{ g.goal.title|localize_translatable_string }}</h4>
+              <div class="objective_results with-objectives">
+                <div class="objective">
+                  <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
+                  <ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
                 </div>
-                <div class="results res">
+                <div class="results">
+                  <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
                   {% if g.results|length == 0 %}
-                    <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
                     <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
                   {% else %}
-                    <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
                     <ul class="result_list">
                       {% for r in g.results %}
-                        <li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
+                        <li>{{ r.title|localize_translatable_string }}</li>
                       {% endfor %}
                     </ul>
                   {% endif %}
@@ -100,7 +102,8 @@
         <div class="item-row separator">
 
           <div class="updatedBy">
-            {{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>, {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
+            {{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>,<br>
+            {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
           </div>
           <ul class="record_actions">
             <li>