diff --git a/frontend/package.json b/frontend/package.json
index 34ce37b76..2a41bea56 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,6 +51,7 @@
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",
     "perfect-scrollbar": "^1.3.0",
+    "portal-vue": "^2.1.7",
     "prettier": "^2.2.1",
     "qrcode": "^1.4.4",
     "quill": "^1.3.6",
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index b7c0ea06c..aa4bf200f 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -12,7 +12,7 @@ import GlobalDirectives from './globalDirectives'
 import SideBar from '@/components/SidebarPlugin'
 
 // vue-bootstrap
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin, ToastPlugin } from 'bootstrap-vue'
 
 // asset imports
 import '@/assets/scss/argon.scss'
@@ -49,6 +49,7 @@ export default {
     Vue.use(Notifications)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
+    Vue.use(ToastPlugin)
     Vue.use(VueGoodTablePlugin)
     Vue.use(VueMoment)
     Vue.use(VueQrcodeReader)
diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index 32331d080..ecbd870c3 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -46,28 +46,31 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI.js'
+ import loginAPI from '../../apis/loginAPI.js'
 
-export default {
-  name: 'password',
-  data() {
-    return {
-      disable: 'disabled',
-      form: {
-        email: '',
-      },
-    }
-  },
-  methods: {
-    async onSubmit() {
-      const result = await loginAPI.sendEmail(this.form.email)
-      if (result.success) {
-        this.$router.push('/thx/password')
-      } else {
-        alert(result.result)
-      }
-    },
-  },
-}
+ export default {
+   name: 'password',
+   data() {
+     return {
+       disable: 'disabled',
+       form: {
+         email: '',
+       },
+     }
+   },
+   methods: {
+     async onSubmit() {
+       const result = await loginAPI.sendEmail(this.form.email)
+       if (result.success) {
+         this.$router.push('/thx/password')
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
+           noAutoHide: true,
+         })
+       }
+     },
+   },
+ }
 </script>
 <style></style>
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 99892612c..29aa015d9 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -85,82 +85,86 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
-export default {
-  name: 'reset',
-  data() {
-    return {
-      password: '',
-      checkPassword: '',
-      passwordVisible: false,
-      submitted: false,
-      authenticated: false,
-      sessionId: null,
-      email: null,
-    }
-  },
-  methods: {
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
-    async onSubmit() {
-      const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
-      if (result.success) {
-        this.password = ''
-        /*
-         this.$store.dispatch('login', {
-           sessionId: result.result.data.session_id,
-           email: result.result.data.user.email,
+ import loginAPI from '../../apis/loginAPI'
+ export default {
+   name: 'reset',
+   data() {
+     return {
+       password: '',
+       checkPassword: '',
+       passwordVisible: false,
+       submitted: false,
+       authenticated: false,
+       sessionId: null,
+       email: null,
+     }
+   },
+   methods: {
+     togglePasswordVisibility() {
+       this.passwordVisible = !this.passwordVisible
+     },
+     async onSubmit() {
+       const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
+       if (result.success) {
+         this.password = ''
+         /*
+            this.$store.dispatch('login', {
+            sessionId: result.result.data.session_id,
+            email: result.result.data.user.email,
+            })
+          */
+         this.$router.push('/thx/reset')
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
          })
-         */
-        this.$router.push('/thx/reset')
-      } else {
-        alert(result.result.message)
-      }
-    },
-    async authenticate() {
-      const optin = this.$route.params.optin
-      const result = await loginAPI.loginViaEmailVerificationCode(optin)
-      if (result.success) {
-        this.authenticated = true
-        this.sessionId = result.result.data.session_id
-        this.email = result.result.data.user.email
-      } else {
-        alert(result.result.message)
-      }
-    },
-  },
-  computed: {
-    samePasswords() {
-      return this.password === this.checkPassword
-    },
-    passwordsFilled() {
-      return this.password !== '' && this.checkPassword !== ''
-    },
-    rules() {
-      return [
-        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
-        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
-        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
-        { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
-      ]
-    },
-    passwordValidation() {
-      const errors = []
-      for (const condition of this.rules) {
-        if (!condition.regex.test(this.password)) {
-          errors.push(condition.message)
-        }
-      }
-      if (errors.length === 0) {
-        return { valid: true, errors }
-      }
-      return { valid: false, errors }
-    },
-  },
-  async created() {
-    this.authenticate()
-  },
-}
+       }
+     },
+     async authenticate() {
+       const optin = this.$route.params.optin
+       const result = await loginAPI.loginViaEmailVerificationCode(optin)
+       if (result.success) {
+         this.authenticated = true
+         this.sessionId = result.result.data.session_id
+         this.email = result.result.data.user.email
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
+         })
+       }
+     },
+   },
+   computed: {
+     samePasswords() {
+       return this.password === this.checkPassword
+     },
+     passwordsFilled() {
+       return this.password !== '' && this.checkPassword !== ''
+     },
+     rules() {
+       return [
+         { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
+         { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
+         { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
+         { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
+       ]
+     },
+     passwordValidation() {
+       const errors = []
+       for (const condition of this.rules) {
+         if (!condition.regex.test(this.password)) {
+           errors.push(condition.message)
+         }
+       }
+       if (errors.length === 0) {
+         return { valid: true, errors }
+       }
+       return { valid: false, errors }
+     },
+   },
+   async created() {
+     this.authenticate()
+   },
+ }
 </script>
 <style></style>