diff --git a/src/Bundle/ChillActivityBundle/Entity/Activity.php b/src/Bundle/ChillActivityBundle/Entity/Activity.php
index b0a84fa4e..eb1a8386e 100644
--- a/src/Bundle/ChillActivityBundle/Entity/Activity.php
+++ b/src/Bundle/ChillActivityBundle/Entity/Activity.php
@@ -106,12 +106,14 @@ class Activity implements HasCenterInterface, HasScopeInterface
     /**
      * @ORM\ManyToMany(targetEntity="Chill\PersonBundle\Entity\SocialWork\SocialIssue")
      * @ORM\JoinTable(name="chill_activity_activity_chill_person_socialissue")
+     * @Groups({"read"})
      */
     private $socialIssues;
 
     /**
      * @ORM\ManyToMany(targetEntity="Chill\PersonBundle\Entity\SocialWork\SocialAction")
      * @ORM\JoinTable(name="chill_activity_activity_chill_person_socialaction")
+     * @Groups({"read"})
      */
     private $socialActions;
 
diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
index 22bd45658..80d0991e7 100644
--- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php
+++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
@@ -112,31 +112,45 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('socialIssues') && $accompanyingPeriod) {
-            $builder->add('socialIssues', EntityType::class, [
-                'label' => $activityType->getLabel('socialIssues'),
-                'required' => $activityType->isRequired('socialIssues'),
-                'class' => SocialIssue::class,
-                'choice_label' => function (SocialIssue $socialIssue) {
-                    return $this->socialIssueRender->renderString($socialIssue, []);
-                },
-                'multiple' => true,
-                'choices' => $accompanyingPeriod->getRecursiveSocialIssues(),
-                'expanded' => true,
-            ]);
+            $builder->add('socialIssues', HiddenType::class);
+            $builder->get('socialIssues')
+               ->addModelTransformer(new CallbackTransformer(
+                   function (iterable $socialIssuesAsIterable): string {
+                       $socialIssueIds = [];
+                       foreach ($socialIssuesAsIterable as $value) {
+                          $socialIssueIds[] = $value->getId();
+                       }
+                       return implode(',', $socialIssueIds);
+                   },
+                   function (?string $socialIssuesAsString): array {
+                       return array_map(
+                          fn(string $id): ?SocialIssue => $this->om->getRepository(SocialIssue::class)->findOneBy(['id' => (int) $id]),
+                          explode(',', $socialIssuesAsString)
+                       );
+                   }
+               ))
+           ;
         }
 
         if ($activityType->isVisible('socialActions') && $accompanyingPeriod) {
-            $builder->add('socialActions', EntityType::class, [
-                'label' => $activityType->getLabel('socialActions'),
-                'required' => $activityType->isRequired('socialActions'),
-                'class' => SocialAction::class,
-                'choice_label' => function (SocialAction $socialAction) {
-                    return $this->socialActionRender->renderString($socialAction, []);
-                },
-                'multiple' => true,
-                'choices' => $accompanyingPeriod->getRecursiveSocialActions(),
-                'expanded' => true,
-            ]);
+            $builder->add('socialActions', HiddenType::class);
+            $builder->get('socialActions')
+               ->addModelTransformer(new CallbackTransformer(
+                   function (iterable $socialActionsAsIterable): string {
+                       $socialActionIds = [];
+                       foreach ($socialActionsAsIterable as $value) {
+                          $socialActionIds[] = $value->getId();
+                       }
+                       return implode(',', $socialActionIds);
+                   },
+                   function (?string $socialActionsAsString): array {
+                       return array_map(
+                          fn(string $id): ?SocialAction => $this->om->getRepository(SocialAction::class)->findOneBy(['id' => (int) $id]),
+                          explode(',', $socialActionsAsString)
+                       );
+                   }
+               ))
+           ;
         }
 
         if ($activityType->isVisible('date')) {
@@ -210,9 +224,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('persons')) {
-            $builder->add('persons', HiddenType::class, [
-               //'data_class' => Person::class,
-            ]);
+            $builder->add('persons', HiddenType::class);
             $builder->get('persons')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $personsAsIterable): string {
@@ -233,9 +245,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('thirdParties')) {
-            $builder->add('thirdParties', HiddenType::class, [
-               //'data_class' => ThirdParty::class,
-            ]);
+            $builder->add('thirdParties', HiddenType::class);
             $builder->get('thirdParties')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $thirdpartyAsIterable): string {
@@ -267,9 +277,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('users')) {
-            $builder->add('users', HiddenType::class, [
-               //'data_class' => User::class,
-            ]);
+            $builder->add('users', HiddenType::class);
             $builder->get('users')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $usersAsIterable): string {
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index bf8467c2b..07fe84319 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,170 +1,17 @@
 <template>
-   <teleport to="#add-persons">
-
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc 
-            v-for="bloc in contextPersonsBlocs"
-            v-bind:key="bloc.key"
-            v-bind:bloc="bloc"
-            v-bind:setPersonsInBloc="setPersonsInBloc">
-         </persons-bloc>
-      </div>
-
-      <add-persons 
-         buttonTitle="activity.add_persons"
-         modalTitle="activity.add_persons"
-         v-bind:key="addPersons.key"
-         v-bind:options="addPersons.options"
-         @addNewPersons="addNewPersons"
-         ref="addPersons">
-      </add-persons>
- 
-  </teleport>
+   <concerned-groups></concerned-groups>
+   <social-issues-acc></social-issues-acc>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import PersonsBloc from './components/PersonsBloc.vue';
+import ConcernedGroups from './components/ConcernedGroups.vue';
+import SocialIssuesAcc from './components/SocialIssuesAcc.vue';
 
 export default {
    name: "App",
    components: {
-      AddPersons,
-      PersonsBloc
-   },
-   data() {
-      return {
-         personsBlocs: [
-            {  key: 'persons', 
-               title: 'activity.bloc_persons', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsAssociated', 
-               title: 'activity.bloc_persons_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsNotAssociated', 
-               title: 'activity.bloc_persons_not_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'thirdparty', 
-               title: 'activity.bloc_thirdparty', 
-               persons: [], 
-               included: true
-            },
-            {  key: 'users', 
-               title: 'activity.bloc_users', 
-               persons: [], 
-               included: true
-            },
-         ],
-         addPersons: {
-            key: 'activity',
-            options: {
-               type: ['person', 'thirdparty'], // TODO add 'user'
-               priority: null,
-               uniq: false,
-            }
-         }
-      }
-   },
-   computed: {
-      ...mapState({
-         persons: state => state.activity.persons,
-         thirdParties: state => state.activity.thirdParties,
-         users: state => state.activity.users,
-         accompanyingCourse: state => state.activity.accompanyingPeriod
-      }),
-      getContext() {
-         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
-      },
-      contextPersonsBlocs() {
-         return this.personsBlocs.filter(bloc => bloc.included !== false);
-      }
-   },
-   mounted() {
-      this.setPersonsInBloc();
-   },
-   methods: {
-      setPersonsInBloc() {
-         let groups; 
-         if (this.accompanyingCourse) {
-            groups = this.splitPersonsInGroups();
-         }     
-         this.personsBlocs.forEach(bloc => {
-            if (this.accompanyingCourse) {
-               switch (bloc.key) {
-                  case 'personsAssociated':
-                     bloc.persons = groups.personsAssociated;
-                     bloc.included = true;
-                     break;
-                  case 'personsNotAssociated':
-                     bloc.persons = groups.personsNotAssociated;
-                     bloc.included = true;
-                     break;
-               }
-            } else {
-               switch (bloc.key) {
-                  case 'persons': 
-                     bloc.persons = this.persons;
-                     bloc.included = true;
-                     break;
-               }
-            }
-            switch (bloc.key) {
-               case 'thirdparty':
-                  bloc.persons = this.thirdParties;
-                  break;
-               case 'users':
-                  bloc.persons = this.users;
-                  break;
-            }
-         }, groups);
-      },
-      splitPersonsInGroups() {
-         let personsAssociated = [];
-         let personsNotAssociated = this.persons;
-         let participations = this.getCourseParticipations();         
-         this.persons.forEach(person => {
-            participations.forEach(participation => {
-               if (person.id === participation.id) {
-                  console.log(person.id);
-                  personsAssociated.push(person);
-                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
-               }
-            });
-         });
-         return { 
-            'personsAssociated': personsAssociated, 
-            'personsNotAssociated': personsNotAssociated 
-         };
-      },
-      getCourseParticipations() {
-         let participations = [];
-         this.accompanyingCourse.participations.forEach(participation => {
-            if (!participation.endDate) {
-               participations.push(participation.person);
-            }
-         });
-         return participations;
-      },
-      addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
-         selected.forEach(function(item) {
-               this.$store.dispatch('addPersonsInvolved', item);
-            }, this
-         );
-         this.$refs.addPersons.resetSearch(); // to cast child method
-         modal.showModal = false;
-         this.setPersonsInBloc();
-      }
+      ConcernedGroups,
+      SocialIssuesAcc
    }
 }
 </script>
-
-<style lang="scss">
-</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js
new file mode 100644
index 000000000..79b4ec8fc
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js
@@ -0,0 +1,18 @@
+import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+
+/*
+*  Load socialActions by socialIssue (id)
+*/
+const getSocialActionByIssue = (id) => { 
+   const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+export {
+   getSocialIssues,
+   getSocialActionByIssue
+};
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
new file mode 100644
index 000000000..cf97f6502
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -0,0 +1,170 @@
+<template>
+   <teleport to="#add-persons">
+
+      <div class="flex-bloc concerned-groups" :class="getContext">
+         <persons-bloc 
+            v-for="bloc in contextPersonsBlocs"
+            v-bind:key="bloc.key"
+            v-bind:bloc="bloc"
+            v-bind:setPersonsInBloc="setPersonsInBloc">
+         </persons-bloc>
+      </div>
+
+      <add-persons 
+         buttonTitle="activity.add_persons"
+         modalTitle="activity.add_persons"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons">
+      </add-persons>
+ 
+  </teleport>  
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
+
+export default {
+   name: "ConcernedGroups",
+   components: {
+      AddPersons,
+      PersonsBloc
+   },
+   data() {
+      return {
+         personsBlocs: [
+            {  key: 'persons', 
+               title: 'activity.bloc_persons', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsAssociated', 
+               title: 'activity.bloc_persons_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsNotAssociated', 
+               title: 'activity.bloc_persons_not_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'thirdparty', 
+               title: 'activity.bloc_thirdparty', 
+               persons: [], 
+               included: true
+            },
+            {  key: 'users', 
+               title: 'activity.bloc_users', 
+               persons: [], 
+               included: true
+            },
+         ],
+         addPersons: {
+            key: 'activity',
+            options: {
+               type: ['person', 'thirdparty'], // TODO add 'user'
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
+   computed: {
+      ...mapState({
+         persons: state => state.activity.persons,
+         thirdParties: state => state.activity.thirdParties,
+         users: state => state.activity.users,
+         accompanyingCourse: state => state.activity.accompanyingPeriod
+      }),
+      getContext() {
+         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
+      },
+      contextPersonsBlocs() {
+         return this.personsBlocs.filter(bloc => bloc.included !== false);
+      }
+   },
+   mounted() {
+      this.setPersonsInBloc();
+   },
+   methods: {
+      setPersonsInBloc() {
+         let groups; 
+         if (this.accompanyingCourse) {
+            groups = this.splitPersonsInGroups();
+         }     
+         this.personsBlocs.forEach(bloc => {
+            if (this.accompanyingCourse) {
+               switch (bloc.key) {
+                  case 'personsAssociated':
+                     bloc.persons = groups.personsAssociated;
+                     bloc.included = true;
+                     break;
+                  case 'personsNotAssociated':
+                     bloc.persons = groups.personsNotAssociated;
+                     bloc.included = true;
+                     break;
+               }
+            } else {
+               switch (bloc.key) {
+                  case 'persons': 
+                     bloc.persons = this.persons;
+                     bloc.included = true;
+                     break;
+               }
+            }
+            switch (bloc.key) {
+               case 'thirdparty':
+                  bloc.persons = this.thirdParties;
+                  break;
+               case 'users':
+                  bloc.persons = this.users;
+                  break;
+            }
+         }, groups);
+      },
+      splitPersonsInGroups() {
+         let personsAssociated = [];
+         let personsNotAssociated = this.persons;
+         let participations = this.getCourseParticipations();         
+         this.persons.forEach(person => {
+            participations.forEach(participation => {
+               if (person.id === participation.id) {
+                  //console.log(person.id);
+                  personsAssociated.push(person);
+                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
+               }
+            });
+         });
+         return { 
+            'personsAssociated': personsAssociated, 
+            'personsNotAssociated': personsNotAssociated 
+         };
+      },
+      getCourseParticipations() {
+         let participations = [];
+         this.accompanyingCourse.participations.forEach(participation => {
+            if (!participation.endDate) {
+               participations.push(participation.person);
+            }
+         });
+         return participations;
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addPersonsInvolved', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+         this.setPersonsInBloc();
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
similarity index 100%
rename from src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue
rename to src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonsBloc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
similarity index 100%
rename from src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonsBloc.vue
rename to src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
new file mode 100644
index 000000000..4ac1b1957
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -0,0 +1,205 @@
+<template>
+   <teleport to="#social-issues-acc">
+      
+      <div class="container">
+         <div class="grid-4 clear">
+            <label>{{ $t('activity.social_issues') }}</label>
+         </div>
+         <div class="grid-8">
+            
+            <check-social-issue
+               v-for="issue in socialIssuesList"
+               v-bind:key="issue.id"
+               v-bind:issue="issue"
+               v-bind:selection="socialIssuesSelected"
+               @updateSelected="updateIssuesSelected">
+            </check-social-issue>
+            
+            <div class="my-3">
+            <VueMultiselect
+               name="otherIssues"
+               label="text"
+               track-by="id"
+               open-direction="bottom"
+               v-bind:close-on-select="true"
+               v-bind:preserve-search="false"
+               v-bind:reset-after="true"
+               v-bind:hide-selected="true"
+               v-bind:taggable="false"
+               v-bind:multiple="false"
+               v-bind:searchable="true"
+               v-bind:allow-empty="true" 
+               v-bind:show-labels="false"
+               v-bind:loading="issueIsLoading"
+               v-bind:placeholder="$t('activity.choose_other_social_issue')"
+               v-bind:options="socialIssuesOther"
+               v-model="value"
+               @select="addIssueInList">
+                  
+               <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
+                  <span v-if="values.length > 0" class="multiselect__single"></span>
+               </template>
+               
+            </VueMultiselect>
+            </div>
+            
+         </div>
+      </div>
+
+      <div class="container">
+         <div class="grid-4 clear">
+            <label>{{ $t('activity.social_actions') }}</label>
+         </div>
+         <div class="grid-8">
+            
+            <div v-if="actionIsLoading === true">
+               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
+            </div>
+            
+            <check-social-action
+               v-if="socialIssuesSelected.length"
+               v-for="action in socialActionsList"
+               v-bind:key="action.id"
+               v-bind:action="action"
+               v-bind:selection="socialActionsSelected"
+               @updateSelected="updateActionsSelected">
+            </check-social-action>
+            
+            <span v-else class="inline-choice chill-no-data-statement mt-3">
+               {{ $t('activity.select_first_a_social_issue') }}
+            </span>
+            
+            
+         </div>
+      </div>
+      
+   </teleport>
+</template>
+
+<script>
+import { readonly } from 'vue';
+import VueMultiselect from 'vue-multiselect';
+import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
+import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
+import { getSocialIssues, getSocialActionByIssue } from '../api.js';
+
+export default {
+   name: "SocialIssuesAcc",
+   components: {
+      CheckSocialIssue,
+      CheckSocialAction,
+      VueMultiselect
+   },
+   data() {
+      return {
+         issueIsLoading: false,
+         actionIsLoading: false
+      }
+   },
+   computed: {
+      socialIssuesList() {
+         return this.$store.state.activity.accompanyingPeriod.socialIssues;
+      },
+      socialIssuesSelected() {
+         return this.$store.state.activity.socialIssues;
+      },
+      socialIssuesOther() {
+         return this.$store.state.socialIssuesOther;
+      },
+      socialActionsList() {
+         return this.$store.state.socialActionsList;
+      },
+      socialActionsSelected() {
+         return this.$store.state.activity.socialActions;
+      }
+   },
+   mounted() {
+      console.log('load others issues in multiselect');
+      
+      this.issueIsLoading = true;
+      getSocialIssues().then(response => new Promise((resolve, reject) => {
+         this.$store.commit('updateIssuesOther', response.results);
+         
+         this.socialIssuesSelected.forEach(issue => {
+            this.$store.commit('addIssueInList', issue);
+         }, this);
+         
+         console.log(this.socialIssuesOther.length, this.socialIssuesOther);
+         this.socialIssuesList.forEach(issue => {
+            this.$store.commit('removeIssueInOther', issue);
+         }, this);
+         console.log(this.socialIssuesOther.length); // grr !!! 
+         // TODO décompter les issues initiales du multiselect
+         
+         this.$store.commit('filterList', 'issues');
+         
+         this.socialActionsSelected.forEach(action => {
+            this.$store.commit('addActionInList', action);
+         }, this);
+         this.$store.commit('filterList', 'actions');
+         
+         this.issueIsLoading = false;
+         resolve();
+      }));   
+   },
+   methods: {
+   
+      /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
+         remove it from multiselect, and add socialActions concerned
+      */
+      addIssueInList(value) {
+         console.log('addIssueInList', value);
+         this.$store.commit('addIssueInList', value);
+         this.$store.commit('removeIssueInOther', value);
+         this.$store.dispatch('addIssueSelected', value);
+         this.updateActionsList();
+      },
+      /* Update value for selected issues checkboxes
+      */
+      updateIssuesSelected(issues) {
+         console.log('updateIssuesSelected', issues);
+         this.$store.dispatch('updateIssuesSelected', issues);
+         this.updateActionsList();
+      },
+      /* Update value for selected actions checkboxes
+      */
+      updateActionsSelected(actions) {
+         console.log('updateActionsSelected', actions);
+         this.$store.dispatch('updateActionsSelected', actions);
+      },
+      /* Add socialActions concerned: reset actions list, then loop on each issue selected 
+         to get social actions concerned
+      */
+      updateActionsList() {
+         console.log('updateActionsList');
+         
+         this.$store.commit('resetActionsList');
+         
+         this.socialIssuesSelected.forEach(item => {
+            console.log('for issue', item.id);
+            
+            this.actionIsLoading = true;
+            getSocialActionByIssue(item.id)
+            .then(actions => new Promise((resolve, reject) => {
+               
+               actions.results.forEach(action => {
+                  this.$store.commit('addActionInList', action);
+               }, this);
+               
+               this.$store.commit('filterList', 'actions');
+               
+               this.actionIsLoading = false;
+               resolve();
+            }));
+         }, this);
+      }
+   }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="scss">
+   span.multiselect__single {
+      display: none !important;
+   }
+</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
new file mode 100644
index 000000000..4da3a7ffc
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
@@ -0,0 +1,34 @@
+<template>
+   <span class="inline-choice">
+      
+      <input 
+         type="checkbox" 
+         v-model="selected"
+         name="action"
+         v-bind:id="action.id" 
+         v-bind:value="action"
+         />
+      <label class="inline" v-bind:for="action.id">
+         {{ action.text }}
+      </label>
+      
+   </span><br>
+</template>
+
+<script>
+export default {
+   name: "CheckSocialAction",
+   props: [ 'action', 'selection' ],
+   emits: [ 'updateSelected' ],
+   computed: {
+      selected: {
+         set(value) {
+            this.$emit('updateSelected', value);
+         },
+         get() {
+            return this.selection;
+         }
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
new file mode 100644
index 000000000..0f223eced
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
@@ -0,0 +1,34 @@
+<template>
+   <span class="inline-choice">
+      
+      <input 
+         type="checkbox" 
+         v-model="selected"
+         name="issue"
+         v-bind:id="issue.id" 
+         v-bind:value="issue"
+         />
+      <label class="inline" v-bind:for="issue.id">
+         {{ issue.text }}
+      </label>
+      
+   </span><br>
+</template>
+
+<script>
+export default {
+   name: "CheckSocialIssue",
+   props: [ 'issue', 'selection' ],
+   emits: [ 'updateSelected' ],
+   computed: {
+      selected: {
+         set(value) {
+            this.$emit('updateSelected', value);
+         },
+         get() {
+            return this.selection;
+         }
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 778072e61..3262a37a5 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -3,6 +3,13 @@ import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
 const appMessages = {
    fr: {
       activity: {
+         //
+         social_issues: "Problématiques sociales",
+         choose_other_social_issue: "Ajouter une autre problématique sociale...",
+         social_actions: "Actions d'accompagnement",
+         select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",
+         
+         //
          add_persons: "Ajouter des personnes concernées",
          bloc_persons: "Usagers",
          bloc_persons_associated: "Usagers du parcours",
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index 4f30cf516..9684ab375 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -21,11 +21,65 @@ const removeIdFromValue = (string, id) => {
 const store = createStore({
    strict: debug,
    state: {
-     activity: window.activity
-   },
-   getters: {
+     activity: window.activity,
+     socialIssuesOther: [],
+     socialActionsList: [],
    },
    mutations: {
+      
+      // SocialIssueAcc
+      addIssueInList(state, issue) {
+         console.log('add list issue', issue.id);
+         state.activity.accompanyingPeriod.socialIssues.push(issue);         
+      },
+      addIssueSelected(state, issue) {
+         console.log('add selected issue', issue.id);
+         state.activity.socialIssues.push(issue);
+      },
+      updateIssuesSelected(state, issues) {
+         console.log('update selected issues', issues);
+         state.activity.socialIssues = issues;
+      },
+      updateIssuesOther(state, payload) {
+         console.log('update other issues');
+         state.socialIssuesOther = payload;
+      },
+      removeIssueInOther(state, issue) {
+         console.log('remove other issue', issue.id);
+         state.socialIssuesOther = state.socialIssuesOther.filter(item => item !== issue);
+      },
+      resetActionsList(state) {
+         console.log('reset actions list');
+         state.socialActionsList = [];
+      },
+      addActionInList(state, action) {
+         console.log('add list action', action.id);
+         state.socialActionsList.push(action);         
+      },
+      updateActionsSelected(state, actions) {
+         console.log('update selected actions', actions);
+         state.activity.socialActions = actions;
+      },
+      filterList(state, list) {
+         const filterList = (list) => {
+            console.log('filter ' + list.length + ' items: uniq'); // grr !!!
+            // TODO un filtrage qui enlève les doublons
+            //list = list.filter((v, i, a) => a.indexOf(v) === i);
+            let _list = [...new Set(list)];
+            
+            console.log('filter ' + list.length + ' items: sort', list);
+            _list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
+            return _list;
+         };
+         if (list === 'issues') {
+            state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues);
+         }
+         if (list === 'actions') {
+            state.socialActionsList = filterList(state.socialActionsList);
+         }
+      },
+      
+      // ConcernedGroups
       addPersonsInvolved(state, payload) {
          //console.log('### mutation addPersonsInvolved', payload.result.type);
          switch (payload.result.type) {
@@ -56,8 +110,29 @@ const store = createStore({
       }
    },
    actions: {
+      addIssueSelected({ commit }, issue) {
+         let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
+         aSocialIssues.value = addIdToValue(aSocialIssues.value, issue.id);
+         commit('addIssueSelected', issue);
+      },
+      updateIssuesSelected({ commit }, payload) {
+         let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
+         aSocialIssues.value = '';
+         payload.forEach(item => {
+            aSocialIssues.value = addIdToValue(aSocialIssues.value, item.id);
+         });
+         commit('updateIssuesSelected', payload);
+      },
+      updateActionsSelected({ commit }, payload) {
+         let aSocialActions = document.getElementById("chill_activitybundle_activity_socialActions");
+         aSocialActions.value = '';
+         payload.forEach(item => {
+            aSocialActions.value = addIdToValue(aSocialActions.value, item.id);
+         });
+         commit('updateActionsSelected', payload);
+      },
       addPersonsInvolved({ commit }, payload) {
-         console.log('### action addPersonsInvolved', payload.result.type);
+         //console.log('### action addPersonsInvolved', payload.result.type);
          switch (payload.result.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@@ -75,7 +150,7 @@ const store = createStore({
          commit('addPersonsInvolved', payload);
       },
       removePersonInvolved({ commit }, payload) {
-         console.log('### action removePersonInvolved', payload);
+         //console.log('### action removePersonInvolved', payload);
          switch (payload.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
index 3024148e1..56a7c96b4 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
@@ -1,4 +1,8 @@
-<h1>{{ "Update activity"|trans }}</h1>
+<h1>{{ "Update activity"|trans ~ ' :' }}
+    <span style="font-size: 70%; text-transform: lowercase; margin-left: 1em;">
+        {{ entity.type.name|localize_translatable_string }}
+    </span>
+</h1>
 
 {{ form_start(edit_form) }}
 {{ form_errors(edit_form) }}
@@ -19,13 +23,15 @@
     {{ form_row(edit_form.scope) }}
 {% endif %}
 
+{%- if edit_form.socialIssues is defined -%}
+    {{ form_row(edit_form.socialIssues) }}
+{% endif %}
+
 {%- if edit_form.socialActions is defined -%}
     {{ form_row(edit_form.socialActions) }}
 {% endif %}
 
-{%- if edit_form.socialIssues is defined -%}
-    {{ form_row(edit_form.socialIssues) }}
-{% endif %}
+<div id="social-issues-acc"></div>
 
 {%- if edit_form.reasons is defined -%}
     {{ form_row(edit_form.reasons) }}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
index 2cca7ad2e..35e466915 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
@@ -24,14 +24,15 @@
     {{ form_row(form.scope) }}
 {% endif %}
 
-{%- if form.socialActions is defined -%}
-    {{ form_row(form.socialActions) }}
-{% endif %}
-
 {%- if form.socialIssues is defined -%}
     {{ form_row(form.socialIssues) }}
 {% endif %}
 
+{%- if form.socialActions is defined -%}
+    {{ form_row(form.socialActions) }}
+{% endif %}
+
+<div id="social-issues-acc"></div>
 
 {%- if form.reasons is defined -%}
     {{ form_row(form.reasons) }}
diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
index 47bb3c953..b2de73651 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@@ -848,7 +848,6 @@ class AccompanyingPeriod implements TrackCreationInterface, TrackUpdateInterface
                 }
             }
         }
-
         return $recursiveSocialIssues;
     }