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 daaae9e28..ed474911f 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,57 +1,56 @@
 /// AccompanyingCourse Work list Page
 div.accompanying_course_work-list {
 
-    div.objective_results {
+    table.obj-res-eval {
+        border-collapse: collapse;
+        border-radius: 5px;
         width: 100%;
-        display: grid;
-        grid-template-areas: "obj res";
-        grid-template-columns: 50%;
-        column-gap: 0.2rem;
-        padding: 0.3rem;
-
-        div.objective {
-            grid-area: obj;
+        &, tr, th, td {
+            border: 1px solid lightgray;
+            padding: 0.3em;
+        }
+        th {
             h4.title_label {
-                border-radius: 0.35rem 0 0 0.35rem;
+                font-weight: 700;
+                font-size: 100%;
+                font-family: 'Open Sans';
+                margin: 0;
             }
         }
-        div.results {
-            grid-area: res;
-            h4.title_label {
-                border-radius: 0 0.35rem 0.35rem 0;
-            }
+        td {
+            font-size: 85%;
+        }
+        td.obj,
+        td.res {
+            width: 50%;
+        }
+        td.eval {
+            width: 100%;
         }
-        //&:nth-child(even) { background-color: $chill-llight-gray; }
-        &.without-objectives {}
-        &.with-objectives {}
     }
 
-    div.objective_results,
-    div.evaluations {
-        h4.title_label {
-            display: block;
-            margin: 0.4em 0;
-            padding: 0.1em 0.5em;
-            font-variant-caps: small-caps;
-            font-size: 95%;
-            background-color: tint-color($chill-orange, 80%);
-            + * {
-                margin-top: 0;
-            }
+    ul {
+        &.goal_title,
+        &.result_list,
+        &.eval_title {
+            padding-left: 1em;
+            margin-bottom: 0;
         }
-        ul {
-            &.goal_title,
-            &.result_list {
-                padding-left: 1em;
-                margin-bottom: 0;
-            }
-            &.goal_title {
-                @include list_marker_triangle($social-issue-color);
-            }
-            &.result_list {
-                @include list_marker_triangle($pink);
-            }
+        &.goal_title {
+            @include list_marker_triangle($social-issue-color);
+        }
+        &.result_list {
+            @include list_marker_triangle($pink);
+        }
+        &.eval_title {
+            @include list_marker_triangle($orange);
         }
     }
 
 }
+
+div.flex-table div.item-bloc:nth-child(2n) table.obj-res-eval {
+    &, tr, th, td {
+        background-color:  $chill-llight-gray;
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index 32e2a5e14..97bda5fc5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -15,12 +15,12 @@
       </div>
 
       <div id="startDate" class="action-row">
-         <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
+         <label class="col-form-label">{{ $t('startDate') }}</label>
          <input v-model="startDate" type="date" required="true" class="form-control" v-once/>
       </div>
 
       <div id="endDate" class="action-row">
-         <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
+         <label class="col-form-label">{{ $t('endDate') }}</label>
          <input v-model="endDate" type="date" class="form-control" />
       </div>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig
new file mode 100644
index 000000000..ffa5da9ca
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig
@@ -0,0 +1,102 @@
+
+{% if w.results|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
+        <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
+        </thead>
+        <tbody>
+        <tr>
+            <td class="obj">
+                <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
+            </td>
+            <td class="res">
+                <ul class="result_list">
+                    {% for r in w.results %}
+                        <li>{{ r.title|localize_translatable_string }}</li>
+                    {% endfor %}
+                </ul>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+{% endif %}
+
+{% if w.goals|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
+        <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
+        </thead>
+        <tbody>
+        {% for g in w.goals %}
+            <tr>
+                <td class="obj">
+                    <ul class="goal_title">
+                        <li>{{ g.goal.title|localize_translatable_string }}</li>
+                    </ul>
+                </td>
+                <td class="res">
+                    {% if g.results|length == 0 %}
+                        <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
+                    {% else %}
+                        <ul class="result_list">
+                            {% for r in g.results %}
+                                <li>{{ r.title|localize_translatable_string }}</li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+{% endif %}
+
+{% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="eval">
+            <h4 class="title_label">{{ 'accompanying_course_work.evaluations'|trans }}</h4>
+        </th>
+        </thead>
+        <tbody>
+        {% for e in w.accompanyingPeriodWorkEvaluations %}
+            <tr>
+                <td class="eval">
+                    <ul class="eval_title">
+                        <li>
+                            {{ e.evaluation.title|localize_translatable_string }}
+                            <ul class="columns">
+                                <li>
+                                    <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
+                                    <b>{{ e.startDate|format_date('short') }}</b>
+                                </li>
+                                {% if e.endDate %}
+                                    <li>
+                                        <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                        <b>{{ e.endDate|format_date('short') }}</b>
+                                    </li>
+                                {% endif %}
+                                {% if e.maxDate %}
+                                    <li>
+                                        <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
+                                        <b>{{ e.maxDate|format_date('short') }}</b>
+                                    </li>
+                                {% endif %}
+                                {% if e.warningInterval and e.warningInterval.d > 0 %}
+                                    <li>
+                                        {% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
+                                        <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
+                                        {{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+{% endif %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
index cf91a4e20..ebdfd1f26 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
@@ -107,92 +107,11 @@
                                     </div>
                                 {% endif %}
 
-                                {% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'accompanying_course_work.evaluations'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            <ul class="small_in_title evaluations mt-1">
-                                                {% for e in w.accompanyingPeriodWorkEvaluations %}
-                                                    <li>
-                                                        {{ e.evaluation.title|localize_translatable_string }}
-
-                                                        <ul class="columns">
-                                                            <li>
-                                                                <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
-                                                                <b>{{ e.startDate|format_date('short') }}</b>
-                                                            </li>
-                                                            {% if e.endDate %}
-                                                                <li>
-                                                                    <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
-                                                                    <b>{{ e.endDate|format_date('short') }}</b>
-                                                                </li>
-                                                            {% endif %}
-                                                            {% if e.maxDate %}
-                                                                <li>
-                                                                    <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
-                                                                    <b>{{ e.maxDate|format_date('short') }}</b>
-                                                                </li>
-                                                            {% endif %}
-                                                            {% if e.warningInterval and e.warningInterval.d > 0 %}
-                                                                <li>
-                                                                    {% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
-                                                                    <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
-                                                                    {{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
-                                                                </li>
-                                                            {% endif %}
-                                                        </ul>
-
-                                                    </li>
-                                                {% endfor %}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                {% endif %}
-
                             </div>
                         </div>
 
                         <div class="item-row column">
-                            {% if w.results|length > 0 %}
-                                <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="results">
-                                        <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
-                                        <ul class="result_list">
-                                            {% for r in w.results %}
-                                                <li>{{ r.title|localize_translatable_string }}</li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                </div>
-                            {% endif %}
-                            {% if w.goals|length > 0 %}
-                                {% for g in w.goals %}
-                                    <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">
-                                            <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
-                                            {% if g.results|length == 0 %}
-                                                <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
-                                            {% else %}
-                                                <ul class="result_list">
-                                                    {% for r in g.results %}
-                                                        <li>{{ r.title|localize_translatable_string }}</li>
-                                                    {% endfor %}
-                                                </ul>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                {% endfor %}
-                            {% endif %}
+                            {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
                         </div>
 
                         <div class="item-row separator">
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
index 4bab107c5..a08f8eb1a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
@@ -42,59 +42,8 @@
                     </li>
                 </ul>
 
-                <ul class="small_in_title evaluations mb-3">
-                    A{% for g in w.goals %}
-                        <li class="with-objectives">
-                            <span class="item-key">{{ 'accompanying_course_work.goal'|trans ~ ' : ' }}</span>
-                            {{ g.goal.title|localize_translatable_string }}
-                            {% if g.results|length > 0 %}
-                                <span class="item-key">{{ 'accompanying_course_work.results'|trans }}</span>
-                                <ul>
-                                    {% for r in g.results %}
-                                        <li>
-                                            {{ r.title|localize_translatable_string }}
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                    B{% if w.results|length > 0 %}
-                        <li class="without-objectives">
-                            <span class="item-key">{{ 'accompanying_course_work.goal'|trans }}</span>
-                            <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
-                            {% if w.results %}
-                                <span class="item-key">{{ 'accompanying_course_work.results'|trans }}</span>
-                                <ul>
-                                    {% for r in w.results %}
-                                        <li>
-                                            {{ r.title|localize_translatable_string }}
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            {% endif %}
-                        </li>
-                    {% endif %}
-                    C{% for e in w.accompanyingPeriodWorkEvaluations %}
-                        <li>
-                            <span class="item-key">{{ 'accompanying_course_work.social_evaluation'|trans ~ ' : ' }}</span>
-                            {{ e.evaluation.title|localize_translatable_string }}
-                            <ul class="columns">
-                                {% if e.startDate %}
-                                <li>
-                                    <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
-                                    <b>{{ e.startDate|format_date('short') }}</b>
-                                </li>
-                                {% endif %}
-                                {% if e.endDate %}
-                                <li>
-                                    <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
-                                    <b>{{ e.endDate|format_date('short') }}</b>
-                                </li>
-                                {% endif %}
-                            </ul>
-                        </li>
-                    {% endfor %}
+                <ul class="small_in_title mb-3 ps-0">
+                    {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
                 </ul>
 
                 <div class="metadata text-end" style="font-size: 60%">