diff --git a/src/store/index.js b/src/store/index.js
index 3836a3d2d6310ba1af371f563f9764cfcd21a6c2..6def4d63334533a704be681ce0cde6ed4a144582 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -76,8 +76,8 @@ export default new Vuex.Store({
     },
     DISPLAY_MESSAGE(state, message) {
       state.messages = [message, ...state.messages];
-      if (document.getElementById('content')) {
-        document.getElementById('content').scrollIntoView({ block: 'start', inline: 'nearest' });
+      if (document.getElementById('app-content')) {
+        document.getElementById('app-content').scrollIntoView({ block: 'start', inline: 'nearest' });
       }
       setTimeout(() => {
         state.messages = [];
diff --git a/src/views/Project/ProjectBasemaps.vue b/src/views/Project/ProjectBasemaps.vue
index 6eddf46e6aaa54b5feca5dafd658cff1a493a8b6..fd89fcd2c28f4e3021a7d0ccaf1b95e0a665aeb8 100644
--- a/src/views/Project/ProjectBasemaps.vue
+++ b/src/views/Project/ProjectBasemaps.vue
@@ -1,26 +1,5 @@
 <template>
   <div id="project-basemaps">
-    <div
-      v-if="infoMessage.length > 0"
-      id="message_info"
-      class="fullwidth"
-    >
-      <div
-        v-for="(message, index) of infoMessage"
-        :key="index"
-        :class="['ui message', message.success ? 'positive' : 'negative']"
-        style="text-align: left"
-      >
-        <div class="header">
-          <i
-            class="info circle icon"
-            aria-hidden="true"
-          />
-          Informations
-        </div>
-        {{ message.comment }}
-      </div>
-    </div>
     <h1 class="ui header">
       Administration des fonds cartographiques
     </h1>
@@ -76,7 +55,7 @@
 
 <script>
 import BasemapListItem from '@/components/Project/Basemaps/BasemapListItem.vue';
-import { mapState, mapGetters } from 'vuex';
+import { mapState, mapGetters, mapMutations } from 'vuex';
 
 export default {
   name: 'ProjectBasemaps',
@@ -87,7 +66,6 @@ export default {
 
   data() {
     return {
-      infoMessage: [],
       newBasemapIds: [],
     };
   },
@@ -109,6 +87,7 @@ export default {
   },
 
   methods: {
+    ...mapMutations(['DISPLAY_MESSAGE']),
     addBasemap() {
       this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
       this.$store.commit('map/CREATE_BASEMAP', this.basemapMaxId + 1);
@@ -140,27 +119,17 @@ export default {
                 res.status === 200 && res.status === 201 && res.status === 204
             );
             if (errors.length === 0) {
-              this.infoMessage.push({
-                success: true,
+              this.DISPLAY_MESSAGE({
                 comment: 'Enregistrement effectué.',
+                level: 'positive'
               });
               this.newBasemapIds = [];
             } else {
-              this.infoMessage.push({
-                success: false,
-                comment: "L'édition des fonds cartographiques a échoué. ",
+              this.DISPLAY_MESSAGE({
+                comment: 'L\'édition des fonds cartographiques a échoué.',
+                level: 'negative'
               });
             }
-
-            document
-              .getElementById('message_info')
-              .scrollIntoView({ block: 'end', inline: 'nearest' });
-            setTimeout(
-              function () {
-                this.infoMessage = [];
-              }.bind(this),
-              5000
-            );
           })
           .catch((error) => {
             console.error(error);