diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
index a3203d806..53bd3e8a7 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig
@@ -172,7 +172,7 @@
                             {% endfor %}
                         </ul>
                     {% else %}
-                        <span class="chill-no-data-statement">{{ 'Any document found'|trans }}</span>
+                        <span class="chill-no-data-statement">{{ 'No document found'|trans }}</span>
                     {% endif %}
                 </dd>
             {% endif %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/_documents.twig.html b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/_documents.twig.html
index a568ec009..499fb0a83 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/_documents.twig.html
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/_documents.twig.html
@@ -3,7 +3,7 @@
 {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
 {% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
 
-<div class="accompanying_course_work-list">
+<div class="accompanying-course-work">
     <table class="obj-res-eval my-3">
         <thead>
         <th class="eval">
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
index e9147ed4a..44dbcb9f4 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
@@ -1,7 +1,7 @@
 {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
 {% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
 
-<div class="flex-table accompanying_course_work-list">
+<div class="flex-table accompanying-course-work">
     <div class="item-bloc document-item bg-chill-llight-gray">
         <div class="row justify-content-center my-4">
             <div class="col-2">
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro.html.twig
index 886544b1e..0e739d94b 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro.html.twig
@@ -13,3 +13,19 @@
             {{ 'Download'|trans }}</a>
     {% endif %}
 {% endmacro %}
+
+{% macro download_button_small(storedObject, filename = null) %}
+    {% if storedObject is null %}
+        <!-- No document to download -->
+    {% else %}
+        <a class="btn btn-sm btn-download"
+           data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}"
+           data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}"
+           data-download-button
+           data-key="{{ storedObject.keyInfos|json_encode|escape('html_attr') }}"
+           data-iv="{{ storedObject.iv|json_encode|escape('html_attr') }}"
+           data-temp-url-get-generator="{{ storedObject|generate_url|escape('html_attr') }}"
+           data-mime-type="{{ storedObject.type|escape('html_attr') }}" {% if filename is not null %}data-filename="{{ filename|escape('html_attr') }}"{% endif %}>
+            {{ 'Download'|trans }}</a>
+    {% endif %}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig
index a9bc07e2f..7079a0d94 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig
@@ -48,8 +48,8 @@
         {% endif %}
     {% endfor %}
     
-    <div class="metadata">
+    <span class="metadata">
         <i class="fa {{ icon }} fa-lg me-1"></i>
         {{ label|capitalize }}
-    </div>
+    </span>
 {% endmacro %}
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml b/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
index 17326b299..3dda25797 100644
--- a/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
@@ -14,7 +14,7 @@ Edit attributes: Modifier les propriétés du document
 Existing document: Document existant
 No document to download: Aucun document à télécharger
 'Choose a document category': Choisissez une catégorie de document
-Any document found: Aucun document trouvé
+No document found: Aucun document trouvé
 The document is successfully registered: Le document est enregistré
 The document is successfully updated: Le document est mis à jour
 Any description: Aucune description
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index f9a90c286..04b1da942 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -302,12 +302,12 @@ table.table-bordered {
 /// meta-data
 div.createdBy,
 div.updatedBy,
-div.metadata {
+.metadata {
     span.user, span.date {
         text-decoration: underline dotted;
     }
 }
-div.metadata {
+.metadata {
    font-size: smaller;
    color: $gray-600;
    span.user, span.date {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
index 4d0bfcf8e..19da5aed3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
@@ -106,18 +106,5 @@ section.chill-entity {
     // used for comment-embeddable
     &.entity-comment-embeddable {
         width: 100%;
-        
-        /* already defined !!
-        div.metadata {
-            font-size: smaller;
-            color: $gray-600;
-            span.user, span.date {
-                text-decoration: underline dotted;
-                &:hover {
-                    color: $gray-700;
-                }
-            }
-        }
-        */
     }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
index a872a2f43..bc043c666 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="accompanying_course_work">
+<div class="accompanying-course-work">
    <div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
    <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
    <tab-table v-else>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
index 1a8e0bb76..78f78300f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -1,6 +1,6 @@
 // CURRENTLY NOT IN USE
 <template>
-<div class="accompanying_course_work">
+<div class="accompanying-course-work">
    <div class="alert alert-light">{{ $t('my_works.description') }}</div>
    <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
    <tab-table v-else>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig
index b825e4d43..24cf3cab4 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig
@@ -1,4 +1,7 @@
-{# TODO Adapt condition #}
+{# TODO
+    Check if this template is used
+    Adapt condition or Delete it
+#}
 {% if random(1) == 0 %}
 
     {# For a document #}
@@ -22,7 +25,7 @@
     {# For an action #}
     <h2>{{ 'Accompanying Course Action'|trans ~ 'target'|trans }}</h2>
 
-    <div class="flex-table accompanying_course_work-list">
+    <div class="flex-table accompanying-course-work">
         {# dynamic insertion
             ::: TODO delete all static insertion, remove condition and pass work object in inclusion
         #}{% if dynamic is defined %}
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 37672d449..a1e2b435e 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -62,6 +62,7 @@ Centers: Centres
 center: centre
 comment: commentaire
 Comment: Commentaire
+Comments: Commentaires
 Pinned comment: Commentaire épinglé
 Any comment: Aucun commentaire
 Read more: Lire la suite
diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseWorkController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseWorkController.php
index 7b77252be..6baaf03da 100644
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseWorkController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseWorkController.php
@@ -178,6 +178,28 @@ class AccompanyingCourseWorkController extends AbstractController
         ]);
     }
 
+    /**
+     * @Route(
+     *     "{_locale}/person/accompanying-period/work/{id}/show",
+     *     name="chill_person_accompanying_period_work_show",
+     *     methods={"GET"}
+     * )
+     */
+    public function showWork(AccompanyingPeriodWork $work): Response
+    {
+        if (null === $work) {
+            throw $this->createNotFoundException('Unable to find Work entity.');
+        }
+
+        $this->denyAccessUnlessGranted(AccompanyingPeriodWorkVoter::SEE, $work);
+        
+        return $this->render('@ChillPerson/AccompanyingCourseWork/show.html.twig', [
+            'accompanyingCourse' => $work->getAccompanyingPeriod(),
+            'work' => $work,
+        ]);
+
+    }
+
     private function createDeleteForm(int $id): Form
     {
         $params = [];
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 ed474911f..eeb2eb2be 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,13 +1,16 @@
-/// AccompanyingCourse Work list Page
-div.accompanying_course_work-list {
+/// AccompanyingCourse Work Pages
+div.accompanying-course-work {
 
     table.obj-res-eval {
         border-collapse: collapse;
         border-radius: 5px;
         width: 100%;
+        margin-top: 1em;
+        margin-bottom: 1em;
         &, tr, th, td {
             border: 1px solid lightgray;
             padding: 0.3em;
+            background-color: $white;
         }
         th {
             h4.title_label {
@@ -26,6 +29,11 @@ div.accompanying_course_work-list {
         }
         td.eval {
             width: 100%;
+            div.download {
+                .row > * {
+                    transform: scale(0.85);
+                }
+            }
         }
     }
 
@@ -47,10 +55,32 @@ div.accompanying_course_work-list {
         }
     }
 
+    div.item-bloc {
+        &.short {}
+        &.long {}
+        &.uniq {}
+        &.extended {
+            table.obj-res-eval {
+                margin-top: 0;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+        &.colored {
+            background-color: $chill-llight-gray;
+        }
+    }
+
 }
 
-div.flex-table div.item-bloc:nth-child(2n) table.obj-res-eval {
-    &, tr, th, td {
-        background-color:  $chill-llight-gray;
+/// item-bloc with background-color altern: even case
+div.flex-table div.item-bloc:nth-child(2n) {
+
+    // set table background
+    table.obj-res-eval {
+        &, tr, th, td {
+            background-color:  $chill-llight-gray;
+        }
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index b359f84d6..072f13949 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -128,7 +128,7 @@ ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
 }
 
 /// dashboard_like_badge in AccompanyingCourse Work list Page
-div[class*='accompanying_course_work'] {
+div[class*='accompanying-course-work'] {
     div.dashboard,
     h4.badge-title,
     h3.badge-title,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index 04c753358..9a105dd8d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -1,5 +1,5 @@
 <template>
-   <div id="workEditor" class="accompanying_course_work_edit my-4">
+   <div id="workEditor" class="my-4">
       <div id="title" class="action-row">
          <div>
             <p class="wl-item social-issues">
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig
index 3d4f46425..579487824 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig
@@ -1,4 +1,10 @@
-<div class="item-bloc accompanying_course_work-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+{#
+#  OPTIONS
+#  - itemBlocClass: [uniq|colored|extended]
+#  - displayContent: [short|long] default: short
+#  - displayAction: [true|false] default: false
+#}
+<div class="item-bloc{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
 
     <div class="item-row">
         <h2 class="badge-title">
@@ -15,6 +21,13 @@
                             <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
                             <b>{{ w.endDate|format_date('short') }}</b>
                         </li>
+                    {% else %}
+                        {% if displayContent is defined and displayContent == 'long' %}
+                            <li>
+                                <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                            </li>
+                        {% endif %}
                     {% endif %}
                 </ul>
 
@@ -25,7 +38,7 @@
     <div class="item-row separator">
         <div class="wrap-list">
 
-            {%- if w.persons -%}
+            {%- if w.persons -%}{# Usagers du parcours #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Persons in accompanying course'|trans }}</h3>
@@ -45,7 +58,7 @@
                 </div>
             {% endif %}
 
-            {%- if w.handlingThierParty -%}
+            {%- if w.handlingThierParty -%}{# Tiers traitant #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Thirdparty handling'|trans }}</h3>
@@ -62,23 +75,25 @@
                 </div>
             {% endif %}
 
-            {%- if w.referrers -%}
-                <div class="wl-row">
-                    <div class="wl-col title">
-                        <h3>{{ 'Referrers'|trans }}</h3>
-                    </div>
-                    <div class="wl-col list">
+            <div class="wl-row">{# Agents traitants #}
+                <div class="wl-col title">
+                    <h3>{%- if w.referrers|length > 1 -%}{{ 'Referrers'|trans }}{% else %}{{ 'Referrer2'|trans }}{% endif %}</h3>
+                </div>
+                <div class="wl-col list">
+                    {%- if w.referrers|length > 0 -%}
                         {% for u in w.referrers %}
                             <span class="wl-item">
                                 {{ u|chill_entity_render_box }}
                                 {% if not loop.last %}, {% endif %}
                             </span>
                         {% endfor %}
-                    </div>
+                    {% else %}
+                        <span class="chill-no-data-statement">{{ 'No referrer'|trans }}</span>
+                    {% endif %}
                 </div>
-            {% endif %}
+            </div>
 
-            {%- if w.socialAction.issue -%}
+            {%- if w.socialAction.issue -%}{# Problématique sociale #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Social issue'|trans }}</h3>
@@ -93,57 +108,96 @@
 
         </div>
     </div>
-
-    <div class="item-row column">
-        {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' %}
-    </div>
-
-    <div class="item-row separator">
-        <div class="item-col item-meta">
-            {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) %}
-            {% if notif_counter.total > 0 %}
-                {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) }}
-            {% endif %}
-
-            {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
-            {{ macro.updatedBy(w) }}
+    
+    {% if displayContent is not defined or displayContent == 'short' %}
+        <div class="item-row column">
+            {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {
+                'displayContent': displayContent
+            } %}
         </div>
-
-        {% if displayAction is defined and displayAction == true %}
-        <ul class="item-col record_actions">
-            {% set suppEvaluations = [] %}
-            {% for e in w.accompanyingPeriodWorkEvaluations %}
-                {% set suppEvaluations = suppEvaluations|merge([
-                    {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', 'relatedEntityId': e.id }
-                ]) %}
-
-                {% for d in e.documents %}
-                    {% set suppEvaluations = suppEvaluations|merge([
-                        {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument', 'relatedEntityId': d.id }
-                    ]) %}
-                {% endfor %}
-            {% endfor %}
-            <li>
-                {{ chill_entity_workflow_list(
-                    'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork',
-                    w.id, [], suppEvaluations) }}
-            </li>
-            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
+    {% endif %}
+    
+    {% if displayContent is not defined or displayContent == 'short' %}
+        <div class="item-row separator">
+            
+            {% import '@ChillPerson/AccompanyingCourseWork/_macros.html.twig' as macro  %}
+            
+            <div class="item-col item-meta">
+                {{ macro.metadata(w) }}
+            </div>
+    
+            {% if displayAction is defined and displayAction == true %}
+            <ul class="item-col record_actions">
+                <li>{{ macro.workflowButton(w) }}</li>
                 <li>
-                    <a class="btn btn-edit" title="{{ 'Edit'|trans }}"
-                    href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
+                    <a class="btn btn-show" title="{{ 'Show'|trans }}"
+                       href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_show', {'id': w.id }) }}"
                     ></a>
                 </li>
+                {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
+                    <li>
+                        <a class="btn btn-edit" title="{{ 'Edit'|trans }}"
+                           href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
+                        ></a>
+                    </li>
+                {% endif %}
+                {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', w) %}
+                    <li>
+                        <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
+                           href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
+                        ></a>
+                    </li>
+                {% endif %}
+            </ul>
             {% endif %}
-            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', w) %}
-                <li>
-                    <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
-                       href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
-                    ></a>
-                </li>
-            {% endif %}
-        </ul>
-        {% endif %}
-    </div>
+        </div>
+    {% endif %}
 
 </div>
+
+{#
+ #   This is for 'long' version of content
+ #   Note: this include is wrapped in a flex-table container.
+ #   We start by closing the flex-table so we can add more.
+ #   At the end we leave the last flex-table open, as it will be closed in the container.
+#}
+{% if displayContent is defined and displayContent == 'long' %}
+    </div>
+    
+    {% if w.results|length > 0 or w.goals|length > 0 or w.accompanyingPeriodWorkEvaluations|length > 0 %}
+        <h2 class="chill-blue">{{ 'Dispositifs' }}</h2>
+        
+        <div class="flex-table">{# new flex-table wrapper #}
+            <div class="item-bloc colored{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+                {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {
+                    'displayContent': displayContent
+                } %}
+            </div>
+        </div>
+    {% endif %}
+    
+    <h2 class="chill-blue">{{ 'Comments'|trans }}</h2>
+    
+    <div class="flex-table">
+        <div class="item-bloc no-altern{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+            <h3 class="chill-beige">Public</h3>
+            {% if w.note is not empty %}
+                <blockquote class="chill-user-quote">
+                    {{ w.note|chill_entity_render_box({'metadata': true }) }}
+                </blockquote>
+            {% else %}
+                <span class="chill-no-data-statement">{{ 'No comment associated'|trans }}</span>
+            {% endif %}
+        </div>
+        {% set userId = app.user.id %}
+        {% if w.privateComment.comments|length > 0 and w.privateComment.comments[userId] %}
+            <div class="item-bloc no-altern{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+                <h3 class="chill-beige">Privé</h3>
+                <blockquote class="chill-user-quote private-quote">
+                    {{ w.privateComment.comments[userId]|chill_markdown_to_html }}
+                </blockquote>
+            </div>
+        {% endif %}
+    {# Here flex-table stay open ! read above #}
+    
+{% endif %}
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_macros.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_macros.html.twig
new file mode 100644
index 000000000..10a0f94c7
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_macros.html.twig
@@ -0,0 +1,23 @@
+{% macro metadata(w) %}
+    {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) %}
+    {% if notif_counter.total > 0 %}
+        {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) }}
+    {% endif %}
+    {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
+    {{ macro.updatedBy(w) }}
+{% endmacro %}
+
+{% macro workflowButton(w) %}
+    {% set suppEvaluations = [] %}
+    {% for e in w.accompanyingPeriodWorkEvaluations %}
+        {% set suppEvaluations = suppEvaluations|merge([
+            {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', 'relatedEntityId': e.id }
+        ]) %}
+        {% for d in e.documents %}
+            {% set suppEvaluations = suppEvaluations|merge([
+                {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument', 'relatedEntityId': d.id }
+            ]) %}
+        {% endfor %}
+    {% endfor %}
+    {{ chill_entity_workflow_list('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id, [], suppEvaluations) }}
+{% endmacro %}
\ No newline at end of file
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
index ffa5da9ca..800d39935 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig
@@ -1,6 +1,9 @@
-
+{#
+#  OPTIONS
+#  - displayContent: [short|long] default: short
+#}
 {% if w.results|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <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>
@@ -23,7 +26,7 @@
 {% endif %}
 
 {% if w.goals|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <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>
@@ -54,7 +57,7 @@
 {% endif %}
 
 {% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <thead>
         <th class="eval">
             <h4 class="title_label">{{ 'accompanying_course_work.evaluations'|trans }}</h4>
@@ -72,28 +75,82 @@
                                     <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>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
                                 {% endif %}
+                                
                                 {% if e.maxDate %}
                                     <li>
                                         <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
                                         <b>{{ e.maxDate|format_date('short') }}</b>
                                     </li>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
                                 {% 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>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
                                 {% endif %}
                             </ul>
                         </li>
                     </ul>
+                    {% if displayContent is defined and displayContent == 'long' %}
+                        
+                        <blockquote class="chill-user-quote">{{ e.comment|chill_entity_render_box }}</blockquote>
+    
+                        {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
+                        {% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
+                        
+                        <div class="download mb-4 container">
+                            {% if e.documents|length > 0 %}
+                                
+                                {% for d in e.documents %}
+                                    <div class="row">
+                                        <div class="col text-start">
+                                            {{ d.title }}
+                                        </div>
+                                        <div class="col-md-auto text-center">
+                                            {{ mm.mimeIcon(d.storedObject.type) }}
+                                        </div>
+                                        <div class="col col-lg-4 text-end">
+                                            {{ m.download_button_small(d.storedObject, d.title) }}
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                                
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'No document found'|trans }}</span>
+                            {% endif %}
+                        </div>
+                        
+                    {% endif %}
                 </td>
             </tr>
         {% endfor %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig
index b09f91cfd..eb358a651 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig
@@ -4,11 +4,11 @@
 
 
 {% block content %}
-<div class="accompanying_course_work-create">
+<div class="accompanying-course-work">
 
-            <h1>{{ block('title') }}</h1>
+    <h1>{{ block('title') }}</h1>
 
-            <div id="accompanying_course_work_create"></div>
+    <div id="accompanying_course_work_create"></div>
 
 </div>
 {% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
index 37a6812bb..46954323a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
@@ -6,7 +6,7 @@
 
 {% block content %}
 
-    <div class="accompanying_course_work-list">
+    <div class="accompanying-course-work">
         <h2 class="badge-title">
             <span class="title_label"></span>
             <span class="title_action">{{ work.socialAction|chill_entity_render_string }}</span>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
index d5ded06cf..c478abfd4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="accompanying_course_work-edit">
+<div class="accompanying-course-work">
     <h1>{{ block('title') }}</h1>
     <div id="accompanying_course_work_edit"></div>
 </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
index 3efaa2251..b12466e18 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
@@ -13,16 +13,20 @@
 {% endblock %}
 
 {% block content %}
-    <div class="accompanying_course_work">
+    <div class="accompanying-course-work">
 
         <h1>{{ block('title') }}</h1>
 
         {% if works|length == 0 %}
             <p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
         {% else %}
-            <div class="flex-table accompanying_course_work-list">
+            <div class="flex-table">
                 {% for w in works %}
-                    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with { 'displayAction': true } %}
+                    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
+                        'displayAction': true,
+                        'displayContent': 'short',
+                        'itemBlocClass': ''
+                    } %}
                 {% endfor %}
             </div>
         {% endif %}
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 4621cb97a..51c9bf926 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
@@ -1,4 +1,4 @@
-  <div class="accompanying_course_work-list">
+  <div class="accompanying-course-work">
     {% for w in works | slice(0,5) %}
 
     <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/show.html.twig
new file mode 100644
index 000000000..9e47b61d1
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/show.html.twig
@@ -0,0 +1,60 @@
+{% extends '@ChillPerson/AccompanyingCourse/layout.html.twig' %}
+
+{% import '@ChillPerson/AccompanyingCourseWork/_macros.html.twig' as macro  %}
+
+{% block title 'accompanying_course_work.Show accompanying course work'|trans %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_async_upload') }}
+    {{ encore_entry_link_tags('mod_entity_workflow_pick') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_async_upload') }}
+    {{ encore_entry_script_tags('mod_entity_workflow_pick') }}
+{% endblock %}
+
+{% block content %}
+    <div class="accompanying-course-work">
+        <h1>{{ block('title') }}</h1>
+    
+        <div class="flex-table mt-4">
+            {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
+                'w': work,
+                'displayAction': false,
+                'displayContent': 'long',
+                'itemBlocClass': 'uniq extended',
+            } %}
+            <div class="p-3 mt-3">{{ macro.metadata(work) }}</div>
+        </div>
+    
+        <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+                <a href="{{ path('chill_person_accompanying_period_work_list', { 'id': accompanyingCourse.id }) }}"
+                   class="btn btn-cancel">{{ 'Back to the list'|trans }}</a>
+            </li>
+            <li>{{ macro.workflowButton(work) }}</li>
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', work) %}
+                <li>
+                    <a class="btn btn-edit"
+                       href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': work.id }) }}"
+                    >{{ 'Edit'|trans }}</a>
+                </li>
+            {% endif %}
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', work) %}
+                <li>
+                    <a class="btn btn-delete"
+                       href="{{ path('chill_person_accompanying_period_work_delete', { 'id': work.id } ) }}"
+                    >{{ 'Delete'|trans }}</a>
+                </li>
+            {% endif %}
+        </ul>
+        
+    </div>
+{% endblock %}
+
+{% block block_post_menu %}
+    <div class="post-menu pt-4"></div>
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig
index 57cf503b8..18ea9d521 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig
@@ -1,7 +1,9 @@
-<div class="flex-table accompanying_course_work-list">
+<div class="flex-table accompanying-course-work">
     {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
         'w': work,
-        'itemBlocClass': 'bg-chill-llight-gray'
+        'displayAction': false,
+        'displayContent': 'short',
+        'itemBlocClass': 'uniq colored'
     } %}
 </div>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig
index 488f31661..ca95760dd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig
@@ -1,4 +1,4 @@
-<div class="flex-table accompanying_course_work-list">
+<div class="flex-table accompanying-course-work">
     <div class="item-bloc evaluation-item bg-chill-llight-gray">
         <div class="item-row mb-2">
             <h2 class="badge-title">
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig
index 984277297..5ab93896a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig
@@ -5,7 +5,7 @@
         {{ 'workflow.doc for evaluation deleted'|trans }}
     </div>
 {% else %}
-    <div class="flex-table accompanying_course_work-list">
+    <div class="flex-table accompanying-course-work">
         <div class="item-bloc evaluation-item bg-chill-llight-gray">
             <div class="item-row mb-2">
                 <h1>{{ doc.title }}</h1>
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index 7c9afba48..765c5a938 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -232,6 +232,8 @@ No resources: "Pas d'interlocuteurs privilégiés"
 Persons associated: Personnes concernés
 Referrer: Référent
 Referrers: Agents traitants
+Referrer2: Agent traitant
+No referrer: Pas d'agent traitant
 Some peoples does not belong to any household currently. Add them to an household soon: Certaines personnes n'appartiennent à aucun ménage actuellement. Renseignez leur ménage dès que possible.
 Add to household now: Ajouter à un ménage
 Any resource for this accompanying course: Aucun interlocuteur privilégié pour ce parcours
@@ -886,6 +888,7 @@ accompanying_course_work:
     create: Créer une action
     Create accompanying course work: Créer une action d'accompagnement
     Edit accompanying course work: Modifier une action d'accompagnement
+    Show accompanying course work: Action d'accompagnement
     List accompanying course work: Liste des actions d'accompagnement
     action: Action
     create_date: Date de création