diff --git a/src/package.json b/src/package.json
index a505d086..53fb5bca 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,28 +1,29 @@
 {
-    "private": true,
-    "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
-    "devDependencies": {
-        "axios": "^0.19",
-        "bootstrap": "^4.3.1",
-        "cross-env": "^5.1",
-        "jquery": "^3.4.1",
-        "laravel-mix": "^4.0.7",
-        "lodash": "^4.17.13",
-        "popper.js": "^1.12",
-        "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0",
-        "vue": "^2.5.17",
-        "vue-router": "^3.1.3",
-        "vue-template-compiler": "^2.6.10",
-        "vuex": "^3.1.1"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "npm run development -- --watch",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
+  "devDependencies": {
+    "axios": "^0.19",
+    "bootstrap": "^4.3.1",
+    "cross-env": "^5.1",
+    "jquery": "^3.4.1",
+    "laravel-mix": "^4.0.7",
+    "lodash": "^4.17.13",
+    "popper.js": "^1.12",
+    "resolve-url-loader": "^2.3.1",
+    "sass": "^1.15.2",
+    "sass-loader": "^7.1.0",
+    "vue": "^2.5.17",
+    "vue-router": "^3.1.3",
+    "vue-template-compiler": "^2.6.10",
+    "vuex": "^3.1.1",
+    "@deveodk/vue-toastr": "^1.1.0"
+  }
 }
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index ba5998c8..ed9013b0 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,18 +1,81 @@
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-require('./bootstrap');
+require('./bootstrap')
 
-window.Vue = require('vue');
+window.Vue = require('vue')
 
-import router from '../vue/js/routes.js';
+import router from '../vue/js/routes.js'
 
 import AppComponent from '../vue/components/App'
 
 const app = new Vue({
+    el: '#app',
     components: { AppComponent },
-    router
-}).$mount('#app');
+    router,
+    methods: {
+        clearFormValidation: form => {
+            $(form).find('.is-invalid').removeClass('is-invalid')
+            $(form).find('.invalid-feedback').remove()
+        }
+    },
+    mounted() {
+        this.$root.$on('clearFormValidation', (form) => {
+            this.clearFormValidation(form)
+        })
+    }
+})
+
+import VueToastr from '@deveodk/vue-toastr'
+// You need a specific loader for CSS files like https://github.com/webpack/css-loader
+// If you would like custom styling of the toastr the css file can be replaced
+import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'
+
+Vue.use(VueToastr, {
+    defaultPosition: 'toast-bottom-right',
+    defaultTimeout: 50000
+})
+
+// Add a response interceptor for general/validation error handler
+window.axios.interceptors.response.use(response => {
+        // Do nothing
+        return response
+    }, error => {
+        console.log(error.response)
+
+        var error_msg
+
+        if (error.response && error.response.status == 422) {
+            error_msg = "Form validation error"
+
+            $.each(error.response.data.errors || {}, (idx, msg) => {
+                $('form').each((i, form) => {
+                    const input_name = ($(form).data('validation-prefix') || '') + idx
+                    const input = $('#' + input_name)
+
+                    if (input.length) {
+                        input.addClass('is-invalid')
+                            .parent().append($('<div class="invalid-feedback">').text(msg.join('<br>')))
+
+                        return false
+                    }
+                });
+            })
+
+            $('form .is-invalid').first().focus()
+        }
+        else if (error.response && error.response.data) {
+            error_msg = error.response.data.message
+        }
+        else {
+            error_msg = error.request ? error.request.statusText : error.message
+        }
+
+        app.$toastr('error', error_msg || "Server Error", 'Error')
+
+        // Pass the error as-is
+        return Promise.reject(error)
+    });
diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js
index 8eaba1b9..a1b0631d 100644
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -1,41 +1,41 @@
-window._ = require('lodash');
+window._ = require('lodash')
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
  * for JavaScript based Bootstrap features such as modals and tabs. This
  * code may be modified to fit the specific needs of your application.
  */
 
 try {
-    window.Popper = require('popper.js').default;
-    window.$ = window.jQuery = require('jquery');
+    window.Popper = require('popper.js').default
+    window.$ = window.jQuery = require('jquery')
 
-    require('bootstrap');
+    require('bootstrap')
 } catch (e) {}
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+window.axios = require('axios')
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting
  * allows your team to easily build robust real-time web applications.
  */
 
 // import Echo from 'laravel-echo';
 
 // window.Pusher = require('pusher-js');
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
 //     key: process.env.MIX_PUSHER_APP_KEY,
 //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
 //     encrypted: true
 // });
diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss
index fa9d5c91..a6f04262 100644
--- a/src/resources/sass/app.scss
+++ b/src/resources/sass/app.scss
@@ -1,7 +1,13 @@
 // Fonts
 
 // Variables
 @import 'variables';
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+
+// Fixes Toastr incompatibility with Bootstrap
+.toast-container > .toast {
+    opacity: 1;
+}
diff --git a/src/resources/vue/components/App.vue b/src/resources/vue/components/App.vue
index fd3c6864..f9cc0a3b 100644
--- a/src/resources/vue/components/App.vue
+++ b/src/resources/vue/components/App.vue
@@ -1,31 +1,27 @@
 <template>
     <router-view></router-view>
 </template>
 
 <script>
     import store from '../js/store'
     export default {
 
         created() {
-
-            if(localStorage.token) {
+            if (localStorage.token) {
                 axios.get('/api/auth/info', {
                     headers: {
                         Authorization: 'Bearer ' + localStorage.getItem('token')
                     }
-                },
-                ).then(response => {
+                }).then(response => {
                     store.commit('loginUser')
                 }).catch(error => {
                     if (error.response.status === 401 || error.response.status === 403) {
                         store.commit('logoutUser')
                         localStorage.setItem('token', '')
                         this.$router.push({name: 'login'})
                     }
-
                 });
             }
-
         }
     }
 </script>
diff --git a/src/resources/vue/components/Dashboard.vue b/src/resources/vue/components/Dashboard.vue
index 5598269f..7408b890 100644
--- a/src/resources/vue/components/Dashboard.vue
+++ b/src/resources/vue/components/Dashboard.vue
@@ -1,43 +1,41 @@
 <template>
     <div class="container">
         <div class="row">
             <div class="col-md-8 col-md-offset-2">
                 <h1>Dashboard</h1>
 
                 <p>
                     <router-link :to="{ name: 'logout' }">Logout</router-link>
                 </p>
 
                 <div class="panel panel-default">
                     <div class="panel-heading">Dashboard</div>
                     <div class="panel-body">
                         <p>Data: {{ data }}</p>
                     </div>
                 </div>
 
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 data: 'nothing'
             }
         },
         mounted() {
             axios.get('/api/auth/info', {
                 headers: {
                     Authorization: 'Bearer ' + localStorage.getItem('token')
                 }
             })
             .then(response => {
                 this.data = response.data.data
-            }).catch(error => {
-
             })
         }
     }
 </script>
diff --git a/src/resources/vue/components/Signup.vue b/src/resources/vue/components/Signup.vue
index 00ba3ff8..7facaf34 100644
--- a/src/resources/vue/components/Signup.vue
+++ b/src/resources/vue/components/Signup.vue
@@ -1,158 +1,158 @@
 <template>
     <div class="container">
         <div class="card" id="step1">
             <div class="card-body">
                 <h4 class="card-title">Step 1/3</h4>
                 <p class="card-text">
                     Sign up to start your free month.
                 </p>
-                <form v-on:submit.prevent="submitStep1">
+                <form v-on:submit.prevent="submitStep1" data-validation-prefix="signup_">
                     <div class="form-group">
                         <label for="signup_name" class="sr-only">Your Name</label>
                         <input type="text" class="form-control" id="signup_name" placeholder="Your Name" required autofocus v-model="name">
                     </div>
                     <div class="form-group">
                         <label for="signup_email" class="sr-only">Existing Email or Phone Number</label>
                         <input type="text" class="form-control" id="signup_email" placeholder="Existing Email or Phone Number" required v-model="email">
                     </div>
                     <button class="btn btn-primary" type="submit">Continue</button>
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step2">
             <div class="card-body">
                 <h4 class="card-title">Step 2/3</h4>
                 <p class="card-text">
                     We sent out a confirmation code to PHONE/EMAIL.
                     Enter the code we sent you, or click the link in the message.
                 </p>
-                <form v-on:submit.prevent="submitStep2">
+                <form v-on:submit.prevent="submitStep2" data-validation-prefix="signup_">
                     <div class="form-group">
                         <label for="signup_code" class="sr-only">Confirmation Code</label>
                         <input type="text" class="form-control" id="signup_code" placeholder="Confirmation Code" required v-model="short_code">
                     </div>
                     <button class="btn btn-secondary" type="button" v-on:click="stepBack">Back</button>
                     <button class="btn btn-primary" type="submit">Continue</button>
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step3">
             <div class="card-body">
                 <h4 class="card-title">Step 3/3</h4>
                 <p class="card-text">
                     Create your Kolab identity (you can choose additional addresses later).
                 </p>
-                <form v-on:submit.prevent="submitStep3">
+                <form v-on:submit.prevent="submitStep3" data-validation-prefix="signup_">
                     <div class="form-group">
                         <label for="signup_login" class="sr-only"></label>
                         <div class="input-group">
                             <input type="text" class="form-control" id="signup_login" required v-model="login">
                             <span class="input-group-text border-left-0 border-right-0 rounded-0">@</span>
-                            <select class="custom-select" id="signup_domain" v-model="domain">
+                            <select class="custom-select rounded-right" id="signup_domain" v-model="domain">
                                 <option value="kolabnow.com">kolabnow.com</option>
                             </select>
                         </div>
                     </div>
                     <div class="form-group">
                         <label for="signup_password" class="sr-only">Password</label>
                         <input type="password" class="form-control" id="signup_password" placeholder="Password" required v-model="password">
                     </div>
                     <div class="form-group">
                         <label for="signup_confirm" class="sr-only">Confirm Password</label>
                         <input type="password" class="form-control" id="signup_confirm" placeholder="Confirm Password" required v-model="password_confirmation">
                     </div>
                     <button class="btn btn-secondary" type="button" v-on:click="stepBack">Back</button>
                     <button class="btn btn-primary" type="submit">Submit</button>
                 </form>
             </div>
         </div>
 
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 email: '',
                 name: '',
                 code: '',
                 short_code: '',
                 login: '',
                 domain: '',
                 password: '',
                 password_confirmation: ''
             }
         },
         created() {
             // Verification code provided, jump to Step 2
             if (this.$route.params.code && /^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(this.$route.params.code)) {
                 this.short_code = RegExp.$1
                 this.code = RegExp.$2
                 this.submitStep2()
             }
         },
         methods: {
             // Submits data to the API, validates and gets verification code
             submitStep1() {
+                this.$root.$emit('clearFormValidation', $('#step1 form'))
+
                 axios.post('/api/auth/signup/init', {
                     email: this.email,
                     name: this.name
                 }).then(response => {
                     $('#step1').addClass('d-none')
                     $('#step2').removeClass('d-none').find('input').first().focus()
                     this.code = response.data.code
-                }).catch(error => {
-                    // TODO
                 })
             },
             // Submits the code to the API for verification
             submitStep2() {
+                this.$root.$emit('clearFormValidation', $('#step2 form'))
+
                 axios.post('/api/auth/signup/verify', {
                     email: this.email,
                     name: this.name,
                     code: this.code,
                     short_code: this.short_code
                 }).then(response => {
                     $('#step1,#step2').addClass('d-none')
                     $('#step3').removeClass('d-none').find('input').first().focus()
 
                     // FIXME: Reset domain selector, vue does set it to an empty value
                     $('#signup_domain > option').first().prop('selected', true)
 
                     // Reset user name/email, we don't have them if user used a verification link
                     this.name = response.data.name
                     this.email = response.data.email
-                }).catch(error => {
-                    // TODO
                 })
             },
             // Submits the data to the API to create the user account
             submitStep3() {
+                this.$root.$emit('clearFormValidation', $('#step3 form'))
+
                 axios.post('/api/auth/signup', {
                     code: this.code,
                     short_code: this.short_code,
                     email: this.email,
                     login: this.login,
                     domain: this.domain,
                     password: this.password,
                     password_confirmation: this.password_confirmation
                 }).then(response => {
                     $('#step2').addClass('d-none')
                     $('#step3').removeClass('d-none').find('input').first().focus()
-                }).catch(error => {
-                    // TODO
                 })
             },
             // Moves the user a step back in registration form
             stepBack(e) {
                 var card = $(e.target).closest('.card')
 
                 card.prev().removeClass('d-none')
                 card.addClass('d-none').find('form')[0].reset()
             }
         }
     }
 </script>