diff --git a/components/Confirm.vue b/components/Confirm.vue
index 4a0e36ed..4bbc9c73 100644
--- a/components/Confirm.vue
+++ b/components/Confirm.vue
@@ -61,10 +61,10 @@ export default {
     this.$root.$confirm = this.open
   },
   methods: {
-    open (title, message, options) {
+    open (message, options) {
       this.dialog = true
-      this.title = title
-      this.message = message
+      this.title = option.title || 'Confirm'
+      this.message = this.$t(message, options)
       this.options = Object.assign(this.options, options)
       return new Promise((resolve, reject) => {
         this.resolve = resolve
diff --git a/components/Nav.vue b/components/Nav.vue
index 4df67797..03568983 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -98,14 +98,10 @@ export default {
   },
   methods: {
     copyLink () {
-      this.$root.$message({
-        message: this.$t('common.feed_url_copied')
-      })
+      this.$root.$message('common.feed_url_copied')
     },
     logout () {
-      this.$root.$message({
-        message: this.$t('common.logout_ok')
-      })
+      this.$root.$message('common.logout_ok')
       this.$auth.logout()
     },
     async createTrustedInstance () {
@@ -123,11 +119,7 @@ export default {
         }
         this.setSetting({ key: 'trusted_instances', value: this.settings.trusted_instances.concat(trusted_instance) })
       } catch (e) {
-        console.error(e)
-        this.$root.$message({
-          type: 'error',
-          message: e
-        })
+        this.$root.$message(e, { color: 'error' })
       }
     }
   }
diff --git a/components/Snackbar.vue b/components/Snackbar.vue
index 5f7e9a34..ee31f78a 100644
--- a/components/Snackbar.vue
+++ b/components/Snackbar.vue
@@ -29,10 +29,11 @@ export default {
     }
   },
   created () {
-    this.$root.$message = snackbar => {
+    this.$root.$message = (message, opts) => {
       this.active = true
-      this.message = snackbar.message
-      this.color = snackbar.color || 'primary'
+      this.message = this.$t(message, opts)
+      this.color = opts.color || 'primary'
+      this.icon = opts.icon || 'md-alert'
     }
   }
 }
diff --git a/components/admin/Announcement.vue b/components/admin/Announcement.vue
index 86cac628..ed4fc345 100644
--- a/components/admin/Announcement.vue
+++ b/components/admin/Announcement.vue
@@ -2,7 +2,7 @@
   v-container
     v-card-title {{$t('common.announcements')}}
     v-card-subtitle(v-html="$t('admin.announcement_description')")
-    v-dialog(v-model='dialog' width='800')
+    v-dialog(v-model='dialog' width='800px')
       v-card
         v-card-title {{$t('admin.new_announcement')}}
         v-card-text
@@ -72,18 +72,12 @@ export default {
         this.setAnnouncements(cloneDeep(this.announcements.filter(a => a.visible)))
       } catch (e) {}
     },
-    remove (announcement) {
-      this.$root.$confirm(this.$t('admin.delete_announcement_confirm'),
-        this.$t('common.confirm'), {
-          confirmButtonText: this.$t('common.ok'),
-          cancelButtonText: this.$t('common.cancel'),
-          type: 'error'
-        })
-        .then(() => this.$axios.delete(`/announcements/${announcement.id}`))
+    async remove (announcement) {
+      const ret = await this.$root.$confirm('admin.delete_announcement_confirm')
+      if (!ret) return
+      this.$axios.delete(`/announcements/${announcement.id}`)
         .then(() => {
-          this.$root.$message({
-            message: this.$t('admin.announcement_remove_ok')
-          })
+          this.$root.$message('admin.announcement_remove_ok')
           this.announcements = this.announcements.filter(a => a.id !== announcement.id)
         })
     },
diff --git a/components/admin/Events.vue b/components/admin/Events.vue
index 894e8cd9..7b19390a 100644
--- a/components/admin/Events.vue
+++ b/components/admin/Events.vue
@@ -45,13 +45,10 @@ export default {
       } catch (e) {}
     },
     async remove (event) {
-      const ret = await this.$root.$confirm(this.$t('common.confirm'),
-        this.$t('event.remove_confirmation'))
+      const ret = await this.$root.$confirm('event.remove_confirmation')
       if (!ret) { return }
       await this.$axios.delete(`/event/${event.id}`)
-      this.$root.$message({
-        message: this.$t('admin.event_remove_ok')
-      })
+      this.$root.$message('admin.event_remove_ok')
     }
   }
 }
diff --git a/components/admin/Federation.vue b/components/admin/Federation.vue
index 622da5bf..0366028b 100644
--- a/components/admin/Federation.vue
+++ b/components/admin/Federation.vue
@@ -124,15 +124,11 @@ export default {
         })
         this.instance_url = ''
       } catch (e) {
-        this.$root.$message({
-          type: 'error',
-          message: e
-        })
+        this.$root.$message(e, { color: 'error' })
       }
     },
     async deleteInstance (instance) {
-      const ret = await this.$root.$confirm(this.$t('common.confirm'),
-        this.$t('admin.delete_trusted_instance_confirm'))
+      const ret = await this.$root.$confirm('admin.delete_trusted_instance_confirm')
       if (!ret) { return }
       this.setSetting({
         key: 'trusted_instances',
diff --git a/components/admin/Users.vue b/components/admin/Users.vue
index e833e672..556bc1f5 100644
--- a/components/admin/Users.vue
+++ b/components/admin/Users.vue
@@ -67,10 +67,10 @@ export default {
   computed: mapState(['settings']),
   methods: {
     async deleteUser (user) {
-      const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_user_confirm'))
+      const ret = await this.$root.$confirm('admin.delete_user_confirm')
       if (!ret) { return }
       await this.$axios.delete(`/user/${user.id}`)
-      this.$root.$message({ message: this.$t('admin.user_remove_ok') })
+      this.$root.$message('admin.user_remove_ok')
       this.users_ = this.users_.filter(u => u.id !== user.id)
     },
     toggle (user) {
@@ -90,16 +90,10 @@ export default {
         const user = await this.$axios.$post('/user', this.new_user)
         this.new_user = { email: '', is_admin: false }
 
-        this.$root.$message({
-          type: 'success',
-          message: this.$t('admin.user_create_ok')
-        })
+        this.$root.$message('admin.user_create_ok', { color: 'success'})
         this.users_.push(user)
       } catch (e) {
-        this.$root.$message({
-          type: 'error',
-          message: this.$t(e)
-        })
+        this.$root.$message(e, { color: 'error' })
       }
     }
   }
diff --git a/layouts/default.vue b/layouts/default.vue
index ca94470d..a81b303b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -32,7 +32,6 @@ export default {
 </script>
 <style lang="less">
 .v-dialog {
-  width: unset !important;
-  max-width: 600px;
+  max-width: 800px;
 }
 </style>
diff --git a/locales/en.json b/locales/en.json
index 1fba4252..f86d3c6e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -205,7 +205,8 @@
         "add_link": "Add link",
         "footer_links": "Footer links",
         "delete_footer_link_confirm": "Sure to remove this link?",
-        "edit_place": "Edit place"
+        "edit_place": "Edit place",
+        "new_announcement": "New announcement"
     },
     "auth": {
         "not_confirmed": "Not confirmed yet...",
diff --git a/pages/Admin.vue b/pages/Admin.vue
index a2b9e507..58851eaf 100644
--- a/pages/Admin.vue
+++ b/pages/Admin.vue
@@ -88,17 +88,11 @@ export default {
       this.$router.push(`/event/${id}`)
     },
     async confirm (id) {
-      try {
-        this.loading = true
-        await this.$axios.$get(`/event/confirm/${id}`)
-        this.loading = false
-        this.$root.$message({
-          message: this.$t('event.confirmed'),
-          type: 'success'
-        })
-        this.unconfirmedEvents = this.unconfirmedEvents.filter(e => e.id !== id)
-      } catch (e) {
-      }
+      this.loading = true
+      await this.$axios.$get(`/event/confirm/${id}`)
+      this.loading = false
+      this.$root.$message('event.confirmed', { color: 'succes' })
+      this.unconfirmedEvents = this.unconfirmedEvents.filter(e => e.id !== id)
     }
   },
   head () {
diff --git a/pages/Login.vue b/pages/Login.vue
index bdf8f593..29a61f1d 100644
--- a/pages/Login.vue
+++ b/pages/Login.vue
@@ -65,7 +65,7 @@ export default {
       this.loading = true
       await this.$axios.$post('/user/recover', { email: this.email })
       this.loading = false
-      this.$root.$message({ message: this.$t('login.check_email'), color: 'success' })
+      this.$root.$message('login.check_email', { color: 'success' })
     },
     async submit (e) {
       e.preventDefault()
@@ -78,9 +78,9 @@ export default {
         data.append('client_id', 'self')
         await this.$auth.loginWith('local', { data })
         this.loading = false
-        this.$root.$message({ message: this.$t('login.ok'), color: 'success' })
+        this.$root.$message('login.ok',{ color: 'success' })
       } catch (e) {
-        this.$root.$message({ message: this.$t('login.error'), color: 'error' })
+        this.$root.$message('login.error',{ color: 'error' })
         this.loading = false
         return
       }
diff --git a/pages/Register.vue b/pages/Register.vue
index 33191980..3ea4f0d6 100644
--- a/pages/Register.vue
+++ b/pages/Register.vue
@@ -67,13 +67,11 @@ export default {
         const user = await this.$axios.$post('/user/register', this.user)
         // this is the first user registered
         const first_user = user && user.is_admin && user.is_active
-        this.$root.$message({
-          message: first_user ? this.$t('register.first_user') : this.$t('register.complete')
-        })
+        this.$root.$message(first_user ? 'register.first_user': 'register.complete')
         this.$router.replace('/')
       } catch (e) {
         const error = get(e, 'response.data.errors[0].message', String(e))
-        this.$root.$message({ message: this.$t(error), color: 'error' })
+        this.$root.$message(error, { color: 'error' })
       }
       this.loading = false
     }
diff --git a/pages/about.vue b/pages/about.vue
index 07152bb0..532fac9c 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -25,10 +25,7 @@ export default {
   methods: {
     ...mapActions(['setSetting']),
     save () {
-      this.$root.$message({
-        type: 'success',
-        message: this.$t('common.done')
-      })
+      this.$root.$message('commmon.done', { color: 'success' })
       this.setSetting({ key: 'about', value: this.about })
     }
   },
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index b59a38dd..4d878a44 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -447,15 +447,15 @@ export default {
         this.updateMeta()
         this.$router.replace('/')
         this.loading = false
-        this.$root.$message({ type: 'success', message: this.$auth.loggedIn ? this.$t('event.added') : this.$t('event.added_anon') })
+        this.$root.$message(this.$auth.loggedIn ? 'event.added' : 'event.added_anon', { color: 'success' })
       } catch (e) {
         console.error(e.response)
         switch (e.request.status) {
           case 413:
-            this.$root.$message({ type: 'error', message: this.$t('event.image_too_big') })
+            this.$root.$message('event.image_too_big', { color: 'error' })
             break
           default:
-            this.$root.$message({ type: 'error', message: e.response.data })
+            this.$root.$message(e.response.data, { color: 'error' })
         }
         this.loading = false
       }
@@ -477,26 +477,5 @@ export default {
 .container {
   max-width: 1400px;
 }
-/* #edit_page
-  i {
-    font-size: 1.3em;
-  }
-
-  #picker {
-    max-width: 600px;
-  }
-
-  #edit_page .el-form-item {
-    display: inline-flex;
-  }
-
-  .el-upload,
-  .el-upload-dragger {
-    overflow: hidden;
-    text-align: center;
-    margin: 0 auto;
-    max-width: 80%;
-    font-size: 2em;
-  } */
 
 </style>
diff --git a/pages/event/_id.vue b/pages/event/_id.vue
index e377d3bb..068ebb56 100644
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -243,22 +243,22 @@ export default {
     },
     async blockUser (resource) {
       try {
-        const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.user_block_confirm', { user: resource.ap_user.ap_id }))
+        const ret = await this.$root.$confirm('admin.user_block_confirm', { user: resource.ap_user.ap_id })
         if (!ret) { return }
         await this.$axios.post('/instances/toggle_user_block', { ap_id: resource.ap_user.ap_id })
-        this.$root.$message({ message: this.$t('admin.user_blocked', { user: resource.ap_user.ap_id }), type: 'success' })
+        this.$root.$message('admin.user_blocked', { user: resource.ap_user.ap_id, color: 'success' })
       } catch (e) { }
     },
     async deleteResource (resource) {
       try {
-        const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_resource_confirm'))
+        const ret = await this.$root.$confirm('admin.delete_resource_confirm')
         if (!ret) { return }
         await this.$axios.delete(`/resources/${resource.id}`)
         this.event.resources = this.event.resources.filter(r => r.id !== resource.id)
       } catch (e) { }
     },
     copyLink () {
-      this.$root.$message({ message: this.$t('common.copied'), type: 'success' })
+      this.$root.$message('common.copied', { color: 'success' })
     },
     // TOFIX
     resource_filter (value) {
@@ -285,163 +285,5 @@ export default {
     margin: 0 auto;
     max-height: 83vh;
   }
-
 }
-//   time {
-//     margin: 0rem 0rem 0rem 1rem;
-//     display: inline-block;
-//   }
-
-//   #arrow {
-//     position: absolute;
-//     top: 1em;
-//     right: 1em;
-//   }
-
-//   .el-header {
-//     height: auto !important;
-//     position: sticky;
-//     padding-top: .4em;
-//     top: 0px;
-//     border-bottom: 1px solid lightgray;
-//     z-index: 1;
-//     overflow: hidden;
-//   }
-
-//   .embedDialog {
-//     .el-dialog {
-//       min-height: 500px;
-//       max-width: 1000px;
-//       width: 100%;
-//     }
-//   }
-
-//   .followDialog {
-//     .el-dialog {
-//       min-height: 300px;
-//       max-width: 600px;
-//       width: 100%;
-//       .el-dialog__body {
-//         word-break: normal !important;
-//       }
-//     }
-//   }
-
-//   .head {
-//     z-index: 1;
-//     position: sticky;
-//     top: 0px;
-//     padding-top: 10px;
-//     padding-bottom: 10px;
-//     background-color: white;
-//     border-bottom: 1px solid #e6e6e6;
-//   }
-
-//   .menu {
-//     border-right: none;
-//     background-color: transparent;
-//   }
-
-//   div.menu {
-//     border-left: 1px solid #e6e6e6;
-//     p {
-//       margin: 1rem 0rem 1rem 1rem;
-//     }
-//   }
-
-//   .title {
-//     display: table-cell;
-//     padding-right: 70px;
-//     height: 2.1em;
-//     font-size: 1.6rem;
-//     color: #404246;
-//     line-height: 1;
-//     vertical-align: middle;
-//   }
-
-  // pre {
-  //   white-space: pre-line;
-  //   word-break: break-word;
-  //   font-size: 1em;
-  //   font-family: inherit;
-
-  //   p:empty {
-  //     min-height: 1em;
-  //   }
-  //   // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
-  //     // Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
-  //     // sans-serif !important;
-  // }
-
-//   .main_image {
-//     width: 100%;
-//     transition: height .100s;
-//     height: auto;
-
-//     img {
-//       // object-fit: contain;
-//       margin: 0 auto;
-//       max-height: 88vh;
-//     }
-
-//     .loading {
-//       display: flex;
-//       justify-content: center;
-//       align-items: center;
-//       font-size: 30px;
-//       margin: 0 auto;
-//       height: 100px;
-//     }
-//   }
-
-//   #resources {
-//     img {
-//       max-width: 100%;
-//     }
-//     .card-header {
-//       border-left: 3px solid transparent;
-//     }
-//     .card-header:hover {
-//       border-left: 3px solid #888;
-//     }
-//     .invisible {
-//       visibility: visible !important;
-//     }
-//     .disabled {
-//       opacity: 0.5;
-//     }
-//     .previewImage {
-//       display: flex;
-//       flex-flow: wrap;
-//       justify-content: space-evenly;
-//       img {
-//         margin-left: 5px;
-//         margin-top: 5px;
-//         object-fit: cover;
-//         min-height: 100px;
-//         max-width: 45%;
-//         border-radius: 5px;
-//         border: 1px solid #ccc;
-//       }
-//     }
-//   }
-//   .nextprev {
-//     font-size: 10px;
-//     margin-bottom: 5px;
-//   }
-// }
-
-// @media only screen and (max-width: 768px) {
-//   #eventDetail {
-//     .menu {
-//       border: 0px !important;
-//     }
-
-//     .title {
-//       // font-size: 1.1em;
-//       line-height: 1.4em;
-//       color: black;
-//     }
-//   }
-// }
 </style>
diff --git a/pages/event/embedEvent.vue b/pages/event/embedEvent.vue
index cda05a31..f8f799d0 100644
--- a/pages/event/embedEvent.vue
+++ b/pages/event/embedEvent.vue
@@ -28,7 +28,7 @@ export default {
   },
   methods: {
     copyLink () {
-      this.$root.$message({ message: this.$t('common.copied'), type: 'success' })
+      this.$root.$message('common.copied', { color: 'success' })
     }
   }
 }
diff --git a/pages/export.vue b/pages/export.vue
index c03d97d7..ec639dde 100644
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -129,8 +129,7 @@ export default {
   },
   methods: {
     copyLink () {
-      // Message({ message: this.$t('common.copied'), type: 'success', showClose: true })
-      this.$root.$message({ message: this.$t('common.feed_url_copied') })
+      this.$root.$message('common.feed_url_copied')
     },
     add_notification () {
       if (!this.notification.email) {
diff --git a/pages/recover/_code.vue b/pages/recover/_code.vue
index fe5c32d6..6bf8ee51 100644
--- a/pages/recover/_code.vue
+++ b/pages/recover/_code.vue
@@ -38,15 +38,10 @@ export default {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        this.$root.$message({
-          message: this.$t('common.password_updated')
-        })
+        this.$root.$message('common.password_updated')
         this.$router.replace('/login')
       } catch (e) {
-        this.$root.$message({
-          type: 'warning',
-          message: e
-        })
+        this.$root.$message(e, { color: 'warning' })
       }
     }
   },
diff --git a/pages/user_confirm/_code.vue b/pages/user_confirm/_code.vue
index 3b0e9306..b16a0745 100644
--- a/pages/user_confirm/_code.vue
+++ b/pages/user_confirm/_code.vue
@@ -34,16 +34,10 @@ export default {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        this.$root.$message({
-          type: 'success',
-          message: this.$t('common.password_updated')
-        })
+        this.$root.$message('common.password_updated', { color: 'success' })
         this.$router.replace('/login')
       } catch (e) {
-        this.$root.$message({
-          type: 'warning',
-          message: e
-        })
+        this.$root.$message(e, { color: 'warning' })
       }
     }
   }
diff --git a/pages/user_confirm_pwd/_code.vue b/pages/user_confirm_pwd/_code.vue
index 5b9055ca..bfa3d682 100644
--- a/pages/user_confirm_pwd/_code.vue
+++ b/pages/user_confirm_pwd/_code.vue
@@ -33,16 +33,10 @@ export default {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        this.$root.$message({
-          type: 'success',
-          message: this.$t('common.password_updated')
-        })
+        this.$root.$message('common.password_updated', { color: 'succes' })
         this.$router.replace('/login')
       } catch (e) {
-        this.$root.$message({
-          type: 'warning',
-          message: e
-        })
+        this.$root.$message(e, { color: 'warning' })
       }
     }
   }