diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index fd1c69cc..fbcd3181 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,319 +1,319 @@
 /**
  * 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')
 
 import AppComponent from '../vue/App'
 import MenuComponent from '../vue/Widgets/Menu'
 import store from './store'
 
 const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>'
 
 const app = new Vue({
     el: '#app',
     components: {
         AppComponent,
         MenuComponent,
     },
     store,
     router: window.router,
     data() {
         return {
             isLoading: true,
             isAdmin: window.isAdmin
         }
     },
     methods: {
         // Clear (bootstrap) form validation state
         clearFormValidation(form) {
             $(form).find('.is-invalid').removeClass('is-invalid')
             $(form).find('.invalid-feedback').remove()
         },
         isController(wallet_id) {
             if (wallet_id && store.state.authInfo) {
                 let i
                 for (i = 0; i < store.state.authInfo.wallets.length; i++) {
                     if (wallet_id == store.state.authInfo.wallets[i].id) {
                         return true
                     }
                 }
                 for (i = 0; i < store.state.authInfo.accounts.length; i++) {
                     if (wallet_id == store.state.authInfo.accounts[i].id) {
                         return true
                     }
                 }
             }
 
             return false
         },
         // Set user state to "logged in"
         loginUser(token, dashboard) {
             store.commit('logoutUser') // destroy old state data
             store.commit('loginUser')
             localStorage.setItem('token', token)
             axios.defaults.headers.common.Authorization = 'Bearer ' + token
 
             if (dashboard !== false) {
                 this.$router.push(store.state.afterLogin || { name: 'dashboard' })
             }
 
             store.state.afterLogin = null
         },
         // Set user state to "not logged in"
         logoutUser() {
             store.commit('logoutUser')
             localStorage.setItem('token', '')
             delete axios.defaults.headers.common.Authorization
             this.$router.push({ name: 'login' })
         },
         // Display "loading" overlay inside of the specified element
         addLoader(elem) {
             $(elem).css({position: 'relative'}).append($(loader).addClass('small'))
         },
         // Remove loader element added in addLoader()
         removeLoader(elem) {
             $(elem).find('.app-loader').remove()
         },
         startLoading() {
             this.isLoading = true
             // Lock the UI with the 'loading...' element
             let loading = $('#app > .app-loader').show()
             if (!loading.length) {
                 $('#app').append($(loader))
             }
         },
         // Hide "loading" overlay
         stopLoading() {
             $('#app > .app-loader').fadeOut()
             this.isLoading = false
         },
         errorPage(code, msg) {
             // Until https://github.com/vuejs/vue-router/issues/977 is implemented
             // we can't really use router to display error page as it has two side
             // effects: it changes the URL and adds the error page to browser history.
             // For now we'll be replacing current view with error page "manually".
             const map = {
                 400: "Bad request",
                 401: "Unauthorized",
                 403: "Access denied",
                 404: "Not found",
                 405: "Method not allowed",
                 500: "Internal server error"
             }
 
             if (!msg) msg = map[code] || "Unknown Error"
 
             const error_page = `<div id="error-page"><div class="code">${code}</div><div class="message">${msg}</div></div>`
 
-            $('#app').children(':not(nav)').remove()
+            $('#error-page').remove()
             $('#app').append(error_page)
         },
         errorHandler(error) {
             this.stopLoading()
 
             if (!error.response) {
                 // TODO: probably network connection error
             } else if (error.response.status === 401) {
                 this.logoutUser()
             } else {
                 this.errorPage(error.response.status, error.response.statusText)
             }
         },
         downloadFile(url) {
             // TODO: This might not be a best way for big files as the content
             //       will be stored (temporarily) in browser memory
             // TODO: This method does not show the download progress in the browser
             //       but it could be implemented in the UI, axios has 'progress' property
             axios.get(url, { responseType: 'blob' })
                 .then (response => {
                     const link = document.createElement('a')
                     const contentDisposition = response.headers['content-disposition']
                     let filename = 'unknown'
 
                     if (contentDisposition) {
                         const match = contentDisposition.match(/filename="(.+)"/);
                         if (match.length === 2) {
                             filename = match[1];
                         }
                     }
 
                     link.href = window.URL.createObjectURL(response.data)
                     link.download = filename
                     link.click()
                 })
         },
         price(price) {
             return (price/100).toLocaleString('de-DE', { style: 'currency', currency: 'CHF' })
         },
         priceLabel(cost, units = 1, discount) {
             let index = ''
 
             if (units < 0) {
                 units = 1
             }
 
             if (discount) {
                 cost = Math.floor(cost * ((100 - discount) / 100))
                 index = '\u00B9'
             }
 
             return this.price(cost * units) + '/month' + index
         },
         domainStatusClass(domain) {
             if (domain.isDeleted) {
                 return 'text-muted'
             }
 
             if (domain.isSuspended) {
                 return 'text-warning'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         domainStatusText(domain) {
             if (domain.isDeleted) {
                 return 'Deleted'
             }
 
             if (domain.isSuspended) {
                 return 'Suspended'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'Not Ready'
             }
 
             return 'Active'
         },
         userStatusClass(user) {
             if (user.isDeleted) {
                 return 'text-muted'
             }
 
             if (user.isSuspended) {
                 return 'text-warning'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         userStatusText(user) {
             if (user.isDeleted) {
                 return 'Deleted'
             }
 
             if (user.isSuspended) {
                 return 'Suspended'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'Not Ready'
             }
 
             return 'Active'
         }
     }
 })
 
 // Add a axios request interceptor
 window.axios.interceptors.request.use(
     config => {
         // This is the only way I found to change configuration options
         // on a running application. We need this for browser testing.
         config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider
 
         return config
     },
     error => {
         // Do something with request error
         return Promise.reject(error)
     }
 )
 
 // Add a axios response interceptor for general/validation error handler
 window.axios.interceptors.response.use(
     response => {
         // Do nothing
         return response
     },
     error => {
         let error_msg
         let status = error.response ? error.response.status : 200
 
         if (error.response && status == 422) {
             error_msg = "Form validation error"
 
             const modal = $('div.modal.show')
 
             $(modal.length ? modal : 'form').each((i, form) => {
                 form = $(form)
 
                 $.each(error.response.data.errors || {}, (idx, msg) => {
                     const input_name = (form.data('validation-prefix') || form.find('form').first().data('validation-prefix') || '') + idx
                     let input = form.find('#' + input_name)
 
                     if (!input.length) {
                         input = form.find('[name="' + input_name + '"]');
                     }
 
                     if (input.length) {
                         // Create an error message\
                         // API responses can use a string, array or object
                         let msg_text = ''
                         if ($.type(msg) !== 'string') {
                             $.each(msg, (index, str) => {
                                 msg_text += str + ' '
                             })
                         }
                         else {
                             msg_text = msg
                         }
 
                         let feedback = $('<div class="invalid-feedback">').text(msg_text)
 
                         if (input.is('.list-input')) {
                             // List input widget
                             input.children(':not(:first-child)').each((index, element) => {
                                 if (msg[index]) {
                                     $(element).find('input').addClass('is-invalid')
                                 }
                             })
 
                             input.addClass('is-invalid').next('.invalid-feedback').remove()
                             input.after(feedback)
                         }
                         else {
                             // Standard form element
                             input.addClass('is-invalid')
                             input.parent().find('.invalid-feedback').remove()
                             input.parent().append(feedback)
                         }
                     }
                 })
 
                 form.find('.is-invalid:not(.listinput-widget)').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.$toast.error(error_msg || "Server 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 0b749d55..a1cd2798 100644
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -1,81 +1,86 @@
 /**
  * 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.
  */
 
 window.Popper = require('popper.js').default
 window.$ = window.jQuery = require('jquery')
 
 require('bootstrap')
 
 /**
  * We'll load Vue, VueRouter and global components
  */
 
 import FontAwesomeIcon from './fontawesome'
 import VueRouter from 'vue-router'
 import Toast from '../vue/Widgets/Toast'
 import store from './store'
 
 window.Vue = require('vue')
 
 Vue.component('svg-icon', FontAwesomeIcon)
 
 const vTooltip = (el, binding) => {
     const t = []
 
     if (binding.modifiers.focus) t.push('focus')
     if (binding.modifiers.hover) t.push('hover')
     if (binding.modifiers.click) t.push('click')
     if (!t.length) t.push('hover')
 
     $(el).tooltip({
         title: binding.value,
         placement: binding.arg || 'top',
         trigger: t.join(' '),
         html: !!binding.modifiers.html,
     });
 }
 
 Vue.directive('tooltip', {
     bind: vTooltip,
     update: vTooltip,
     unbind (el) {
         $(el).tooltip('dispose')
     }
 })
 
 Vue.use(Toast)
 
 Vue.use(VueRouter)
 
 window.router = new VueRouter({
     mode: 'history',
     routes: window.routes
 })
 
 router.beforeEach((to, from, next) => {
     // check if the route requires authentication and user is not logged in
     if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
         // remember the original request, to use after login
         store.state.afterLogin = to;
 
         // redirect to login page
         next({ name: 'login' })
 
         return
     }
 
     next()
 })
 
+router.afterEach((to, from) => {
+    // Remove the (old) error page when changing a page
+    $('#error-page').remove()
+})
+
 /**
  * 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')
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
index f5a73e07..151cc073 100644
--- a/src/resources/vue/Signup.vue
+++ b/src/resources/vue/Signup.vue
@@ -1,263 +1,268 @@
 <template>
     <div class="container">
         <div id="step0">
             <div class="plan-selector d-flex justify-content-around align-items-stretch mb-3">
                 <div v-for="item in plans" :key="item.id" :class="'p-3 m-1 text-center bg-light flex-fill plan-box d-flex flex-column align-items-center plan-' + item.title">
                     <div class="plan-ico">
                         <svg-icon :icon="plan_icons[item.title]"></svg-icon>
                     </div>
                     <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button>
                     <div class="plan-description text-left mt-3" v-html="item.description"></div>
                 </div>
             </div>
             <div class="faq">
                 <h5>FAQ</h5>
                 <ul class="pl-4">
                     <li><a href="https://kolabnow.com/tos">What are your terms of service?</a></li>
                     <li><a href="https://kb.kolabnow.com/faq/can-i-upgrade-an-individual-account-to-a-group-account">Can I upgrade an individual account to a group account?</a></li>
                     <li><a href="https://kb.kolabnow.com/faq/how-much-storage-comes-with-my-account">How much storage comes with my account?</a></li>
                 </ul>
             </div>
         </div>
 
         <div class="card d-none" id="step1">
             <div class="card-body">
                 <h4 class="card-title">Sign Up - Step 1/3</h4>
                 <p class="card-text">
                     Sign up to start your free month.
                 </p>
                 <form @submit.prevent="submitStep1" data-validation-prefix="signup_">
                     <div class="form-group">
                         <div class="input-group">
                             <input type="text" class="form-control" id="signup_first_name" placeholder="First Name" autofocus v-model="first_name">
                             <input type="text" class="form-control rounded-right" id="signup_last_name" placeholder="Surname" v-model="last_name">
                         </div>
                     </div>
                     <div class="form-group">
                         <label for="signup_email" class="sr-only">Existing Email Address</label>
                         <input type="text" class="form-control" id="signup_email" placeholder="Existing Email Address" required v-model="email">
                     </div>
                     <button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
                     <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step2">
             <div class="card-body">
                 <h4 class="card-title">Sign Up - Step 2/3</h4>
                 <p class="card-text">
                     We sent out a confirmation code to your email address.
                     Enter the code we sent you, or click the link in the message.
                 </p>
                 <form @submit.prevent="submitStep2" data-validation-prefix="signup_">
                     <div class="form-group">
                         <label for="signup_short_code" class="sr-only">Confirmation Code</label>
                         <input type="text" class="form-control" id="signup_short_code" placeholder="Confirmation Code" required v-model="short_code">
                     </div>
                     <button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
                     <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
                     <input type="hidden" id="signup_code" v-model="code" />
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step3">
             <div class="card-body">
                 <h4 class="card-title">Sign Up - Step 3/3</h4>
                 <p class="card-text">
                     Create your Kolab identity (you can choose additional addresses later).
                 </p>
                 <form @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" placeholder="Login">
                             <span class="input-group-append">
                                 <span class="input-group-text">@</span>
                             </span>
                             <input v-if="is_domain" type="text" class="form-control rounded-right" id="signup_domain" required v-model="domain" placeholder="Domain">
                             <select v-else class="custom-select rounded-right" id="signup_domain" required v-model="domain"></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>
                     <div class="form-group pt-2 pb-2">
                         <label for="signup_voucher" class="sr-only">Voucher code</label>
                         <input type="text" class="form-control" id="signup_voucher" placeholder="Voucher code" v-model="voucher">
                     </div>
                     <button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
                     <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 email: '',
                 first_name: '',
                 last_name: '',
                 code: '',
                 short_code: '',
                 login: '',
                 password: '',
                 password_confirmation: '',
                 domain: '',
                 plan: null,
                 is_domain: false,
                 plan_icons: {
                     individual: 'user',
                     group: 'users'
                 },
                 plans: [],
                 voucher: ''
             }
         },
         mounted() {
             let param = this.$route.params.param;
 
             if (param) {
                 if (this.$route.path.indexOf('/signup/voucher/') === 0) {
                     // Voucher (discount) code
                     this.voucher = param
                     this.displayForm(0)
                 } else if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) {
                     // Verification code provided, auto-submit Step 2
                     this.short_code = RegExp.$1
                     this.code = RegExp.$2
                     this.submitStep2(true)
                 } else if (/^([a-zA-Z_]+)$/.test(param)) {
                     // Plan title provided, save it and display Step 1
                     this.plan = param
                     this.displayForm(1, true)
                 } else {
                     this.$root.errorPage(404)
                 }
             } else {
                 this.displayForm(0)
             }
         },
         methods: {
             selectPlan(plan) {
                 this.$router.push({path: '/signup/' + plan})
                 this.plan = plan
                 this.displayForm(1, true)
             },
             // Composes plan selection page
             step0() {
                 if (!this.plans.length) {
+                    this.$root.startLoading()
                     axios.get('/api/auth/signup/plans', {}).then(response => {
+                        this.$root.stopLoading()
                         this.plans = response.data.plans
                     })
+                    .catch(error => {
+                        this.$root.errorHandler(error)
+                    })
                 }
             },
             // Submits data to the API, validates and gets verification code
             submitStep1() {
                 this.$root.clearFormValidation($('#step1 form'))
 
                 axios.post('/api/auth/signup/init', {
                     email: this.email,
                     last_name: this.last_name,
                     first_name: this.first_name,
                     plan: this.plan,
                     voucher: this.voucher
                 }).then(response => {
                     this.displayForm(2, true)
                     this.code = response.data.code
                 })
             },
             // Submits the code to the API for verification
             submitStep2(bylink) {
                 if (bylink === true) {
                     this.displayForm(2, false)
                 }
 
                 this.$root.clearFormValidation($('#step2 form'))
 
                 axios.post('/api/auth/signup/verify', {
                     code: this.code,
                     short_code: this.short_code
                 }).then(response => {
                     this.displayForm(3, true)
                     // Reset user name/email/plan, we don't have them if user used a verification link
                     this.first_name = response.data.first_name
                     this.last_name = response.data.last_name
                     this.email = response.data.email
                     this.is_domain = response.data.is_domain
                     this.voucher = response.data.voucher
 
                     // Fill the domain selector with available domains
                     if (!this.is_domain) {
                         let options = []
                         $('select#signup_domain').html('')
                         $.each(response.data.domains, (i, v) => {
                             options.push($('<option>').text(v).attr('value', v))
                         })
                         $('select#signup_domain').append(options)
                         this.domain = window.config['app.domain']
                     }
                 }).catch(error => {
                     if (bylink === true) {
                         // FIXME: display step 1, user can do nothing about it anyway
                         //        Maybe we should display 404 error page?
                         this.displayForm(1, true)
                     }
                 })
             },
             // Submits the data to the API to create the user account
             submitStep3() {
                 this.$root.clearFormValidation($('#step3 form'))
 
                 axios.post('/api/auth/signup', {
                     code: this.code,
                     short_code: this.short_code,
                     login: this.login,
                     domain: this.domain,
                     password: this.password,
                     password_confirmation: this.password_confirmation,
                     voucher: this.voucher
                 }).then(response => {
                     // auto-login and goto dashboard
                     this.$root.loginUser(response.data.access_token)
                 })
             },
             // Moves the user a step back in registration form
             stepBack(e) {
                 var card = $(e.target).closest('.card')
 
                 card.prev().removeClass('d-none').find('input').first().focus()
                 card.addClass('d-none').find('form')[0].reset()
 
                 if (card.attr('id') == 'step1') {
                     this.step0()
                     this.$router.replace({path: '/signup'})
                 }
             },
             displayForm(step, focus) {
                 [0, 1, 2, 3].filter(value => value != step).forEach(value => {
                     $('#step' + value).addClass('d-none')
                 })
 
                 if (!step) {
                     return this.step0()
                 }
 
                 $('#step' + step).removeClass('d-none')
 
                 if (focus) {
                     $('#step' + step).find('input').first().focus()
                 }
             }
         }
     }
 </script>