diff --git a/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.js b/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.js
new file mode 100644
index 000000000..cbc8531c0
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.js
@@ -0,0 +1 @@
+require('./index.scss');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.scss b/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.scss
new file mode 100644
index 000000000..9fe4b99f5
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.scss
@@ -0,0 +1,35 @@
+
+#accompanying_course_work_list {
+
+  .item {
+
+    .title_label {
+      display: block;
+      margin: 0;
+
+      font-size: 0.8rem;
+    }
+
+    h2.action_title {
+      margin-top: 0;
+    }
+
+    .objective_results {
+      display: grid;
+      grid-template-areas:
+        "obj res"
+        ;
+      grid-columns: 50%;
+      column-gap: 1rem;
+
+      .obj {
+        grid-area: obj;
+      }
+
+      .res {
+        grid-area: res;
+      }
+    }
+  }
+
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
index e9fdbd3ce..53314cf17 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
@@ -11,6 +11,7 @@
 {% endblock %}
 
 {% block js %}
+  {{ parent() }}
   <script type="text/javascript">
     window.accompanyingCourseWork = {{ json|json_encode|raw }};
   </script>
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 86a7c5401..ec5279759 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
@@ -6,15 +6,78 @@
 {% block content %}
   <h1>{{ block('title') }}</h1>
 
-  <ul>
-  {% for w in works %}
-    <li>
-      <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
-        Work with id {{ w.id }}
-      </a>
-    </li>
-  {% endfor %}
-  </ul>
+  <div id="accompanying_course_work_list">
+    {% for w in works %}
+      <div class="item">
+        <div class="title">
+          <p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p >
+          <h2 class="action_title">
+            {{ w.socialAction|chill_entity_render_box({ 'no-badge': true }) }}
+          </h2>
+        </div>
+
+        <div class="timeline">
+          <ul>
+            <li>
+              <span class="label">{{ 'accompanying_course_work.create_date'|trans }}</span>
+            </li>
+          </ul>
+        </div>
+
+        {% if w.results|length > 0 %}
+          <div class="objective_results objective_results--without-objectives">
+            <div class="obj without_objective">
+              {{ 'accompanying_course_work.results without objective'|trans }}
+            </div>
+            <div class="res results">
+              <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
+              <ul>
+                {% for r in w.results %}
+                  <li>{{ r.title|localize_translatable_string }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+        {% endif %}
+
+        {% if w.goals|length > 0 %}
+          <div class="objective_results objective_results--with-objectives">
+            {% for g in w.goals %}
+              <div class="objective">
+                <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
+                <h3>{{ g.goal.title|localize_translatable_string }}</h3>
+              </div>
+              <div class="results">
+                {% if g.results|length == 0 %}
+                  <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
+                {% else %}
+                <p class="title_label">{{ 'accompanying_course_work.result'|trans }}</p>
+                  <ul>
+                    {% for r in g.results %}
+                      <li>{{ r.title|localize_translatable_string }}</li>
+                    {% endfor %}
+                  </ul>
+                {% endif %}
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+
+
+        <div class="actions">
+          <ul class="record_actions">
+            <li>
+              <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
+                Work with id {{ w.id }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    {% else %}
+      <p class="chill-no-data-statement">{{ 'accompanying_course_work.No work'|trans }}</p>
+    {% endfor %}
+   </div>
 
   <ul class="record_actions sticky-form-buttons">
     <li>
@@ -26,3 +89,9 @@
   </ul>
 
 {% endblock %}
+
+
+{% block css %}
+  {{ parent() }}
+  {{ encore_entry_link_tags('accompanying_course_work_list') }}
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
index 246ddd1ea..858643e95 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
@@ -1,6 +1,6 @@
 {% set reversed_parents = parents|reverse %}
 <span class="chill-entity chill-entity__social-action">
-  <span class="badge badge-primary">
+  <span class="{% if not options['no-badge'] %}badge badge-primary{% endif %}">
     {%- for p in reversed_parents %}
     <span class="chill-entity__social-action__parent--{{ loop.revindex0 }}">
       {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
diff --git a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialActionRender.php b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialActionRender.php
index 85a4d2759..b61748d73 100644
--- a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialActionRender.php
+++ b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialActionRender.php
@@ -13,9 +13,14 @@ class SocialActionRender implements ChillEntityRenderInterface
     private EngineInterface $engine;
 
     public const SEPARATOR_KEY = 'default.separator';
+    /**
+     * if true, the action will not be encapsulated into a "badge"
+     */
+    public const NO_BADGE = 'no-badge';
 
     public const DEFAULT_ARGS = [
-       self::SEPARATOR_KEY => ' > ',
+        self::SEPARATOR_KEY => ' > ',
+        self::NO_BADGE => false,
    ];
 
     public function __construct(TranslatableStringHelper $translatableStringHelper, EngineInterface $engine)
diff --git a/src/Bundle/ChillPersonBundle/chill.webpack.config.js b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
index bc1bf0679..f0fdadd06 100644
--- a/src/Bundle/ChillPersonBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
@@ -15,4 +15,5 @@ module.exports = function(encore, entries)
     encore.addEntry('household_edit_metadata', __dirname + '/Resources/public/modules/household_edit_metadata/index.js');
     encore.addEntry('accompanying_course_work_create', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkCreate/index.js');
     encore.addEntry('accompanying_course_work_edit', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkEdit/index.js');
+    encore.addEntry('accompanying_course_work_list', __dirname + '/Resources/public/modules/accompanying_course_work_list/index.js');
 };
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index 95f5ab99d..d34bd76b7 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -336,4 +336,10 @@ accompanying_course_work:
     Create accompanying course work: Créer une action d'accompagnement
     Edit accompanying course work: Modifier une action d'accompagnement
     List accompanying course work: Liste des actions d'accompagnement
-
+    action: Action
+    create_date: Date de création
+    start_date: Date de début
+    results without objective: Résultats - orientation sans objectifs - motifs - dispositifs
+    no_result: Aucun résultat - orientation
+    result: Résultat - orientation
+    goal: Objectifs - motifs - dispositifs