diff --git a/src/Bundle/ChillDocStoreBundle/DependencyInjection/ChillDocStoreExtension.php b/src/Bundle/ChillDocStoreBundle/DependencyInjection/ChillDocStoreExtension.php
index a3fd04ca3..036a50722 100644
--- a/src/Bundle/ChillDocStoreBundle/DependencyInjection/ChillDocStoreExtension.php
+++ b/src/Bundle/ChillDocStoreBundle/DependencyInjection/ChillDocStoreExtension.php
@@ -38,6 +38,7 @@ class ChillDocStoreExtension extends Extension implements PrependExtensionInterf
         $loader->load('services/menu.yaml');
         $loader->load('services/fixtures.yaml');
         $loader->load('services/form.yaml');
+        $loader->load('services/templating.yaml');
     }
 
     public function prepend(ContainerBuilder $container)
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
index 6c664b314..e9147ed4a 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
@@ -1,4 +1,5 @@
 {% 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="item-bloc document-item bg-chill-llight-gray">
@@ -9,8 +10,10 @@
             <div class="col-8">
                 <h3>{{ document.title }}</h3>
 
+                {{ mm.mimeIcon(document.object.type) }}
+
                 {% if document.description is not empty %}
-                    <blockquote class="chill-user-quote mt-2">
+                    <blockquote class="chill-user-quote mt-4">
                         {{ document.description }}
                     </blockquote>
                 {% endif %}
@@ -42,26 +45,14 @@
             {{ m.download_button(document.object, document.title) }}
         </li>
         <li>
-        {% if not freezed %}
-            {% set button = {
-                'changeIcon': 'fa-unlock',
-            } %}{#
-                'changeClass'   string
-                'noText'        boolean
-            #}
-            {# vue component
-            <span
-                data-module="wopi-link"
-                data-wopi-url="{{ path('chill_wopi_file_edit', {'fileId': document.object.uuid}) }}"
-                data-doc-title="{{ document.title|e('html_attr') }}"
-                data-doc-type="{{ document.object.type|e('html_attr') }}"
-                data-button="{{ button|json_encode }}"
-            ></span> #}
-            <a class="btn btn-update" href="{{ chill_path_add_return_path('chill_wopi_file_edit', {'fileId': document.object.uuid}) }}">{{ 'Edit'|trans }}</a>
-        {% else %}
-            <a class="btn btn-update change-icon disabled" href="#" title="{{ 'workflow.freezed document'|trans }}">
-                <i class="fa fa-lock me-2"></i>{{ 'Update document'|trans }}
-            </a>
+        {% if chill_document_is_editable(document.object) %}
+            {% if not freezed %}
+                {{ document.object|chill_document_edit_button({'title': document.title|e('html') }) }}
+            {% else %}
+                <a class="btn btn-wopilink disabled" href="#" title="{{ 'workflow.freezed document'|trans }}">
+                    {{ 'Update document'|trans }}
+                </a>
+            {% endif %}
         {% endif %}
         {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_SEE', document) and document.course != null %}
             <li>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/edit.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/edit.html.twig
index e28611701..d7a5325cf 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/edit.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/edit.html.twig
@@ -19,7 +19,7 @@
 	{{ form_row(form.description) }}
 	{{ form_row(form.object, { 'label': 'Document', 'existing': document.object }) }}
 
-	<ul class="record_actions">
+	<ul class="record_actions sticky-form-buttons">
 		<li class="cancel">
 			<a href="{{ path('accompanying_course_document_index', {'course': accompanyingCourse.id}) }}" class="btn btn-cancel">
 				{{ 'Back to the list' | trans }}
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/index.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/index.html.twig
index 3965e6292..0d4a7d637 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/index.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/index.html.twig
@@ -9,13 +9,13 @@
 {% block js %}
 	{{ parent() }}
 	{{ encore_entry_script_tags('mod_async_upload') }}
-  {{ encore_entry_script_tags('mod_docgen_picktemplate') }}
+    {{ encore_entry_script_tags('mod_docgen_picktemplate') }}
 {% endblock %}
 
 {% block css %}
 	{{ parent() }}
 	{{ encore_entry_link_tags('mod_async_upload') }}
-  {{ encore_entry_link_tags('mod_docgen_picktemplate') }}
+    {{ encore_entry_link_tags('mod_docgen_picktemplate') }}
 {% endblock %}
 
 {% block content %}
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/show.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/show.html.twig
index 610b5249b..1e4fdb8e6 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/show.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/show.html.twig
@@ -3,6 +3,7 @@
 {% set activeRouteKey = '' %}
 
 {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
+{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
 
 {% block title %}
 	{# {{ 'Detail of document of %name%'|trans({ '%name%': accompanyingCourse|chill_entity_render_string } ) }} #}
@@ -18,16 +19,18 @@
 {% block content %}
 <div class="document-show">
     <h1>{{ block('title') }}</h1>
-    
-    <dl class="chill_view_data">
+
+    {{ mm.mimeIcon(document.object.type) }}
+
+    <dl class="chill_view_data mt-4">
         <dt>{{ 'Title'|trans }}</dt>
         <dd>{{ document.title }}</dd>
-        
+
         {% if document.category is not null %}
             <dt>{{ 'Category'|trans }}</dt>
             <dd>{{ document.category.name|localize_translatable_string }}</dd>
         {% endif %}
-        
+
         <dt>{{ 'Description' | trans }}</dt>
         <dd>
             {% if document.description is empty %}
@@ -39,7 +42,7 @@
             {% endif %}
         </dd>
     </dl>
-    
+
     <ul class="record_actions sticky-form-buttons">
         <li class="cancel">
             <a href="{{ path('accompanying_course_document_index', {'course': accompanyingCourse.id}) }}" class="btn btn-cancel">
@@ -49,11 +52,15 @@
         <li>
             {{ m.download_button(document.object, document.title) }}
         </li>
+        {% if chill_document_is_editable(document.object) %}
+            <li>
+                {{ document.object|chill_document_edit_button }}
+            </li>
+        {% endif %}
         {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_UPDATE', document) %}
             <li>
-                <a href="{{ path('accompanying_course_document_edit', {'id': document.id, 'course': accompanyingCourse.id}) }}" class="btn btn-edit">
-                    {{ 'Edit' | trans }}
-                </a>
+                <a href="{{ path('accompanying_course_document_edit', {'id': document.id, 'course': accompanyingCourse.id}) }}"
+                   class="btn btn-edit" title="{{ 'Edit attributes' | trans }}"></a>
             </li>
         {% endif %}
         {% set workflows_frame = chill_entity_workflow_list('Chill\\DocStoreBundle\\Entity\\AccompanyingCourseDocument', document.id) %}
@@ -65,7 +72,7 @@
     </ul>
 </div>
 {% endblock %}
- 
+
 {% block block_post_menu %}
     <div class="post-menu pt-4"></div>
 {% endblock %}
@@ -74,4 +81,4 @@
     {{ parent() }}
     {{ encore_entry_script_tags('mod_async_upload') }}
     {{ encore_entry_script_tags('mod_entity_workflow_pick') }}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/Button/wopi_edit_document.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/Button/wopi_edit_document.html.twig
new file mode 100644
index 000000000..f25c06030
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/Button/wopi_edit_document.html.twig
@@ -0,0 +1,9 @@
+
+{# Twig way
+    TODO: une route, un template avec un header CHILL et un iframe
+#}
+<a href="{{ chill_path_add_return_path('chill_wopi_file_edit', {'fileId': document.uuid}) }}"
+    class="btn btn-wopilink">
+    {{ 'online_edit_document'|trans }}
+</a>
+
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item.html.twig
index 45ebf2799..358127bfb 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item.html.twig
@@ -1,11 +1,14 @@
 {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
-
+{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
 <div class="item-bloc">
     <div class="item-row">
         <div class="item-col">
             <div class="denomination h2">
                 {{ document.title }}
             </div>
+            <div>
+                {{ mm.mimeIcon(document.object.type) }}
+            </div>
             <div>
                 <p>{{ document.category.name|localize_translatable_string }}</p>
             </div>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig
new file mode 100644
index 000000000..a9bc07e2f
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/Macro/macro_mimeicon.html.twig
@@ -0,0 +1,55 @@
+{% macro mimeIcon(type) %}
+    
+    {# mapping
+        forkawesome and mime type  https://gist.github.com/colemanw/9c9a12aae16a4bfe2678de86b661d922
+    #}
+    {% set mapmime = {
+        'image': 'fa-file-image-o',
+        'audio': 'fa-file-audio-o',
+        'video': 'fa-file-video-o',
+        'application/pdf': 'fa-file-pdf-o',
+        'application/msword': 'fa-file-word-o',
+        'application/vnd.ms-word': 'fa-file-word-o',
+        'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml': 'fa-file-word-o',
+        'application/vnd.ms-excel': 'fa-file-excel-o',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml': 'fa-file-excel-o',
+        'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
+        'application/vnd.ms-powerpoint': 'fa-file-powerpoint-o',
+        'application/vnd.openxmlformats-officedocument.presentationml': 'fa-file-powerpoint-o',
+        'application/vnd.oasis.opendocument.presentation': 'fa-file-powerpoint-o',
+        'text/plain': 'fa-file-text-o',
+        'text/html': 'fa-file-code-o',
+        'application/json': 'fa-file-code-o',
+        'application/gzip': 'fa-file-archive-o',
+        'application/zip': 'fa-file-archive-o',
+    } %}
+    
+    {% set icon = 'fa-file-o' %}
+    {% for key,val in mapmime %}
+        {% if type starts with key %}
+            {% set icon = val %}
+        {% endif %}
+    {% endfor %}
+    
+    {# TODO improve mapping
+        mime type and friendly name  https://gist.github.com/rosskmurphy/3724501
+    #}
+    {% set maptype = {
+        'fa-file-word-o': 'office document/texte',
+        'fa-file-excel-o': 'office document/tableur',
+        'fa-file-powerpoint-o': 'office document/presentation',
+    } %}
+    
+    {% set label = type %}
+    {% for key, val in maptype %}
+        {% if icon == key %}
+            {% set label = val %}
+        {% endif %}
+    {% endfor %}
+    
+    <div class="metadata">
+        <i class="fa {{ icon }} fa-lg me-1"></i>
+        {{ label|capitalize }}
+    </div>
+{% endmacro %}
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/show.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/show.html.twig
index 27b53b638..723757425 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/show.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/show.html.twig
@@ -19,6 +19,7 @@
 {% set activeRouteKey = '' %}
 
 {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
+{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
 
 {% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %}
 
@@ -29,6 +30,8 @@
 {% block personcontent %}
     <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
 
+    {{ mm.mimeIcon(document.object.type) }}
+
     <dl class="chill_view_data">
         <dt>{{ 'Title'|trans }}</dt>
         <dd>{{ document.title }}</dd>
@@ -54,7 +57,7 @@
 
     </dl>
 
-    <ul class="record_actions">
+    <ul class="record_actions sticky-form-buttons">
         <li class="cancel">
             <a href="{{ path('person_document_index', {'person': person.id}) }}" class="btn btn-cancel">
                 {{ 'Back to the list' | trans }}
@@ -65,6 +68,12 @@
             {{ m.download_button(document.object, document.title) }}
         </li>
 
+        {% if chill_document_is_editable(document.object) %}
+            <li>
+                {{ document.object|chill_document_edit_button }}
+            </li>
+        {% endif %}
+
         {% if is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document) %}
             <li>
                 <a href="{{ path('person_document_edit', {'id': document.id, 'person': person.id}) }}" class="btn btn-edit">
diff --git a/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtension.php b/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtension.php
new file mode 100644
index 000000000..dcf1ea507
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtension.php
@@ -0,0 +1,36 @@
+<?php
+
+/**
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Chill\DocStoreBundle\Templating;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+use Twig\TwigFunction;
+
+class WopiEditTwigExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('chill_document_edit_button', [WopiEditTwigExtensionRuntime::class, 'renderEditButton'], [
+                'needs_environment' => true,
+                'is_safe' => ['html'],
+            ]),
+        ];
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('chill_document_is_editable', [WopiEditTwigExtensionRuntime::class, 'isEditable']),
+        ];
+    }
+}
diff --git a/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtensionRuntime.php b/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtensionRuntime.php
new file mode 100644
index 000000000..50f495383
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Templating/WopiEditTwigExtensionRuntime.php
@@ -0,0 +1,55 @@
+<?php
+
+/**
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Chill\DocStoreBundle\Templating;
+
+use ChampsLibres\WopiLib\Contract\Service\Discovery\DiscoveryInterface;
+use Chill\DocStoreBundle\Entity\StoredObject;
+use Twig\Environment;
+use Twig\Extension\RuntimeExtensionInterface;
+use function array_key_exists;
+
+class WopiEditTwigExtensionRuntime implements RuntimeExtensionInterface
+{
+    public const TEMPLATE = '@ChillDocStore/Button/wopi_edit_document.html.twig';
+
+    private DiscoveryInterface $discovery;
+
+    public function __construct(DiscoveryInterface $discovery)
+    {
+        $this->discovery = $discovery;
+    }
+
+    public function isEditable(StoredObject $document): bool
+    {
+        $mime_type = $this->discovery->discoverMimeType($document->getType());
+
+        if ([] === $mime_type) {
+            return false;
+        }
+
+        foreach ($mime_type as $item) {
+            if (array_key_exists('default', $item) && 'true' === $item['default']) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    public function renderEditButton(Environment $environment, StoredObject $document, ?array $options = null): string
+    {
+        return $environment->render(self::TEMPLATE, [
+            'document' => $document,
+            'options' => $options,
+        ]);
+    }
+}
diff --git a/src/Bundle/ChillDocStoreBundle/config/services/templating.yaml b/src/Bundle/ChillDocStoreBundle/config/services/templating.yaml
new file mode 100644
index 000000000..426ccd5c1
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/config/services/templating.yaml
@@ -0,0 +1,6 @@
+services:
+
+  Chill\DocStoreBundle\Templating\:
+    resource: ../../Templating
+    autoconfigure: true
+    autowire: true
diff --git a/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml b/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
index 3ee10721c..f438731d4 100644
--- a/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml
@@ -10,6 +10,7 @@ New document for %name%: Nouveau document pour %name%
 Editing document for %name%: Modification d'un document pour %name%
 Edit Document: Modification d'un document
 Update document: Modifier le document
+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
@@ -51,4 +52,7 @@ Id inside bundle: Identifiant
 Document class: Classe de document
 no records found:
 Create new category: Créer une nouvelle catégorie
-Back to the category list: Retour à la liste
\ No newline at end of file
+Back to the category list: Retour à la liste
+
+# WOPI EDIT
+online_edit_document: Éditer en ligne
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
index 2c3459d39..3a9b6df80 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
@@ -15,6 +15,7 @@ $chill-theme-buttons: (
    "action":        $chill-orange,
    "edit":          $chill-orange,
    "update":        $chill-orange,
+   "wopilink":      $chill-orange,
    "show":          $chill-blue,
    "view":          $chill-blue,
    "misc":          $gray-300,
@@ -54,6 +55,7 @@ $chill-theme-buttons: (
    &.btn-action,
    &.btn-edit,
    &.btn-tpchild,
+   &.btn-wopilink,
    &.btn-update {
        &, &:hover {
           color: $light;
@@ -66,6 +68,7 @@ $chill-theme-buttons: (
    &.btn-create::before,
    &.btn-edit::before,
    &.btn-update::before,
+   &.btn-wopilink::before,
    &.btn-show::before,
    &.btn-view::before,
    &.btn-save::before,
@@ -98,6 +101,7 @@ $chill-theme-buttons: (
    &.btn-create::before    { content: "\f067"; } // fa-plus
    &.btn-edit::before,
    &.btn-update::before    { content: "\f040"; } // fa-pencil
+   &.btn-wopilink::before  { content: "\f1dd"; } // fa-paragraph
    &.btn-show::before,
    &.btn-view::before      { content: "\f06e"; } // fa-eye
    &.btn-save::before      { content: "\f0c7"; } // fa-floppy-o
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js b/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js
index f39b6c83b..3cbecc05c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js
@@ -4,20 +4,34 @@ import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
 
 const i18n = _createI18n({});
 
+
+//TODO move to chillDocStore or ChillWopi
+
+/*
+
+tags to load module:
+
+<span data-module="wopi-link"
+    data-wopi-url="{{ path('chill_wopi_file_edit', {'fileId': document.uuid}) }}"
+    data-doc-type="{{ document.type|e('html_attr') }}"
+    data-options="{{ options|json_encode }}"
+        ></span>
+
+*/
+
 window.addEventListener('DOMContentLoaded', function (e) {
     document.querySelectorAll('span[data-module="wopi-link"]')
         .forEach(function (el) {
             createApp({
-                template: '<open-wopi-link :wopiUrl="wopiUrl" :title="title" :type="type" :button="button"></open-wopi-link>',
+                template: '<open-wopi-link :wopiUrl="wopiUrl" :type="type" :options="options"></open-wopi-link>',
                 components: {
                     OpenWopiLink
                 },
                 data() {
                     return {
                         wopiUrl: el.dataset.wopiUrl,
-                        title: el.dataset.docTitle,
                         type: el.dataset.docType,
-                        button: el.dataset.button ? JSON.parse(el.dataset.button) : {}
+                        options: el.dataset.options !== 'null' ? JSON.parse(el.dataset.options) : {}
                     }
                 }
             })
@@ -26,4 +40,4 @@ window.addEventListener('DOMContentLoaded', function (e) {
             ;
         })
     ;
-});
\ No newline at end of file
+});
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
index 75fb18de5..5f8a85208 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
@@ -1,12 +1,14 @@
 <template>
    <a v-if="isOpenDocument"
-      class="btn change-icon" :class="[isChangeClass ? button.changeClass : 'btn-edit']"
+      class="btn" :class="[
+         isChangeIcon ? 'change-icon' : '',
+         isChangeClass ? options.changeClass : 'btn-wopilink' ]"
       @click="openModal">
       
-      <i class="fa me-2" :class="[isChangeIcon ? button.changeIcon : 'fa-pencil']"></i>
+      <i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>
       
       <span v-if="!noText">
-         {{ $t('Update_document') }}
+         {{ $t('online_edit_document') }}
       </span>
    </a>
    
@@ -20,12 +22,14 @@
             <template v-slot:header>
                <img class="logo" :src="logo" height="45"/>
                   <span class="ms-auto me-3">
-                     {{ this.title }}
+                     <span v-if="options.title">{{ options.title }}</span>
                   </span>
+                  <!--
                   <a class="btn btn-outline-light">
                      <i class="fa fa-save fa-fw"></i>
                      {{ $t('save_and_quit') }}
                   </a>
+                  -->
             </template>
             
             <template v-slot:body>
@@ -71,15 +75,11 @@ export default {
          type: String,
          required: true
       },
-      title: {
-         type: String,
-         required: true
-      },
       type: {
          type: String,
          required: true
       },
-      button: {
+      options: {
          type: Object,
          required: false
       }
@@ -175,20 +175,20 @@ export default {
          return false;
       },
       noText() {
-         if (typeof this.button.noText !== 'undefined') {
-            return this.button.noText === true;
+         if (typeof this.options.noText !== 'undefined') {
+            return this.options.noText === true;
          }
          return false;
       },
       isChangeIcon() {
-         if (typeof this.button.changeIcon !== 'undefined') {
-            return (!(this.button.changeIcon === null || this.button.changeIcon === ''))
+         if (typeof this.options.changeIcon !== 'undefined') {
+            return (!(this.options.changeIcon === null || this.options.changeIcon === ''))
          }
          return false;
       },
       isChangeClass() {
-         if (typeof this.button.changeClass !== 'undefined') {
-            return (!(this.button.changeClass === null || this.button.changeClass === ''))
+         if (typeof this.options.changeClass !== 'undefined') {
+            return (!(this.options.changeClass === null || this.options.changeClass === ''))
          }
          return false;
       }
@@ -205,7 +205,7 @@ export default {
    i18n: {
       messages: {
          fr: {
-            Update_document: "Modifier le document",
+            online_edit_document: "Éditer en ligne",
             save_and_quit: "Enregistrer et quitter",
             loading: "Chargement de l'éditeur en ligne",
             invalid_title: "Format incompatible",
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig
index 588e2de0b..210d552e0 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig
@@ -6,7 +6,6 @@
 
 {% block js %}
     {{ parent() }}
-    
     {{ encore_entry_script_tags('mod_async_upload') }}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
     {{ encore_entry_script_tags('mod_entity_workflow_subscribe') }}
diff --git a/src/Bundle/ChillPersonBundle/Security/Authorization/AccompanyingPeriodWorkVoter.php b/src/Bundle/ChillPersonBundle/Security/Authorization/AccompanyingPeriodWorkVoter.php
index 47760c840..750cdd2dd 100644
--- a/src/Bundle/ChillPersonBundle/Security/Authorization/AccompanyingPeriodWorkVoter.php
+++ b/src/Bundle/ChillPersonBundle/Security/Authorization/AccompanyingPeriodWorkVoter.php
@@ -58,6 +58,11 @@ class AccompanyingPeriodWorkVoter extends Voter
                 case self::SEE:
                     return $this->security->isGranted(AccompanyingPeriodVoter::SEE_DETAILS, $subject->getAccompanyingPeriod());
 
+                case self::CREATE:
+                case self::UPDATE:
+                    return $this->security->isGranted(AccompanyingPeriodVoter::EDIT, $subject->getAccompanyingPeriod());
+
+
                 default:
                     throw new UnexpectedValueException("attribute {$attribute} is not supported");
             }
@@ -82,6 +87,6 @@ class AccompanyingPeriodWorkVoter extends Voter
 
     private function getRoles(): array
     {
-        return [self::SEE];
+        return [self::SEE, self::CREATE, self::UPDATE];
     }
 }