diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue
index 66f86fd9725..3a7bd4841ca 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue
@@ -23,8 +23,10 @@
     :left="!$vuetify.rtl"
     :right="$vuetify.rtl"
     :timeout="timeout"
-    class="z-index-modal"
-    color="transparent"
+    :content-class="isMobile && 'pa-0 ma-0'"
+    :class="isMobile && 'full-height'"
+    class="z-index-snackbar"
+    color="transparent ma-0"
     elevation="0"
     app>
     <confeti-animation
@@ -32,30 +34,51 @@
       class="overflow-hidden" />
     <v-alert
       :type="alertType"
+      :min-width="minWidth"
       :max-width="maxWidth"
-      class="white position-relative z-index-modal"
-      border="left"
+      :min-height="minHeight"
+      :dense="isMobile"
+      :dismissible="!isMobile"
+      :icon="false"
+      :border="!isMobile && 'left' || false"
+      :class="isMobile && 'no-border-radius b-0 mb-0' || 'mb-5'"
+      :style="absolute && {
+        left: `${left}px`,
+      }"
+      v-touch="{
+        start: moveStart,
+        end: moveEnd,
+        move: moveSwipe,
+      }"
+      class="d-flex flex-column justify-center white mt-0 mx-0 py-2 px-4 border-box-sizing"
       elevation="2"
       light
       outlined
-      dismissible
       colored-border
       @input="closeAlertIfDismissed">
-      <div class="d-flex flex-nowrap align-center full-width">
+      <div
+        :class="isMobile && 'mt-2'"
+        class="d-flex flex-nowrap text-start align-center justify-center full-width">
+        <v-progress-linear
+          v-if="isMobile"
+          :color="`${alertType}-color-background`"
+          :value="progression"
+          height="6"
+          class="position-absolute t-0 l-0 r-0 mt-n1" />
         <span
           v-if="useHtml"
-          class="text--lighten-1 flex-grow-1 text-start pe-4"
+          class="text--lighten-1 flex-grow-1 me-4"
           v-sanitized-html="alertMessage"
           @click="handleAlertClicked">
         </span>
-        <span v-else class="text--lighten-1 flex-grow-1 pe-4">
+        <span v-else class="text--lighten-1 flex-grow-1 me-4">
           {{ alertMessage }}
         </span>
         <v-btn
           v-if="alertLink || alertLinkCallback"
           :href="alertLink"
           :title="alertLinkTooltip"
-          :class="alertLinkText && 'elevation-0 transparent primary--text me-n12' || 'secondary--text'"
+          :class="alertLinkText && 'elevation-0 transparent primary--text' || 'secondary--text'"
           :target="alertLinkTarget || '_blank'"
           :icon="!alertLinkText && alertLinkIcon"
           name="closeSnackbarButton"
@@ -66,6 +89,13 @@
           <v-icon v-else-if="alertLinkIcon">{{ alertLinkIcon }}</v-icon>
         </v-btn>
       </div>
+      <template v-if="!isMobile" #close="{toggle}">
+        <v-btn
+          icon
+          @click="toggle">
+          <v-icon size="16" class="icon-default-color">fa-times</v-icon>
+        </v-btn>
+      </template>
     </v-alert>
   </v-snackbar>
 </template>
@@ -86,6 +116,12 @@ export default {
     alertLinkTooltip: null,
     timeoutInstance: null,
     maxIconsSize: '20px',
+    interval: 0,
+    progression: 0,
+    absolute: false,
+    left: 0,
+    startEvent: null,
+    moving: false,
   }),
   computed: {
     isMobile() {
@@ -97,6 +133,26 @@ export default {
     maxWidth() {
       return this.isMobile && '100vw' || '50vw';
     },
+    minWidth() {
+      return this.isMobile && '100vw' || 400;
+    },
+    minHeight() {
+      return this.isMobile && 69 || 57;
+    },
+  },
+  watch: {
+    snackbar() {
+      if (this.isMobile) {
+        if (this.snackbar) {
+          this.interval = window.setInterval(() => {
+            this.progression -= this.timeout / 1000;
+          }, 1000);
+        } else if (this.interval) {
+          window.clearInterval(this.interval);
+          this.interval = 0;
+        }
+      }
+    },
   },
   created() {
     document.addEventListener('alert-message', (event) => {
@@ -157,10 +213,20 @@ export default {
       });
     });
     this.$root.$on('close-alert-message', this.closeAlert);
+
+    // Kept for backward compatibility
+    document.addEventListener('notification-alert', event => {
+      this.openAlert({
+        alertType: event?.detail?.type,
+        alertMessage: event?.detail?.message,
+      });
+    });
   },
   methods: {
     openAlert(params) {
+      this.reset();
       this.closeAlert();
+      this.progression = 100;
       this.$nextTick().then(() => {
         this.useHtml = params.useHtml || false;
         this.confeti = params.confeti || false;
@@ -206,6 +272,41 @@ export default {
         this.linkCallback();
       }
     },
+    reset() {
+      this.absolute = false;
+      this.left = -8;
+      this.startEvent = null;
+      this.moving = false;
+    },
+    moveStart() {
+      if (this.absolute) {
+        return;
+      }
+      this.reset();
+      window.setTimeout(() => this.absolute = true, 50);
+    },
+    moveEnd() {
+      const confirm = Math.abs(this.left) > (window.innerWidth / 4);
+      if (confirm) {
+        this.snackbar = false;
+      } else {
+        this.reset();
+      }
+    },
+    moveSwipe(event) {
+      if (!this.absolute) {
+        return;
+      }
+      if (!this.startEvent) {
+        this.startEvent = event;
+      } else if (!this.moving) {
+        this.moving = true;
+        this.$nextTick().then(() => {
+          this.left = parseInt(event.touchmoveX - this.startEvent.touchmoveX) - 8;
+          this.moving = false;
+        });
+      }
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/webapp/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue b/webapp/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue
index 547af643eea..6f2eae2ff61 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue
@@ -344,21 +344,13 @@ export default {
         if (newVal !== oldVal) {
           if (this.accessType === 'OPEN') {
             this.$root.$emit('alert-message-html', `
-                <div>
-                  ${this.$t('generalSettings.access.openChangeInformation1')}
-                </div>
-                <div>
-                  ${this.$t('generalSettings.access.openChangeInformation2')}
-                </div>
+                <div>${this.$t('generalSettings.access.openChangeInformation1')}</div>
+                <div>${this.$t('generalSettings.access.openChangeInformation2')}</div>
             `, 'info');
           } else if (this.accessType === 'RESTRICTED') {
             this.$root.$emit('alert-message-html', `
-                <div>
-                  ${this.$t('generalSettings.access.restrictedChangeInformation1')}
-                </div>
-                <div>
-                  ${this.$t('generalSettings.access.restrictedChangeInformation2')}
-                </div>
+                <div>${this.$t('generalSettings.access.restrictedChangeInformation1')}</div>
+                <div>${this.$t('generalSettings.access.restrictedChangeInformation2')}</div>
             `, 'info');
           }
         }
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue
index bf01ea4cea2..215cc635e16 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue
@@ -1,10 +1,5 @@
 <template>
   <v-app class="white">
-    <v-card-text v-if="error" class="errorMessage">
-      <v-alert type="error">
-        {{ error }}
-      </v-alert>
-    </v-card-text>
     <v-card class="d-flex flex py-2" flat>
       <v-flex class="sm12 md4" flat>
         <groups-management-tree-toolbar />
@@ -20,14 +15,3 @@
     <groups-management-membership-form-drawer />
   </v-app>
 </template>
-
-<script>
-export default {
-  data: () => ({
-    error: null,
-  }),
-  mounted() {
-    this.$root.$on('error', error => this.error = error);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue
index d899cf322ab..e5dcb0d4f97 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveGroup">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex groupNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('GroupsManagement.name') }}<template v-if="newGroup">*</template>
         </v-card-text>
@@ -89,7 +83,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newGroup: false,
@@ -209,7 +202,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
 
       if (!this.$refs.groupForm.validate() // Vuetify rules
@@ -251,11 +243,7 @@ export default {
         if (this.fieldError && this.fieldError === 'NAME:ALREADY_EXISTS') {
           this.$refs.nameInput.setCustomValidity(this.$t('GroupsManagement.message.sameNameAlreadyExists'));
         } else {
-          this.error = String(error);
-
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -264,8 +252,6 @@ export default {
             return;
           }
         }, 200);
-      } else {
-        this.error = null;
       }
     },
   },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue
index a622a72472f..b455515613a 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveMembership">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex membershipNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('UsersManagement.membershipType') }} *
         </v-card-text>
@@ -193,7 +187,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newMembership: false,
@@ -318,7 +311,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
       this.resetCustomValidity();
 
@@ -371,10 +363,7 @@ export default {
           this.$refs.membershipTypeInput.setCustomValidity(this.$t('GroupsManagement.message.sameMembershipAlreadyExists'));
         } else {
           this.error = String(error);
-
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -383,8 +372,6 @@ export default {
             return;
           }
         }, 200);
-      } else {
-        this.error = null;
       }
     },
     refreshUserSelection(value) {
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue
index 466f0e7e1e4..9568c1d552a 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue
@@ -129,10 +129,7 @@ export default {
         if (errorI18N !== errorI18NKey) {
           error = errorI18N;
         }
-        this.$root.$emit('error', error);
-        window.setTimeout(() => {
-          this.$root.$emit('error', null);
-        }, 5000);
+        this.$root.$emit('alert-message', error, 'error');
       }).finally(() => this.loading = false);
     },
   },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementFormDrawer.vue
index dcc50978716..77624b5ebbe 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveMembershipType">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex membershipTypeNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('MembershipTypesManagement.name') }}<template v-if="newMembershipType">*</template>
         </v-card-text>
@@ -75,7 +69,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newMembershipType: false,
@@ -150,7 +143,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
       this.resetCustomValidity();
 
@@ -193,11 +185,7 @@ export default {
         if (this.fieldError && this.fieldError === 'NAME:ALREADY_EXISTS') {
           this.$refs.nameInput.setCustomValidity(this.$t('MembershipTypesManagement.message.sameNameAlreadyExists'));
         } else {
-          this.error = String(error);
-
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -206,8 +194,6 @@ export default {
             return;
           }
         }, 200);
-      } else {
-        this.error = null;
       }
     },
   },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementList.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementList.vue
index 04a4a8a14ac..4e1d5ef85d1 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementList.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-membership-types-management/components/MembershipTypesManagementList.vue
@@ -7,11 +7,6 @@
       :ok-label="$t('MembershipTypesManagement.button.ok')"
       :cancel-label="$t('MembershipTypesManagement.button.cancel')"
       @ok="deleteConfirm()" />
-    <v-card-text v-if="error" class="errorMessage">
-      <v-alert type="error">
-        {{ error }}
-      </v-alert>
-    </v-card-text>
     <v-data-table
       :headers="headers"
       :items="filteredMembershipTypes"
@@ -74,7 +69,6 @@ export default {
       itemsPerPage: 20,
     },
     loading: true,
-    error: null,
   }),
   computed: {
     hasPages() {
@@ -167,10 +161,7 @@ export default {
         if (errorI18N !== errorI18NKey) {
           error = errorI18N;
         }
-        this.error = error;
-        window.setTimeout(() => {
-          this.error = null;
-        }, 5000);
+        this.$root.$emit('alert-message', error, 'error');
       })
         .finally(() => this.loading = false);
     },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementList.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementList.vue
index 9bf5c8b43c5..f638dc83a7d 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementList.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementList.vue
@@ -13,11 +13,6 @@
       :message="$t('UsersManagement.message.deleteCurrentUserWarning')"
       :title="$t('UsersManagement.title.deleteCurrentUserWarning')"
       :ok-label="$t('UsersManagement.button.ok')" />
-    <v-card-text v-if="error" class="errorMessage">
-      <v-alert type="error">
-        {{ error }}
-      </v-alert>
-    </v-card-text>
     <v-data-table
       :headers="headers"
       :items="filteredUsers"
@@ -151,17 +146,6 @@
         </v-btn>
       </template>
     </v-data-table>
-    <v-alert
-      v-if="selectedUsersUpdated"
-      border="left"
-      class="userUpdated"
-      type="info"
-      close-icon="mdi-close"
-      colored-border
-      color="primary"
-      dismissible>
-      {{ selectedUsersUpdated }}
-    </v-alert>
   </div>
 </template>
 
@@ -177,7 +161,6 @@ export default {
     currentUser: eXo.env.portal.userName,
     selectedUser: null,
     selectedUsers: [],
-    selectedUsersUpdated: '',
     deleteConfirmMessage: null,
     keyword: null,
     filter: 'ENABLED',
@@ -196,7 +179,6 @@ export default {
     initialized: false,
     isSuperUser: false,
     loading: true,
-    error: null,
     fullDateFormat: {
       day: 'numeric',
       month: 'short',
@@ -361,8 +343,7 @@ export default {
           this.searchUsers();
           this.loading = false;
           this.initialized = true;
-          this.selectedUsersUpdated = msg;
-          setTimeout(() => this.selectedUsersUpdated = '', 3000);
+          this.$root.$emit('alert-message', msg, 'success');
         });
       }
     },
@@ -411,10 +392,7 @@ export default {
         if (errorI18N !== errorI18NKey) {
           error = errorI18N;
         }
-        this.error = error;
-        window.setTimeout(() => {
-          this.error = null;
-        }, 5000);
+        this.$root.$emit('alert-message', error, 'error');
       }).finally(() => this.loading = false);
     },
     searchUsers() {
diff --git a/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementUserFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementUserFormDrawer.vue
index 8563050d095..b95b36cf8eb 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementUserFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/idm-users-management/components/UsersManagementUserFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveUser">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex userNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('UsersManagement.userName') }}<template v-if="newUser">*</template>
         </v-card-text>
@@ -129,7 +123,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newUser: false,
@@ -201,7 +194,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
       this.resetCustomValidity();
 
@@ -280,10 +272,7 @@ export default {
           if (errorI18N !== errorI18NKey) {
             error = errorI18N;
           }
-          this.error = error;
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -293,7 +282,7 @@ export default {
           }
         }, 200);
       } else {
-        this.error = null;
+        this.$root.$emit('close-alert-message');
       }
     },
   },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/popover/components/NotificationAlerts.vue b/webapp/portlet/src/main/webapp/vue-apps/popover/components/NotificationAlerts.vue
deleted file mode 100644
index c97f8568ff8..00000000000
--- a/webapp/portlet/src/main/webapp/vue-apps/popover/components/NotificationAlerts.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
- 
- Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
- 
- This program is free software; you can redistribute it and/or
- modify it under the terms of the GNU Lesser General Public
- License as published by the Free Software Foundation; either
- version 3 of the License, or (at your option) any later version.
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- Lesser General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public License
- along with this program; if not, write to the Free Software Foundation,
- Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-
--->
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    :left="!$vuetify.rtl"
-    :right="$vuetify.rtl"
-    class="z-index-modal"
-    color="transparent"
-    elevation="0"
-    app>
-    <exo-notification-alert
-      :alert="alert"
-      no-timeout
-      @dismissed="clear" />
-  </v-snackbar>
-</template>
-<script>
-export default {
-  data: () => ({
-    snackbar: false,
-    alert: null,
-  }),
-  watch: {
-    alert() {
-      this.snackbar = !this.alert;
-      this.$nextTick().then(() => this.snackbar = !!this.alert);
-    },
-  },
-  created() {
-    document.addEventListener('notification-alert', event => this.alert = event?.detail);
-  },
-  methods: {
-    clear() {
-      this.alert = null;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/webapp/portlet/src/main/webapp/vue-apps/popover/components/Popover.vue b/webapp/portlet/src/main/webapp/vue-apps/popover/components/Popover.vue
index 580152a1835..59c57551bb0 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/popover/components/Popover.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/popover/components/Popover.vue
@@ -21,7 +21,6 @@
 <template>
   <div>
     <popover-menu v-if="!isMobile" />
-    <notification-alerts />
     <users-list-drawer />
   </div>
 </template>
diff --git a/webapp/portlet/src/main/webapp/vue-apps/popover/initComponents.js b/webapp/portlet/src/main/webapp/vue-apps/popover/initComponents.js
index 7dcf5adf5ef..5fd351a976e 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/popover/initComponents.js
+++ b/webapp/portlet/src/main/webapp/vue-apps/popover/initComponents.js
@@ -4,7 +4,6 @@ import UserPopoverContent from './components/UserPopoverContent.vue';
 import SpacePopoverContent from './components/SpacePopoverContent.vue';
 import SpaceMuteNotificationButton from './components/SpaceMuteNotificationButton.vue';
 import UsersListDrawer from './components/UsersListDrawer.vue';
-import NotificationAlerts from './components/NotificationAlerts.vue';
 import ExoSpaceFavoriteAction from '../spaces-list/components/ExoSpaceFavoriteAction.vue';
 
 const components = {
@@ -13,7 +12,6 @@ const components = {
   'user-popover-content': UserPopoverContent,
   'space-popover-content': SpacePopoverContent,
   'space-mute-notification-button': SpaceMuteNotificationButton,
-  'notification-alerts': NotificationAlerts,
   'users-list-drawer': UsersListDrawer
 };
 components['exo-space-favorite-action'] = ExoSpaceFavoriteAction;
diff --git a/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue b/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue
index 642c5904a08..20a8d2be9ad 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue
@@ -61,11 +61,6 @@
               {{ $t('profileAboutMe.save') }}
             </v-btn>
           </v-card-actions>
-          <v-card-text v-if="error">
-            <v-alert type="error">
-              {{ error }}
-            </v-alert>
-          </v-card-text>
         </v-card>
       </template>
     </exo-drawer>
@@ -76,7 +71,6 @@ export default {
   data: () => ({
     owner: eXo.env.portal.profileOwner === eXo.env.portal.userName,
     aboutMe: null,
-    error: null,
     saving: null,
     modifyingAboutMe: null,
     aboutMeTextLength: 2000,
@@ -119,12 +113,11 @@ export default {
       this.$refs.aboutMeDrawer.open();
     },
     saveAboutMe() {
-      this.error = null;
       this.saving = true;
       this.$refs.aboutMeDrawer.startLoading();
       return this.$userService.updateProfileField(eXo.env.portal.profileOwner, 'aboutMe', this.modifyingAboutMe)
         .then(() => this.refresh(this.modifyingAboutMe))
-        .catch(() => this.error = this.$t('profileAboutMe.savingError'))
+        .catch(() => this.$root.$emit('alert-message', this.$t('profileAboutMe.savingError'), 'error'))
         .finally(() => {
           this.saving = false;
           this.$refs.aboutMeDrawer.endLoading();
diff --git a/webapp/portlet/src/main/webapp/vue-apps/profile-contact-information/components/ProfileContactInformationDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/profile-contact-information/components/ProfileContactInformationDrawer.vue
index 5238e4ac8e3..58165154db5 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/profile-contact-information/components/ProfileContactInformationDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/profile-contact-information/components/ProfileContactInformationDrawer.vue
@@ -12,11 +12,6 @@
         ref="profileContactForm"
         class="form-horizontal"
         flat>
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>   
         <div v-for="property in properties" :key="property.id">
           <profile-contact-edit-multi-field
             v-if="property.editable && (property.multiValued || (property.children && property.children.length))"
@@ -70,7 +65,6 @@ export default {
   data: () => ({
     propertiesToSave: [],
     properties: [],
-    error: null,
     saving: null,
     fieldError: false,
     disabled: true,
@@ -92,7 +86,6 @@ export default {
     },
     
     save() {
-      this.error = null;
       this.fieldError = false;
       
       this.resetCustomValidity();
@@ -166,7 +159,7 @@ export default {
       
       if (error) {
         if (String(error).indexOf(this.$uploadService.avatarExcceedsLimitError) >= 0) {
-          this.error = this.$t('profileHeader.label.avatarExcceededAllowedSize', {0: this.uploadLimit});
+          this.$root.$emit('alert-message', this.$t('profileHeader.label.avatarExcceededAllowedSize', {0: this.uploadLimit}), 'error');
         } else if (this.fieldError && this.fieldError.indexOf('FIRSTNAME:') === 0) {
           const firstNameError = this.fieldError.replace('FIRSTNAME:', '');
           if (this.$refs.firstNameInput) { this.$refs.firstNameInput[0].setCustomValidity(firstNameError);}
@@ -187,10 +180,7 @@ export default {
           if (errorI18N !== errorI18NKey) {
             error = errorI18N;
           }
-          this.error = error;
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -200,7 +190,7 @@ export default {
           }
         }, 200);
       } else {
-        this.error = null;
+        this.$root.$emit('close-alert-message');
       }
     },
     refresh() {
diff --git a/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/ProfileSettings.vue b/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/ProfileSettings.vue
index 9d86240b75f..7d0213afd76 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/ProfileSettings.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/ProfileSettings.vue
@@ -28,13 +28,6 @@
         <profile-settings-header :filter="filter" />
         <profile-settings-table :settings="filteredSettings" />
         <profile-setting-form-drawer :settings="settings" :languages="languages" />
-        <v-alert
-          :icon="type === 'warning' ? 'mdi-alert-circle' : ''"
-          v-model="alert"
-          :type="type"
-          dismissible>
-          {{ message }}
-        </v-alert>
       </v-card>
     </v-main>
   </v-app>
@@ -50,9 +43,6 @@ export default {
   },
 
   data: () => ({
-    alert: false,
-    type: '',
-    message: '',
     settings: [],
     filter: 'Active'
   }),
@@ -87,10 +77,7 @@ export default {
   },
   methods: {
     displayMessage(alert) {
-      this.message = alert.message;
-      this.type = alert.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
+      this.$root.$emit('alert-message', alert.message, alert.type);
     },
     getSettings() {
       return this.$profileSettingsService.getSettings()
diff --git a/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
index b15e3d11383..e5d755b4669 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
@@ -33,12 +33,6 @@
         ref="settingForm"
         class="form-horizontal pt-0 pb-4"
         flat>
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex settingNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('profileSettings.label.name') }}<template v-if="newSetting">*</template>
         </v-card-text>
@@ -227,7 +221,6 @@ export default {
     },
   },
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newSetting: false,
@@ -338,7 +331,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
       this.resetCustomValidity();
 
diff --git a/webapp/portlet/src/main/webapp/vue-apps/search-space/main.js b/webapp/portlet/src/main/webapp/vue-apps/search-space/main.js
index 73dc607646e..fd03319e332 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/search-space/main.js
+++ b/webapp/portlet/src/main/webapp/vue-apps/search-space/main.js
@@ -12,9 +12,9 @@ const lang = typeof eXo !== 'undefined' ? eXo.env.portal.language : 'en';
 
 const urls = [`${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.Portlets-${lang}.json`];
 exoi18n.loadLanguageAsync(lang, urls).then(i18n => {
-  new Vue({
+  Vue.createApp({
     template: '<space-search-drawers />',
     vuetify: Vue.prototype.vuetifyOptions,
     i18n,
-  }).$mount(`#${appId}`);
+  }, `#${appId}`, 'Search Space Drawers');
 });
\ No newline at end of file
diff --git a/webapp/portlet/src/main/webapp/vue-apps/space-members/components/AlertSpaceMembers.vue b/webapp/portlet/src/main/webapp/vue-apps/space-members/components/AlertSpaceMembers.vue
index 6a161401a4a..d33e604dd06 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/space-members/components/AlertSpaceMembers.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/space-members/components/AlertSpaceMembers.vue
@@ -1,13 +1,3 @@
-<template>
-  <v-alert
-    v-model="displayAlert"
-    :type="alertType"
-    dismissible
-    :icon="alertType === 'warning' ? 'mdi-alert-circle' : ''">
-    <span v-sanitized-html="alertMessage" class="mt-8"> </span>
-  </v-alert>
-</template>
-
 <script>
 export default {
   props: {
@@ -16,11 +6,6 @@ export default {
       default: null,
     },
   },
-  data: () => ({
-    displayAlert: false,
-    alertMessage: null,
-    alertType: null,
-  }),
   created() {
     const params = new URL(location.href).searchParams;
     const feedbackMessage = params.get('feedbackMessage');
@@ -29,12 +14,10 @@ export default {
       this.$identityService.getIdentityByProviderIdAndRemoteId('organization', userName)
         .then(identity => {
           const userFullName = identity.profile.fullname;
-          this.alertType = 'warning';
-          this.alertMessage = this.$t(`Notification.feedback.message.${feedbackMessage}`, {
+          this.$root.$emit('alert-message-html', this.$t(`Notification.feedback.message.${feedbackMessage}`, {
             0: userFullName,
             1: this.spaceDisplayName,
-          });
-          this.displayAlert = true;
+          }), 'warning');
         });
     }   
   },
diff --git a/webapp/portlet/src/main/webapp/vue-apps/space-members/components/SpaceInvitationDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/space-members/components/SpaceInvitationDrawer.vue
index eab1619748c..20610909cf7 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/space-members/components/SpaceInvitationDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/space-members/components/SpaceInvitationDrawer.vue
@@ -27,30 +27,8 @@
           include-users
           include-spaces
           multiple />
-        <v-alert v-if="error" type="error">
-          {{ error }}
-        </v-alert>
       </form>
-      <v-alert
-        v-else
-        class="ma-4 pa-3 successfulInvitation"
-        outlined
-        text>
-        {{ $t('peopleList.label.successfulInvitation', {0: invitedUserFullName}) }}
-      </v-alert>
       <v-list class="mx-4 rounded externalList" subheader>
-        <v-alert
-          v-if="alreadyExistAlert"
-          outlined
-          text
-          class="mb-0 pa-2 text-center alreadyExistAlert"
-          v-html="alreadyExistAlert" />
-        <v-alert
-          v-if="alreadyInvitedAlert"
-          outlined
-          text
-          class="mb-0 pa-2 text-center alreadyExistAlert"
-          v-html="alreadyInvitedAlert" />
         <v-list-item
           v-for="user in externalInvitedUsers"
           :key="user">
@@ -157,14 +135,11 @@ export default {
     users: [],
     savingSpace: false,
     spaceSaved: false,
-    error: null,
     spacePrettyName: eXo.env.portal.spaceName,
     invitedMembers: [],
     includeExternalUser: false,
     externalInvitedUsers: [],
     invitationSent: false,
-    alreadyExistAlert: '',
-    alreadyInvitedAlert: '',
     externalInvitationsSent: [],
   }),
   computed: {
@@ -201,7 +176,6 @@ export default {
       this.savingSpace = false;
       this.spaceSaved = false;
       this.includeExternalUser = false;
-      this.error = null;
       this.spacePrettyName = eXo.env.portal.spaceName;
       this.invitedMembers = [];
       this.externalInvitedUsers = [];
@@ -223,7 +197,6 @@ export default {
       if (this.spaceSaved || this.savingSpace) {
         return;
       }
-      this.error = null;
       this.savingSpace = true;
       this.$spaceService.updateSpace({
         id: eXo.env.portal.spaceId,
@@ -235,6 +208,7 @@ export default {
           this.$emit('refresh');
           this.externalInvitedUsers = [];
           this.invitationSent = true;
+          this.$root.$emit('alert-message', this.$t('peopleList.label.successfulInvitation', {0: this.invitedUserFullName}), 'success');
 
           window.setTimeout(() => {
             this.$refs.spaceInvitationDrawer.close();
@@ -244,7 +218,7 @@ export default {
         .catch(e => {
           // eslint-disable-next-line no-console
           console.warn('Error updating space ', this.invitedMembers, e);
-          this.error = this.$t('peopleList.error.errorWhenSavingSpace');
+          this.$root.$emit('alert-message', this.$t('peopleList.error.errorWhenSavingSpace'), 'error');
         })
         .finally(() => this.savingSpace = false);
     },
@@ -279,8 +253,7 @@ export default {
               this.$spaceService.isSpaceMember(eXo.env.portal.spaceId, user.remoteId).then(data => {
                 if (data.isMember === 'true') {
                   $(`#${this.$refs.autoFocusInput3.id} input`)[0].blur();
-                  this.alreadyExistAlert = `<span style="font-style: italic;">${email}</span> ${this.$t('peopleList.label.alreadyMember')}`;
-                  setTimeout(() => this.alreadyExistAlert ='', 3000);
+                  this.$root.$emit('alert-message-html', `<span style="font-style: italic;">${email}</span> ${this.$t('peopleList.label.alreadyMember')}`, 'warning');
                 } else {
                   this.users.push(user);
                   const indexOfuser = this.invitedMembers.findIndex(u => u.remoteId === user.remoteId);
@@ -296,8 +269,7 @@ export default {
                 const user = this.externalInvitationsSent.find(invited => invited.userEmail === email);
                 if (user) {
                   $(`#${this.$refs.autoFocusInput3.id} input`)[0].blur();
-                  this.alreadyInvitedAlert = this.$t('peopleList.label.alreadyInvited');
-                  setTimeout(() => this.alreadyInvitedAlert ='', 3000);
+                  this.$root.$emit('alert-message-html', this.$t('peopleList.label.alreadyInvited'), 'warning');
                 } else if (this.externalInvitedUsers.indexOf(email) === -1) {
                   this.externalInvitedUsers.push(email);
                 }
diff --git a/webapp/portlet/src/main/webapp/vue-apps/space-settings/components/SpaceSettingFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/space-settings/components/SpaceSettingFormDrawer.vue
index a590ad4616a..d367aa5c1db 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/space-settings/components/SpaceSettingFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/space-settings/components/SpaceSettingFormDrawer.vue
@@ -102,9 +102,6 @@
             </v-radio-group>
           </div>
           <div class="caption font-italic font-weight-light ps-1 muted">{{ $t(`SpaceSettings.description.${space.subscription || 'open'}`) }}</div>
-          <v-alert v-if="error" type="error">
-            {{ error }}
-          </v-alert>
         </form>
       </template>
       <template slot="footer">
@@ -158,7 +155,6 @@ export default {
     spaceSaved: false,
     space: {},
     spaceToUpdate: {},
-    error: null,
     template: null,
     spaceTemplate: null,
     templates: [],
@@ -199,7 +195,6 @@ export default {
       this.savingSpace = false;
       this.spaceSaved = false;
       this.spaceSaved = false;
-      this.error = null;
       this.template = null;
       this.spaceTemplate = null;
       this.avatarData = null;
@@ -228,14 +223,11 @@ export default {
     handleImageUploadError(error) {
       if (error) {
         if (String(error).indexOf(this.$uploadService.avatarExcceedsLimitError) >= 0) {
-          this.error = this.$t('SpaceSettings.label.avatarExcceededAllowedSize', {0: this.maxUploadSize});
+          error = this.$t('SpaceSettings.label.avatarExcceededAllowedSize', {0: this.maxUploadSize});
         } else {
-          this.error = String(error);
+          error = String(error);
         }
-
-        window.setTimeout(() => {
-          this.error = null;
-        }, 5000);
+        this.$root.$emit('alert-message', error, 'error');
       }
     },
     saveSpace(event) {
diff --git a/webapp/portlet/src/main/webapp/vue-apps/spaces-list/components/ExoSpaceFormDrawer.vue b/webapp/portlet/src/main/webapp/vue-apps/spaces-list/components/ExoSpaceFormDrawer.vue
index 35db646f901..93b204578df 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/spaces-list/components/ExoSpaceFormDrawer.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/spaces-list/components/ExoSpaceFormDrawer.vue
@@ -188,17 +188,6 @@
             </form>
           </v-stepper-content>
         </v-stepper>
-        <div>
-          <v-alert
-            v-if="selectedSpacesWithExternals.length != 0"
-            v-model="externalAlert"
-            dismissible
-            class="elevation-0 mb-14 me-2 pe-4"
-            icon="mdi-alert-circle"
-            type="warning">
-            <p v-sanitized-html="invitedSpacesWithExternals"></p>
-          </v-alert>
-        </div>
       </div>
     </template>
     <template slot="footer">
@@ -265,7 +254,10 @@ export default {
     },
     isMobile() {
       return this.$vuetify && this.$vuetify.breakpoint && this.$vuetify.breakpoint.name === 'xs';
-    }
+    },
+    spaceInvitedMembers() {
+      return this.space?.invitedMembers;
+    },
   },
   watch: {
     savingSpace() {
@@ -300,17 +292,25 @@ export default {
         this.setSpaceTemplateProperties();
       }
     },
-    'space.invitedMembers': function (items){
-      this.selectedSpacesWithExternals = [];
-      items.filter(item => item.providerId === 'space')
-        .forEach(space => {
-          this.$spaceService.checkExternals(space.spaceId).then(hasExternals => {
-            if (hasExternals && hasExternals === 'true') {
-              this.selectedSpacesWithExternals.push(space.displayName);
-              this.externalAlert = true;
-            }
+    externalAlert() {
+      if (this.externalAlert) {
+        this.$root.$emit('alert-message-html', this.invitedSpacesWithExternals, 'warning');
+      }
+    },
+    spaceInvitedMembers() {
+      if (this.spaceInvitedMembers) {
+        this.selectedSpacesWithExternals = [];
+        this.externalAlert = false;
+        this.spaceInvitedMembers.filter(item => item.providerId === 'space')
+          .forEach(space => {
+            this.$spaceService.checkExternals(space.spaceId).then(hasExternals => {
+              if (hasExternals && hasExternals === 'true') {
+                this.selectedSpacesWithExternals.push(space.displayName);
+                this.$nextTick().then(() => this.externalAlert = true);
+              }
+            });
           });
-        });
+      }
     }
   },
   created() {
diff --git a/webapp/portlet/src/main/webapp/vue-apps/user-setting-security/components/UserSettingSecurityWindow.vue b/webapp/portlet/src/main/webapp/vue-apps/user-setting-security/components/UserSettingSecurityWindow.vue
index 1e7509389b7..0447faf26fc 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/user-setting-security/components/UserSettingSecurityWindow.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/user-setting-security/components/UserSettingSecurityWindow.vue
@@ -67,18 +67,6 @@
             required>
         </v-card-text>
 
-        <v-card-text v-if="error">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
-        <v-card-text v-if="success">
-          <v-alert type="success">
-            {{ success }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-actions class="my-6">
           <v-spacer />
           <v-btn
@@ -112,8 +100,6 @@ export default {
     currentPassword: null,
     newPassword: null,
     confirmNewPassword: null,
-    success: null,
-    error: null,
     saving: false,
     displayed: true,
   }),
@@ -151,28 +137,25 @@ export default {
       }
 
       if (this.$refs.form.validate() && this.$refs.form.$el.reportValidity()) {
-        this.success = null;
-        this.error = null;
         this.saving = true;
         this.$userService.changePassword(eXo.env.portal.userName, this.currentPassword, this.newPassword)
           .then(() => {
-            this.success = this.$t('UserSettings.label.changePasswordSuccess');
+            this.$root.$emit('alert-message', this.$t('UserSettings.label.changePasswordSuccess'), 'success');
             this.$refs.form.$el.reset();
           })
           .catch(e => {
-            const error = String(e);
+            let error = String(e);
 
             if (error.indexOf(WRONG_USER_PASSWORD_ERROR_CODE) > -1) {
-              this.error = this.$t('UserSettings.label.wrongCurrentPassword');
+              error = this.$t('UserSettings.label.wrongCurrentPassword');
             } else if (error.indexOf(USER_NOT_FOUND_ERROR_CODE) > -1) {
-              this.error = this.$t('UserSettings.label.accountNotExist');
+              error = this.$t('UserSettings.label.accountNotExist');
             } else if (error.indexOf(PASSWORD_UNKNOWN_ERROR_CODE) > -1) {
-              this.error = this.$t('UserSettings.label.changePasswordFail');
+              error = this.$t('UserSettings.label.changePasswordFail');
             } else if (error.indexOf(UNCHANGED_NEW_PASSWORD_ERROR_CODE) > -1) {
-              this.error = this.$t('UserSettings.label.changePasswordIdentical');
-            } else {
-              this.error = error;
+              error = this.$t('UserSettings.label.changePasswordIdentical');
             }
+            this.$root.$emit('alert-message', error, 'error');
           })
           .finally(() => {
             this.saving = false;