diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a05545ed..a3b180cac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ and this project adheres to
 ## Unreleased
 
 <!-- write down unreleased development here -->
+* [parcours] autosave of the pinned comment for draft accompanying course (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/477)
+* [main] filter user job in undispatch acc period to assign (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/472)
 * [main] filter user job in undispatch acc period to assign (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/472)
 * [person] Add url in accompanying period work evaluations entity and form (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/476)
 * [person] Add document generation in admin and in person/{id}/document (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/464)
@@ -30,6 +32,7 @@ and this project adheres to
 * [confidential] Fix position of toggle button so it does not cover text nor fall outside of box (no issue)
 * [parcours] Fix edit of both thirdparty and contact name (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/474)
 * [template] do not list inactive templates (for doc generator)
+* [household] bugfix if position of member is null, renderbox no longer throws an error (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/480)
 * [parcours] location cannot be removed if linked to a user (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/478)
 * [person] email added to twig personRenderbox (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/490)
 * [person] Add link to current household in person banner (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/484)
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
index 67f3e2f42..75f1a21c8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
@@ -1,17 +1,22 @@
 /**
  * Generic api method that can be adapted to any fetch request
  */
-const makeFetch = (method, url, body) => {
-    return fetch(url, {
+const makeFetch = (method, url, body, options) => {
+    let opts = {
         method: method,
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
         },
         body: (body !== null) ? JSON.stringify(body) : null
-    })
+    };
+
+    if (typeof options !== 'undefined') {
+        opts = Object.assign(opts, options);
+    }
+
+    return fetch(url, opts)
     .then(response => {
         if (response.ok) {
-            console.log('200 error')
             return response.json();
         }
 
diff --git a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
index b05da5626..1f85e4ad0 100644
--- a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
+++ b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
@@ -15,6 +15,7 @@ use Chill\MainBundle\DependencyInjection\MissingBundleException;
 use Chill\MainBundle\Security\Authorization\ChillExportVoter;
 use Chill\PersonBundle\Controller\HouseholdCompositionTypeApiController;
 use Chill\PersonBundle\Doctrine\DQL\AddressPart;
+use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodCommentVoter;
 use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodResourceVoter;
 use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodVoter;
 use Chill\PersonBundle\Security\Authorization\PersonVoter;
@@ -415,6 +416,25 @@ class ChillPersonExtension extends Extension implements PrependExtensionInterfac
                         ],
                     ],
                 ],
+                [
+                    'class' => \Chill\PersonBundle\Entity\AccompanyingPeriod\Comment::class,
+                    'name' => 'accompanying_period_comment',
+                    'base_path' => '/api/1.0/person/accompanying-period/comment',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => false,
+                                Request::METHOD_PATCH => true,
+                                Request::METHOD_HEAD => false,
+                                Request::METHOD_DELETE => false,
+                            ],
+                            'roles' => [
+                                Request::METHOD_PATCH => AccompanyingPeriodCommentVoter::EDIT,
+                            ],
+                        ],
+                    ],
+                ],
                 [
                     'class' => \Chill\PersonBundle\Entity\AccompanyingPeriod\Resource::class,
                     'name' => 'accompanying_period_resource',
diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
index d75ade12b..bd3211c5d 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@@ -257,9 +257,11 @@ class AccompanyingPeriod implements
 
     /**
      * @ORM\ManyToOne(
-     *     targetEntity=Comment::class
+     *     targetEntity=Comment::class,
+     *     cascade={"persist"},
      * )
      * @Groups({"read"})
+     * @ORM\JoinColumn(onDelete="SET NULL")
      */
     private ?Comment $pinnedComment = null;
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index a852d71a0..8ae7dfff4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -14,24 +14,27 @@
 
             <ckeditor
                name="content"
-               v-bind:placeholder="$t('comment.content')"
+               :placeholder="$t('comment.content')"
                :editor="editor"
                v-model="content"
                tag-name="textarea">
             </ckeditor>
 
-            <div v-if="pinnedComment" class="metadata">
-               {{ $t('comment.created_by', [
-               pinnedComment.creator.text,
-               $d(pinnedComment.createdAt.datetime, 'long')
-            ]) }}
+            <div class="sub-comment">
+               <div v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'" class="metadata">
+                  {{ $t('comment.created_by', [
+                        pinnedComment.creator.text,
+                        $d(pinnedComment.updatedAt.datetime, 'long')
+                     ])
+                  }}
+               </div>
+               <div class="loading">
+                  <i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
+               </div>
             </div>
 
             <div>
                <ul class="record_actions">
-                  <li>
-                     <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
-                  </li>
                   <li v-if="pinnedComment !== null">
                      <a class="btn btn-delete"
                         @click="removeComment">
@@ -50,6 +53,7 @@
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+import { mapState } from "vuex";
 
 export default {
    name: "Comment",
@@ -59,22 +63,58 @@ export default {
    data() {
       return {
          editor: ClassicEditor,
-         formdata: {
-            type: "accompanying_period_comment",
-            content: ''
-         }
+         loading: false,
+         lastRecordedContent: null,
       }
    },
    computed: {
-      pinnedComment() {
-         return this.$store.state.accompanyingCourse.pinnedComment;
-      },
+      ...mapState({
+         pinnedComment: state => state.accompanyingCourse.pinnedComment,
+      }),
       content: {
          set(value) {
-            this.formdata.content = value;
+           console.log('new comment value', value);
+            console.log('previous value', this.lastRecordedContent);
+            this.lastRecordedContent = value;
+
+           setTimeout(() => {
+               console.log('performing test on ', value);
+               if (this.lastRecordedContent === value) {
+                 this.loading = true;
+                 if (value !== '') {
+                   this.$store.dispatch('updatePinnedComment', value)
+                       .then(() => {
+                         this.loading = false;
+                       })
+                       .catch(({name, violations}) => {
+                         if (name === 'ValidationException' || name === 'AccessException') {
+                           violations.forEach((violation) => this.$toast.open({message: violation}));
+                         } else {
+                           this.$toast.open({message: 'An error occurred'})
+                         }
+                       });
+                 } else {
+                   if (this.$store.state.accompanyingCourse.pinnedComment !== null) {
+                     this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
+                         .then(() => {
+                           this.loading = false;
+                           this.lastRecoredContent = null;
+                         })
+                         .catch(({name, violations}) => {
+                           if (name === 'ValidationException' || name === 'AccessException') {
+                             violations.forEach((violation) => this.$toast.open({message: violation}));
+                           } else {
+                             this.$toast.open({message: 'An error occurred'})
+                           }
+                         });
+                   }
+                 }
+               }
+           }, 3000);
+
          },
-         get() {
-            return (this.pinnedComment)? this.pinnedComment.content : {};
+        get() {
+          return this.pinnedComment ? this.pinnedComment.content : '';
          }
       },
       errors() {
@@ -82,18 +122,11 @@ export default {
       }
    },
    methods: {
-      submitform() {
-         this.$store.dispatch('postFirstComment', this.formdata)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+      onContentChange() {
+         let lastRecordedContent = this.formData.content;
       },
       removeComment() {
-         this.$store.dispatch('postFirstComment', {})
+         this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
             .catch(({name, violations}) => {
                if (name === 'ValidationException' || name === 'AccessException') {
                   violations.forEach((violation) => this.$toast.open({message: violation}));
@@ -104,15 +137,18 @@ export default {
       }
    }
 }
-/*
-* TODO
-* - [x] delete button in ul record_actions, but not in form
-* - [ ] display updatedAt => pinnedComment fetch PATCH content changes MUST NOT change object id !!
-*/
 </script>
 
 <style lang="scss">
 div.ck-editor.ck-reset {
    margin: 0.6em 0;
 }
+div.sub-comment {
+   display: flex;
+   justify-content: space-between;
+   div.loading {
+      margin-right: 6px;
+      margin-left: 6px;
+   }
+}
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 5f0321c70..f1e2de958 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -122,7 +122,7 @@ const appMessages = {
          title: "Observations",
          label: "Ajout d'une note",
          content: "Rédigez une première note…",
-         created_by: "créé par {0}, le {1}"
+         created_by: "créé par {0}, mis à jour le {1}"
       },
       confirm: {
          title: "Confirmation",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index f7fd59b32..06a3606ab 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -42,7 +42,11 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
             referrersSuggested: [],
             // all the users available
             users: [],
-            permissions: {}
+            permissions: {},
+            // controller for updating comment
+            updateCommentAbortController: null,
+            // waiting response for inserting first comment
+            postFirstPinnedCommentResponse: null,
          },
          getters: {
             isParticipationValid(state) {
@@ -203,9 +207,35 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
                //console.log('### mutation: toggleConfidential');
                state.accompanyingCourse.confidential = value;
             },
-            postFirstComment(state, comment) {
-               //console.log('### mutation: postFirstComment', comment);
-               state.accompanyingCourse.pinnedComment = comment;
+            setPinnedComment(state, content) {
+               if (null === state.accompanyingCourse.pinnedComment) {
+                  state.accompanyingCourse.pinnedComment = {
+                     id: -1,
+                     content,
+                     type: "accompanying_period_comment",
+                  };
+               } else {
+                  state.accompanyingCourse.pinnedComment.content = content;
+               }
+            },
+            setPinnedCommentDetails(state, value) {
+               state.accompanyingCourse.pinnedComment.id = value.id;
+               if (typeof value.creator !== 'undefined') {
+                  state.accompanyingCourse.pinnedComment.creator = value.creator;
+                  state.accompanyingCourse.pinnedComment.updatedBy = value.updatedBy;
+                  state.accompanyingCourse.pinnedComment.updatedAt = value.updatedAt;
+                  state.accompanyingCourse.pinnedComment.createdAt = value.createdAt;
+
+               }
+            },
+            removePinnedComment(state, value) {
+               state.accompanyingCourse.pinnedComment = null;
+            },
+            setPinCommentAbortController(state, value) {
+               state.updateCommentAbortController = value;
+            },
+            setPostFirstPinnedCommentResponse(state, value) {
+               state.postFirstPinnedCommentResponse = value;
             },
             updateSocialIssues(state, value) {
                console.log('updateSocialIssues', value);
@@ -337,6 +367,87 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
                      throw error;
                   })
             },
+            /**
+             * Add/remove pinnedComment
+             */
+            removePinnedComment({ commit }, payload) {
+               const body = {type: "accompanying_period_comment", id: payload.id};
+               const url = `/api/1.0/person/accompanying-course/${id}/comment.json`;
+
+               return makeFetch('DELETE', url, body)
+                  .then((response) => {
+                     commit('removePinnedComment');
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            /**
+             * internal method to insert a new comment
+             *
+             * @param commit
+             * @param dispatch
+             * @param content
+             * @returns {*}
+             */
+            addPinnedComment({ commit, dispatch }, content) {
+               const url = `/api/1.0/person/accompanying-course/${id}/comment.json`;
+
+               return makeFetch('POST', url, {type: "accompanying_period_comment", content})
+                  .then((response) => {
+                     commit('setPinnedCommentDetails', response);
+                     return dispatch('patchFirstComment', response);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            updatePinnedComment({ commit, state, dispatch }, content) {
+               commit('setPinnedComment', content);
+               if (state.accompanyingCourse.pinnedComment.id === -1 && state.postFirstPinnedCommentResponse === null) {
+                  let r = dispatch('addPinnedComment', content).then(() => {
+                     commit('setPostFirstPinnedCommentResponse', null);
+                  });
+                  commit('setPostFirstPinnedCommentResponse', r);
+               } else {
+                  (state.postFirstPinnedCommentResponse === null ? Promise.resolve() : state.postFirstPinnedCommentResponse).then(() => {
+                     dispatch('updateExistingPinnedComment', content);
+                  });
+               }
+            },
+            /**
+             * internal method to patch an existing comment
+             *
+             * @param commit
+             * @param state
+             * @param comment
+             * @returns {*}
+             */
+            updateExistingPinnedComment({ commit, state }, content) {
+               const payload = {type: "accompanying_period_comment",  content, id: state.accompanyingCourse.pinnedComment.id};
+               const url = `/api/1.0/person/accompanying-period/comment/${payload.id}.json`;
+
+               if (state.updateCommentAbortController !== null) {
+                  state.updateCommentAbortController.abort();
+                  commit('setPinCommentAbortController', null);
+               }
+
+               let controller = new AbortController();
+               commit('setPinCommentAbortController', controller);
+
+               return makeFetch('PATCH', url, payload, { signal: controller.signal })
+                  .then((response) => {
+                     commit('setPinCommentAbortController', null);
+                     commit('setPinnedCommentDetails', response);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     commit('setPinCommentAbortController', null);
+                     throw error;
+                  })
+            },
             /**
              * Add/remove/display anonymous requestor
              */
@@ -606,18 +717,20 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
 
                return Promise.all(promises);
             },
-            postFirstComment({ commit }, payload) {
-               const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", pinnedComment: payload }
-
+            patchFirstComment({ commit }, payload) {
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = {
+                  type: "accompanying_period",
+                  pinnedComment: {
+                     type: "accompanying_period_comment",
+                     id: payload.id
+                  }
+               };
                return makeFetch('PATCH', url, body)
-                  .then((response) => {
-                     commit('postFirstComment', response.pinnedComment);
-                  })
                   .catch((error) => {
                      commit('catchError', error);
                      throw error;
-                  })
+                  });
             },
             updateSocialIssues({ state, commit, dispatch }, { payload, body, method }) {
                const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
index 16d0fa2ff..163f49bcf 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@@ -87,10 +87,14 @@ export default {
     currentMembers() {
       let members = this.household.members.filter(m => this.household.current_members_id.includes(m.id))
         .sort((a, b) => {
-          if (a.position.ordering < b.position.ordering) {
+
+          const orderA = a.position ? a.position.ordering : 0;
+          const orderB = b.position ? b.position.ordering : 0;
+
+          if (orderA < orderB) {
             return -1;
           }
-          if (a.position.ordering > b.position.ordering) {
+          if (orderA > orderB) {
             return 1;
           }
           if (a.holder && !b.holder) {
diff --git a/src/Bundle/ChillPersonBundle/migrations/Version20220310124318.php b/src/Bundle/ChillPersonBundle/migrations/Version20220310124318.php
new file mode 100644
index 000000000..211a2e68a
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/migrations/Version20220310124318.php
@@ -0,0 +1,38 @@
+<?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\Migrations\Person;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Change constraint on pinnedComment in Accompanying period.
+ */
+final class Version20220310124318 extends AbstractMigration
+{
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_person_accompanying_period DROP CONSTRAINT fk_e260a868b0804e90');
+        $this->addSql('ALTER TABLE chill_person_accompanying_period ADD CONSTRAINT fk_e260a868b0804e90 FOREIGN KEY (pinnedcomment_id) REFERENCES chill_person_accompanying_period_comment (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+
+    public function getDescription(): string
+    {
+        return 'Change constraint on pinnedComment in Accompanying period';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_person_accompanying_period DROP CONSTRAINT FK_E260A868B0804E90');
+        $this->addSql('ALTER TABLE chill_person_accompanying_period ADD CONSTRAINT FK_E260A868B0804E90 FOREIGN KEY (pinnedComment_id) REFERENCES chill_person_accompanying_period_comment (id) ON DELETE SET NULL NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+}
diff --git a/src/Bundle/ChillTaskBundle/translations/messages.fr.yml b/src/Bundle/ChillTaskBundle/translations/messages.fr.yml
index 5633c0219..a2a57708f 100644
--- a/src/Bundle/ChillTaskBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillTaskBundle/translations/messages.fr.yml
@@ -46,6 +46,7 @@ User: Utilisateur
 "Associated tasks": "Tâches associées"
 "My tasks": "Mes tâches"
 "Tasks for this accompanying period": "Tâches pour ce parcours d'accompagnement"
+"Tasks for {{ name }}": "Tâches pour {{ name }}"
 "No description": "Pas de description"
 "No dates specified": "Dates non spécifiées"
 "No one assignee": "Aucune personne assignée"