diff --git a/src/public/favicon.ico b/src/public/favicon.ico
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/public/images/favicon.ico b/src/public/images/favicon.ico
new file mode 100644
index 00000000..55221672
Binary files /dev/null and b/src/public/images/favicon.ico differ
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index a208cba6..de67a1a2 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,319 +1,324 @@
 /**
  * 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>`
 
             $('#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, currency) {
             return (price/100).toLocaleString('de-DE', { style: 'currency', 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
         },
+        clickRecord(event) {
+            if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) {
+                $(event.target).closest('tr').find('a')[0].click()
+            }
+        },
         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 a1cd2798..00413a36 100644
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -1,86 +1,92 @@
 /**
  * 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
+    routes: window.routes,
+    scrollBehavior (to, from, savedPosition) {
+        // Scroll the page to top, but not on Back action
+        return savedPosition || { x: 0, y: 0 }
+    }
 })
 
 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()
+    // When changing a page remove old:
+    // - error page
+    // - modal backdrop
+    $('#error-page,.modal-backdrop.show').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/sass/app.scss b/src/resources/sass/app.scss
index 6af13730..f77452a7 100644
--- a/src/resources/sass/app.scss
+++ b/src/resources/sass/app.scss
@@ -1,280 +1,329 @@
-// Fonts
-
-// Variables
 @import 'variables';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';
-
+@import 'bootstrap';
 @import 'menu';
 @import 'toast';
 @import 'forms';
 
 html,
 body,
 body > .outer-container {
     height: 100%;
 }
 
 #app {
     display: flex;
     flex-direction: column;
     min-height: 100%;
 
     & > nav {
         flex-shrink: 0;
         z-index: 12;
     }
 
     & > div.container {
         flex-grow: 1;
         margin-top: 2rem;
         margin-bottom: 2rem;
     }
 
     & > .filler {
         flex-grow: 1;
     }
 
     & > div.container + .filler {
         display: none;
     }
 }
 
 #error-page {
     position: absolute;
     top: 0;
     height: 100%;
     width: 100%;
     align-items: center;
     display: flex;
     justify-content: center;
     color: #636b6f;
     z-index: 10;
     background: white;
 
     .code {
         text-align: right;
         border-right: 2px solid;
         font-size: 26px;
         padding: 0 15px;
     }
 
     .message {
         font-size: 18px;
         padding: 0 15px;
     }
 }
 
 .app-loader {
     background-color: $body-bg;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 8;
 
     .spinner-border {
         width: 120px;
         height: 120px;
         border-width: 15px;
         color: #b2aa99;
     }
 
     &.small .spinner-border {
         width: 25px;
         height: 25px;
         border-width: 3px;
     }
 }
 
 pre {
     margin: 1rem 0;
     padding: 1rem;
     background-color: $menu-bg-color;
 }
 
 .card-title {
     font-size: 1.2rem;
     font-weight: bold;
 }
 
 tfoot.table-fake-body {
     background-color: #f8f8f8;
     color: grey;
     text-align: center;
 
     td {
         vertical-align: middle;
         height: 8em;
     }
 
     tbody:not(:empty) + & {
         display: none;
     }
 }
 
 table {
     td.buttons,
     td.email,
     td.price,
     td.datetime,
     td.selection {
         width: 1%;
         white-space: nowrap;
     }
 
     th.price,
     td.price {
         width: 1%;
         text-align: right;
         white-space: nowrap;
     }
 
     &.form-list {
         margin: 0;
 
         td {
             border: 0;
 
             &:first-child {
                 padding-left: 0;
             }
 
             &:last-child {
                 padding-right: 0;
             }
         }
+
+        button {
+            line-height: 1;
+        }
     }
 
     .btn-action {
         line-height: 1;
         padding: 0;
     }
 }
 
 .list-details {
     min-height: 1em;
 
     & > ul {
         margin: 0;
         padding-left: 1.2em;
     }
 }
 
 .plan-selector {
     .plan-ico {
         font-size: 3.8rem;
         color: #f1a539;
         border: 3px solid #f1a539;
         width: 6rem;
         height: 6rem;
         margin-bottom: 1rem;
         border-radius: 50%;
     }
 }
 
 .plan-description {
     & > ul {
         padding-left: 1.2em;
 
         &:last-child {
             margin-bottom: 0;
         }
     }
 }
 
 #status-box {
     background-color: lighten($green, 35);
 
     .progress {
         background-color: #fff;
         height: 10px;
     }
 
     .progress-label {
         font-size: 0.9em;
     }
 
     .progress-bar {
         background-color: $green;
     }
 
     &.process-failed {
         background-color: lighten($orange, 30);
 
         .progress-bar {
             background-color: $red;
         }
     }
 }
 
 #dashboard-nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 
     & > a {
         padding: 1rem;
         text-align: center;
         white-space: nowrap;
         margin: 0.25rem;
         text-decoration: none;
         width: 150px;
 
         &.disabled {
             pointer-events: none;
             opacity: 0.6;
         }
 
         .badge {
             position: absolute;
             top: 0.5rem;
             right: 0.5rem;
         }
     }
 
     svg {
         width: 6rem;
         height: 6rem;
         margin: auto;
     }
 }
 
 .form-separator {
     position: relative;
     margin: 1em 0;
     display: flex;
     justify-content: center;
 
     hr {
         border-color: #999;
         margin: 0;
         position: absolute;
         top: 0.75em;
         width: 100%;
     }
 
     span {
         background: #fff;
         padding: 0 1em;
         z-index: 1;
     }
 }
 
-// Bootstrap style fix
-.btn-link {
-    border: 0;
-}
+// Various improvements for mobile
+@include media-breakpoint-down(sm) {
+    .card {
+        border: 0;
+    }
 
-.table thead th {
-    border: 0;
-}
+    .card-body {
+        padding: 0.5rem 0;
+    }
+
+    .form-group {
+        margin-bottom: 0.5rem;
+    }
+
+    .tab-content {
+        margin-top: 0.5rem;
+    }
+
+    .col-form-label {
+        color: #666;
+        font-size: 95%;
+    }
+
+    .form-group.plaintext .col-form-label {
+        padding-bottom: 0;
+    }
+
+    form.read-only.short label {
+        width: 35%;
 
-small {
-    font-size: 0.875em;
+        & + * {
+            width: 65%;
+        }
+    }
+
+    #app > div.container {
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+    }
+
+    #header-menu-navbar {
+        padding: 0;
+    }
+
+    #dashboard-nav > a {
+        width: 135px;
+    }
+
+    .table-sm:not(.form-list) {
+        tbody td {
+            padding: 0.75rem 0.5rem;
+
+            svg {
+                vertical-align: -0.175em;
+            }
+
+            & > svg {
+                font-size: 125%;
+                margin-right: 0.25rem;
+            }
+        }
+    }
 }
diff --git a/src/resources/sass/bootstrap.scss b/src/resources/sass/bootstrap.scss
new file mode 100644
index 00000000..444260d9
--- /dev/null
+++ b/src/resources/sass/bootstrap.scss
@@ -0,0 +1,15 @@
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+// Bootstrap style fixes
+.btn-link {
+    border: 0;
+}
+
+.table thead th {
+    border: 0;
+}
+
+small {
+    font-size: 0.875em;
+}
diff --git a/src/resources/sass/forms.scss b/src/resources/sass/forms.scss
index 5bc8b0cc..5690b8ed 100644
--- a/src/resources/sass/forms.scss
+++ b/src/resources/sass/forms.scss
@@ -1,44 +1,47 @@
-
 .list-input {
     & > div {
         &:not(:last-child) {
             margin-bottom: -1px;
 
             input,
             a.btn {
                 border-bottom-right-radius: 0;
                 border-bottom-left-radius: 0;
             }
         }
 
         &:not(:first-child) {
             input,
             a.btn {
                 border-top-right-radius: 0;
                 border-top-left-radius: 0;
             }
         }
     }
 
     input.is-invalid {
         z-index: 2;
     }
+
+    .btn svg {
+        vertical-align: middle;
+    }
 }
 
 .range-input {
     display: flex;
 
     label {
         margin-right: 0.5em;
     }
 }
 
 .form-control-plaintext .btn-sm {
     margin-top: -0.25rem;
 }
 
 form.read-only {
     .row {
         margin-bottom: 0;
     }
 }
diff --git a/src/resources/sass/menu.scss b/src/resources/sass/menu.scss
index 2ed5e926..25c99965 100644
--- a/src/resources/sass/menu.scss
+++ b/src/resources/sass/menu.scss
@@ -1,140 +1,150 @@
 #header-menu {
     background-color: $menu-bg-color;
     padding: 0;
     line-height: 85px;
 
     .navbar-brand {
         padding: 0;
         outline: 0;
 
         > img {
             display: inline;
             vertical-align: middle;
         }
     }
 
     .nav-link {
         color: #202020;
         line-height: 85px;
         padding: 0 0 0 25px;
         background: transparent;
 
         &:focus {
             text-decoration: underline;
             outline: 0;
         }
 
         &:hover {
             color: $main-color;
             text-decoration: underline;
         }
 
         &.active:not(.menulogin) {
             font-weight: bold;
         }
     }
 }
 
 #footer-menu {
     background-color: $main-color;
     height: 100px;
 
     .navbar-brand {
         margin: 0;
 
         img {
             width: 170px;
         }
     }
 
     .footer {
         text-align: right;
         color: #fff;
         font-size: 0.75rem;
         padding: 0 0.5rem;
     }
 }
 
 @include media-breakpoint-up(lg) {
     #header-menu {
         a.menulogin {
             text-transform: uppercase;
             border: 2px solid $main-color;
             border-radius: 21px;
             line-height: 21px;
             letter-spacing: 1px;
             padding: 6px 34px;
             margin: 25px 0 25px 25px;
 
             &:focus,
             &:hover {
                 text-decoration: none;
                 background-color: $main-color;
                 color: #fff;
                 font-weight: normal;
             }
         }
     }
 
     #footer-menu {
         .navbar {
             flex-direction: column;
             align-items: flex-end;
         }
     }
 
     .navbar {
         .navbar {
             justify-content: flex-end;
         }
     }
 }
 
 @include media-breakpoint-down(md) {
     #header-menu {
         .navbar-nav {
             padding-bottom: 1em;
         }
 
         .nav-link {
             line-height: 45px;
             padding: 0;
         }
     }
 
     #footer-menu {
         .navbar-nav {
             display: none;
         }
 
         .container {
             flex-wrap: nowrap;
         }
     }
 }
 
 @include media-breakpoint-down(sm) {
     #header-menu {
         padding: 0 1em;
+
+        .navbar-nav {
+            display: block;
+            width: 100%;
+            padding: 0;
+
+            li {
+                border-top: 1px solid #eee;
+            }
+        }
     }
 
     #footer-menu {
         height: 80px;
 
         .container {
             flex-direction: column;
         }
 
         #footer-company {
             display: none;
         }
     }
 }
 
 @media (max-width: 340px) {
     #header-menu {
         .navbar-brand img {
             width: 160px;
         }
     }
 }
diff --git a/src/resources/sass/toast.scss b/src/resources/sass/toast.scss
index fcb15ace..dd832111 100644
--- a/src/resources/sass/toast.scss
+++ b/src/resources/sass/toast.scss
@@ -1,46 +1,55 @@
 .toast-container {
     position: fixed;
     bottom: 0;
     right: 0;
     margin: 0.5rem;
     width: 320px;
     z-index: 1055; // above Bootstrap's modal backdrop and dialogs
+
+    @media (max-width: 375px) {
+        left: 0;
+        width: auto;
+    }
 }
 
 .toast {
     background-color: rgba(52, 58, 64, 0.95);
 
     &:not(:last-child) {
         margin-bottom: 0.3rem;
     }
+
+    @media (max-width: 375px) {
+        max-width: 100%;
+    }
 }
 
 .toast-header {
     background-color: #343a40;
     border-color: #555;
     color: #fff;
 
     strong {
         flex: 1;
     }
 
     svg {
         font-size: 1.2em;
         margin-right: 0.5rem;
     }
 
     button.close {
         color: #eee;
         opacity: 1 !important;
         text-shadow: none;
         font-size: 1.2rem;
 
         &:hover {
             color: #fff;
         }
     }
 }
 
 .toast-body {
     color: #fff;
 }
diff --git a/src/resources/views/layouts/app.blade.php b/src/resources/views/layouts/app.blade.php
index 97463117..11e14c40 100644
--- a/src/resources/views/layouts/app.blade.php
+++ b/src/resources/views/layouts/app.blade.php
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title>{{ config('app.name') }} -- @yield('title')</title>
 
         {{-- TODO: PWA disabled for now: @laravelPWA --}}
+        <link rel="icon" type="image/x-icon" href="{{ asset('images/favicon.ico') }}">
         <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     </head>
     <body>
         <div class="outer-container">
             @yield('content')
         </div>
 
         <script>window.config = {!! json_encode($env) !!}</script>
         <script src="{{ asset('js/' . $env['jsapp']) }}" defer></script>
     </body>
 </html>
diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
index d4514194..e2678d28 100644
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -1,597 +1,597 @@
 <template>
     <div class="container">
         <div class="card" id="user-info">
             <div class="card-body">
                 <h1 class="card-title">{{ user.email }}</h1>
                 <div class="card-text">
-                    <form class="read-only">
-                        <div v-if="user.wallet.user_id != user.id" class="form-group row">
+                    <form class="read-only short">
+                        <div v-if="user.wallet.user_id != user.id" class="form-group row plaintext">
                             <label for="manager" class="col-sm-4 col-form-label">Managed by</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="manager">
                                     <router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link>
                                 </span>
                             </div>
                         </div>
-                        <div class="form-group row">
+                        <div class="form-group row plaintext">
                             <label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">(Created at)</span></label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="userid">
                                     {{ user.id }} <span class="text-muted">({{ user.created_at }})</span>
                                 </span>
                             </div>
                         </div>
-                        <div class="form-group row">
+                        <div class="form-group row plaintext">
                             <label for="status" class="col-sm-4 col-form-label">Status</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="status">
                                     <span :class="$root.userStatusClass(user)">{{ $root.userStatusText(user) }}</span>
                                 </span>
                             </div>
                         </div>
-                        <div class="form-group row" v-if="user.first_name">
+                        <div class="form-group row plaintext" v-if="user.first_name">
                             <label for="first_name" class="col-sm-4 col-form-label">First name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
                             </div>
                         </div>
-                        <div class="form-group row" v-if="user.last_name">
+                        <div class="form-group row plaintext" v-if="user.last_name">
                             <label for="last_name" class="col-sm-4 col-form-label">Last name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
                             </div>
                         </div>
-                        <div class="form-group row" v-if="user.organization">
+                        <div class="form-group row plaintext" v-if="user.organization">
                             <label for="organization" class="col-sm-4 col-form-label">Organization</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="organization">{{ user.organization }}</span>
                             </div>
                         </div>
-                        <div class="form-group row" v-if="user.phone">
+                        <div class="form-group row plaintext" v-if="user.phone">
                             <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
                             </div>
                         </div>
-                        <div class="form-group row">
+                        <div class="form-group row plaintext">
                             <label for="external_email" class="col-sm-4 col-form-label">External email</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="external_email">
                                     <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
                                     <button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">Edit</button>
                                 </span>
                             </div>
                         </div>
-                        <div class="form-group row" v-if="user.billing_address">
+                        <div class="form-group row plaintext" v-if="user.billing_address">
                             <label for="billing_address" class="col-sm-4 col-form-label">Address</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span>
                             </div>
                         </div>
-                        <div class="form-group row">
+                        <div class="form-group row plaintext">
                             <label for="country" class="col-sm-4 col-form-label">Country</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="country">{{ user.country }}</span>
                             </div>
                         </div>
                     </form>
                     <div class="mt-2">
                         <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">Suspend</button>
                         <button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">Unsuspend</button>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true">
                     Finances
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-aliases" href="#user-aliases" role="tab" aria-controls="user-aliases" aria-selected="false">
                     Aliases ({{ user.aliases.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-subscriptions" href="#user-subscriptions" role="tab" aria-controls="user-subscriptions" aria-selected="false">
                     Subscriptions ({{ skus.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-domains" href="#user-domains" role="tab" aria-controls="user-domains" aria-selected="false">
                     Domains ({{ domains.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false">
                     Users ({{ users.length }})
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances">
                 <div class="card-body">
                     <h2 class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance) }}</strong></span></h2>
                     <div class="card-text">
-                        <form class="read-only">
+                        <form class="read-only short">
                             <div class="form-group row">
                                 <label class="col-sm-4 col-form-label">Discount</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="discount">
                                         <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
                                         <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button>
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group row" v-if="wallet.mandate && wallet.mandate.id">
                                 <label class="col-sm-4 col-form-label">Auto-payment</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="autopayment">
                                         Fill up by <b>{{ wallet.mandate.amount }} CHF</b>
                                         when under <b>{{ wallet.mandate.balance }} CHF</b>
                                         using {{ wallet.mandate.method }}<span v-if="wallet.mandate.isDisabled"> (disabled)</span>.
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group row" v-if="wallet.providerLink">
                                 <label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} ID</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" v-html="wallet.providerLink"></span>
                                 </div>
                             </div>
                         </form>
                         <div class="mt-2">
                             <button id="button-award" class="btn btn-success" type="button" @click="awardDialog">Add bonus</button>
                             <button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">Add penalty</button>
                         </div>
                     </div>
                     <h2 class="card-title mt-4">Transactions</h2>
                     <transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log>
                 </div>
             </div>
             <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Email address</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index">
                                     <td>{{ alias }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>This user has no email aliases.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Subscription</th>
                                     <th scope="col">Price</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(sku, sku_id) in skus" :id="'sku' + sku_id" :key="sku_id">
                                     <td>{{ sku.name }}</td>
                                     <td>{{ sku.price }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">This user has no subscriptions.</td>
                                 </tr>
                             </tfoot>
                         </table>
                         <small v-if="discount > 0" class="hint">
                             <hr class="m-0">
                             &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                         </small>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Name</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id">
+                                <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon>
                                         <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no domains in this account.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Primary Email</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="item in users" :id="'user' + item.id" :key="item.id">
+                                <tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="user" :class="$root.userStatusClass(item)" :title="$root.userStatusText(item)"></svg-icon>
                                         <router-link :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no users in this account.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="discount-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Account discount</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p class="form-group">
                             <select v-model="wallet.discount_id" class="custom-select">
                                 <option value="">- none -</option>
                                 <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
                             </select>
                         </p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="email-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">External email</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p class="form-group">
                             <input v-model="external_email" name="external_email" class="form-control">
                         </p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitEmail()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="oneoff-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ oneoff_negative ? 'Add a penalty to the wallet' : 'Add a bonus to the wallet' }}</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <form data-validation-prefix="oneoff_">
                             <div class="form-group">
-                                <label for="oneoff_amount">Amount</label>
+                                <label for="oneoff_amount" class="col-form-label">Amount</label>
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
                                     <span class="input-group-append">
                                         <span class="input-group-text">{{ oneoff_currency }}</span>
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="oneoff_description">Description</label>
+                                <label for="oneoff_description" class="col-form-label">Description</label>
                                 <input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
                             </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitOneOff()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import TransactionLog from '../Widgets/TransactionLog'
 
     export default {
         beforeRouteUpdate (to, from, next) {
             // An event called when the route that renders this component has changed,
             // but this component is reused in the new route.
             // Required to handle links from /user/XXX to /user/YYY
             next()
             this.$parent.routerReload()
         },
         components: {
             TransactionLog
         },
         data() {
             return {
                 oneoff_amount: '',
                 oneoff_currency: 'CHF',
                 oneoff_description: '',
                 oneoff_negative: false,
                 discount: 0,
                 discount_description: '',
                 discounts: [],
                 external_email: '',
                 wallet: {},
                 walletReload: false,
                 domains: [],
                 skus: [],
                 users: [],
                 user: {
                     aliases: [],
                     wallet: {},
                     skus: {},
                 }
             }
         },
         created() {
             const user_id = this.$route.params.user
 
             this.$root.startLoading()
 
             axios.get('/api/v4/users/' + user_id)
                 .then(response => {
                     this.$root.stopLoading()
 
                     this.user = response.data
 
                     const financesTab = '#user-finances'
                     const keys = ['first_name', 'last_name', 'external_email', 'billing_address', 'phone', 'organization']
                     const country = this.user.settings.country
 
                     if (country) {
                         this.user.country = window.config.countries[country][1]
                     }
 
                     keys.forEach(key => { this.user[key] = this.user.settings[key] })
 
                     this.discount = this.user.wallet.discount
                     this.discount_description = this.user.wallet.discount_description
 
                     // TODO: currencies, multi-wallets, accounts
                     // Get more info about the wallet (e.g. payment provider related)
                     this.$root.addLoader(financesTab)
                     axios.get('/api/v4/wallets/' + this.user.wallets[0].id)
                         .then(response => {
                             this.$root.removeLoader(financesTab)
                             this.wallet = response.data
                         })
                         .catch(error => {
                             this.$root.removeLoader(financesTab)
                         })
 
                     // Create subscriptions list
                     axios.get('/api/v4/skus')
                         .then(response => {
                             // "merge" SKUs with user entitlement-SKUs
                             response.data.forEach(sku => {
                                 if (sku.id in this.user.skus) {
                                     let count = this.user.skus[sku.id].count
                                     let item = {
                                         id: sku.id,
                                         name: sku.name,
                                         cost: sku.cost,
                                         units: count - sku.units_free,
                                         price: this.$root.priceLabel(sku.cost, count - sku.units_free, this.discount)
                                     }
 
                                     if (sku.range) {
                                         item.name += ' ' + count + ' ' + sku.range.unit
                                     }
 
                                     this.skus.push(item)
                                 }
                             })
                         })
 
                     // Fetch users
                     // TODO: Multiple wallets
                     axios.get('/api/v4/users?owner=' + user_id)
                         .then(response => {
                             this.users = response.data.list.filter(user => {
                                 return user.id != user_id;
                             })
                         })
 
                     // Fetch domains
                     axios.get('/api/v4/domains?owner=' + user_id)
                         .then(response => {
                             this.domains = response.data.list
                         })
                 })
                 .catch(this.$root.errorHandler)
         },
         mounted() {
             $(this.$el).find('ul.nav-tabs a').on('click', e => {
                 e.preventDefault()
                 $(e.target).tab('show')
             })
         },
         methods: {
             capitalize(str) {
                 return str.charAt(0).toUpperCase() + str.slice(1)
             },
             awardDialog() {
                 this.oneOffDialog(false)
             },
             discountEdit() {
                 $('#discount-dialog')
                     .on('shown.bs.modal', e => {
                         $(e.target).find('select').focus()
                         // Note: Vue v-model is strict, convert null to a string
                         this.wallet.discount_id = this.wallet_discount_id || ''
                     })
                     .modal()
 
                 if (!this.discounts.length) {
                     // Fetch discounts
                     axios.get('/api/v4/discounts')
                         .then(response => {
                             this.discounts = response.data.list
                         })
                 }
             },
             emailEdit() {
                 this.external_email = this.user.external_email
                 this.$root.clearFormValidation($('#email-dialog'))
 
                 $('#email-dialog')
                     .on('shown.bs.modal', e => {
                         $(e.target).find('input').focus()
                     })
                     .modal()
             },
             oneOffDialog(negative) {
                 this.oneoff_negative = negative
                 this.dialog = $('#oneoff-dialog').on('shown.bs.modal', event => {
                     this.$root.clearFormValidation(event.target)
                     $(event.target).find('#oneoff_amount').focus()
                 }).modal()
             },
             penalizeDialog() {
                 this.oneOffDialog(true)
             },
             reload() {
                 // this is to reload transaction log
                 this.walletReload = true
                 this.$nextTick(() => { this.walletReload = false })
             },
             submitDiscount() {
                 $('#discount-dialog').modal('hide')
 
                 axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id })
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, response.data)
 
                             // Update prices in Subscriptions tab
                             if (this.user.wallet.id == response.data.id) {
                                 this.discount = this.wallet.discount
                                 this.discount_description = this.wallet.discount_description
 
                                 this.skus.forEach(sku => {
                                     sku.price = this.$root.priceLabel(sku.cost, sku.units, this.discount)
                                 })
                             }
                         }
                     })
             },
             submitEmail() {
                 axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email })
                     .then(response => {
                         if (response.data.status == 'success') {
                             $('#email-dialog').modal('hide')
                             this.$toast.success(response.data.message)
                             this.user.external_email = this.external_email
                             this.external_email = null // required because of Vue
                         }
                     })
             },
             submitOneOff() {
                 let wallet_id = this.user.wallets[0].id
                 let post = {
                     amount: this.oneoff_amount,
                     description: this.oneoff_description
                 }
 
                 if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) {
                     post.amount *= -1
                 }
 
                 // TODO: We maybe should use system currency not wallet currency,
                 //       or have a selector so the operator does not have to calculate
                 //       exchange rates
 
                 this.$root.clearFormValidation(this.dialog)
 
                 axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.dialog.modal('hide')
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance})
                             this.oneoff_amount = ''
                             this.oneoff_description = ''
                             this.reload()
                         }
                     })
             },
             suspendUser() {
                 axios.post('/api/v4/users/' + this.user.id + '/suspend', {})
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: true })
                         }
                     })
             },
             unsuspendUser() {
                 axios.post('/api/v4/users/' + this.user.id + '/unsuspend', {})
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: false })
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Domain/List.vue b/src/resources/vue/Domain/List.vue
index 8c820780..876e8711 100644
--- a/src/resources/vue/Domain/List.vue
+++ b/src/resources/vue/Domain/List.vue
@@ -1,45 +1,45 @@
 <template>
     <div class="container">
         <div class="card" id="domain-list">
             <div class="card-body">
                 <div class="card-title">Domains</div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
                         <thead class="thead-light">
                             <tr>
                                 <th scope="col">Name</th>
                                 <th scope="col"></th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="domain in domains" :key="domain.id">
+                            <tr v-for="domain in domains" :key="domain.id" @click="$root.clickRecord">
                                 <td>
                                     <svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon>
                                     <router-link :to="{ path: 'domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                 </td>
                                 <td class="buttons"></td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 domains: []
             }
         },
         created() {
             axios.get('/api/v4/domains')
                 .then(response => {
                     this.domains = response.data
                 })
                 .catch(this.$root.errorHandler)
         }
     }
 </script>
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
index c30bf1dd..6831e4fd 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,366 +1,370 @@
 <template>
     <div class="container">
         <status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
 
         <div class="card" id="user-info">
             <div class="card-body">
                 <div class="card-title" v-if="user_id !== 'new'">User account</div>
                 <div class="card-title" v-if="user_id === 'new'">New user account</div>
                 <div class="card-text">
                     <form @submit.prevent="submit">
-                        <div v-if="user_id !== 'new'" class="form-group row">
+                        <div v-if="user_id !== 'new'" class="form-group row plaintext">
                             <label for="first_name" class="col-sm-4 col-form-label">Status</label>
                             <div class="col-sm-8">
                                 <span :class="$root.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(user) }}</span>
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="first_name" class="col-sm-4 col-form-label">First name</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="first_name" v-model="user.first_name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="last_name" class="col-sm-4 col-form-label">Last name</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="last_name" v-model="user.last_name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="organization" class="col-sm-4 col-form-label">Organization</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="organization" v-model="user.organization">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="email" class="col-sm-4 col-form-label">Email</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="aliases-input" class="col-sm-4 col-form-label">Email aliases</label>
                             <div class="col-sm-8">
                                 <list-input id="aliases" :list="user.aliases"></list-input>
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="password" class="col-sm-4 col-form-label">Password</label>
                             <div class="col-sm-8">
                                 <input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="password_confirmaton" class="col-sm-4 col-form-label">Confirm password</label>
                             <div class="col-sm-8">
                                 <input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'">
                             </div>
                         </div>
                         <div v-if="user_id === 'new'" id="user-packages" class="form-group row">
                             <label class="col-sm-4 col-form-label">Package</label>
                             <div class="col-sm-8">
                                 <table class="table table-sm form-list">
                                     <thead class="thead-light sr-only">
                                         <tr>
                                             <th scope="col"></th>
                                             <th scope="col">Package</th>
                                             <th scope="col">Price</th>
                                             <th scope="col"></th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id">
                                             <td class="selection">
-                                                <input type="checkbox" :value="pkg.id" @click="selectPackage" :checked="pkg.id == package_id">
+                                                <input type="checkbox" @click="selectPackage"
+                                                       :value="pkg.id"
+                                                       :checked="pkg.id == package_id"
+                                                       :id="'pkg-input-' + pkg.id"
+                                                >
                                             </td>
                                             <td class="name">
-                                                {{ pkg.name }}
+                                                <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label>
                                             </td>
                                             <td class="price text-nowrap">
                                                 {{ $root.priceLabel(pkg.cost, 1, discount) }}
                                             </td>
                                             <td class="buttons">
                                                 <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="pkg.description">
                                                     <svg-icon icon="info-circle"></svg-icon>
                                                     <span class="sr-only">More information</span>
                                                 </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                                 <small v-if="discount > 0" class="hint">
                                     <hr class="m-0">
                                     &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                                 </small>
                             </div>
                         </div>
                         <div v-if="user_id !== 'new'" id="user-skus" class="form-group row">
                             <label class="col-sm-4 col-form-label">Subscriptions</label>
                             <div class="col-sm-8">
                                 <table class="table table-sm form-list">
                                     <thead class="thead-light sr-only">
                                         <tr>
                                             <th scope="col"></th>
                                             <th scope="col">Subscription</th>
                                             <th scope="col">Price</th>
                                             <th scope="col"></th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id">
                                             <td class="selection">
                                                 <input type="checkbox" @input="onInputSku"
                                                        :value="sku.id"
                                                        :disabled="sku.readonly"
                                                        :checked="sku.enabled"
-                                                       :dusk="'sku-input-' + sku.title"
+                                                       :id="'sku-input-' + sku.title"
                                                 >
                                             </td>
                                             <td class="name">
-                                                <span class="name">{{ sku.name }}</span>
+                                                <label :for="'sku-input-' + sku.title">{{ sku.name }}</label>
                                                 <div v-if="sku.range" class="range-input">
                                                     <label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
                                                     <input
                                                         type="range" class="custom-range" @input="rangeUpdate"
                                                         :value="sku.value || sku.range.min"
                                                         :min="sku.range.min"
                                                         :max="sku.range.max"
                                                     >
                                                 </div>
                                             </td>
                                             <td class="price text-nowrap">
                                                 {{ $root.priceLabel(sku.cost, 1, discount) }}
                                             </td>
                                             <td class="buttons">
                                                 <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="sku.description">
                                                     <svg-icon icon="info-circle"></svg-icon>
                                                     <span class="sr-only">More information</span>
                                                 </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                                 <small v-if="discount > 0" class="hint">
                                     <hr class="m-0">
                                     &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                                 </small>
                             </div>
                         </div>
                         <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import ListInput from '../Widgets/ListInput'
     import StatusComponent from '../Widgets/Status'
 
     export default {
         components: {
             ListInput,
             StatusComponent
         },
         data() {
             return {
                 discount: 0,
                 discount_description: '',
                 user_id: null,
                 user: { aliases: [] },
                 packages: [],
                 package_id: null,
                 skus: [],
                 status: {}
             }
         },
         created() {
             this.user_id = this.$route.params.user
 
             let wallet = this.$store.state.authInfo.accounts[0]
 
             if (!wallet) {
                 wallet = this.$store.state.authInfo.wallets[0]
             }
 
             if (wallet && wallet.discount) {
                 this.discount = wallet.discount
                 this.discount_description = wallet.discount_description
             }
 
             if (this.user_id === 'new') {
                 // do nothing (for now)
                 axios.get('/api/v4/packages')
                     .then(response => {
                         this.packages = response.data.filter(pkg => !pkg.isDomain)
                         this.package_id = this.packages[0].id
                     })
                     .catch(this.$root.errorHandler)
             }
             else {
                 axios.get('/api/v4/users/' + this.user_id)
                     .then(response => {
                         this.user = response.data
                         this.user.first_name = response.data.settings.first_name
                         this.user.last_name = response.data.settings.last_name
                         this.user.organization = response.data.settings.organization
                         this.discount = this.user.wallet.discount
                         this.discount_description = this.user.wallet.discount_description
                         this.status = response.data.statusInfo
 
                         axios.get('/api/v4/skus')
                             .then(response => {
                                 // "merge" SKUs with user entitlement-SKUs
                                 this.skus = response.data
                                     .filter(sku => sku.type == 'user')
                                     .map(sku => {
                                         if (sku.id in this.user.skus) {
                                             sku.enabled = true
                                             sku.value = this.user.skus[sku.id].count
                                         } else if (!sku.readonly) {
                                             sku.enabled = false
                                         }
 
                                         return sku
                                     })
 
                                 // Update all range inputs (and price)
                                 this.$nextTick(() => {
                                     $('#user-skus input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) })
                                 })
                             })
                             .catch(this.$root.errorHandler)
                     })
                     .catch(this.$root.errorHandler)
             }
         },
         mounted() {
             $('#first_name').focus()
         },
         methods: {
             submit() {
                 this.$root.clearFormValidation($('#user-info form'))
 
                 let method = 'post'
                 let location = '/api/v4/users'
 
                 if (this.user_id !== 'new') {
                     method = 'put'
                     location += '/' + this.user_id
 
                     let skus = {}
                     $('#user-skus input[type=checkbox]:checked').each((idx, input) => {
                         let id = $(input).val()
                         let range = $(input).parents('tr').first().find('input[type=range]').val()
 
                         skus[id] = range || 1
                     })
                     this.user.skus = skus
                 } else {
                     this.user.package = this.package_id
                 }
 
                 axios[method](location, this.user)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                         }
 
                         // on new user redirect to users list
                         if (this.user_id === 'new') {
                             this.$router.push({ name: 'users' })
                         }
                     })
             },
             onInputSku(e) {
                 let input = e.target
                 let sku = this.findSku(input.value)
                 let required = []
 
                 // We use 'readonly', not 'disabled', because we might want to handle
                 // input events. For example to display an error when someone clicks
                 // the locked input
                 if (input.readOnly) {
                     input.checked = !input.checked
                     // TODO: Display an alert explaining why it's locked
                     return
                 }
 
                 // TODO: Following code might not work if we change definition of forbidden/required
                 //       or we just need more sophisticated SKU dependency rules
 
                 if (input.checked) {
                     // Check if a required SKU is selected, alert the user if not
                     (sku.required || []).forEach(title => {
                         this.skus.forEach(item => {
                             let checkbox
                             if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
                                 if (!checkbox.checked) {
                                     required.push(item.name)
                                 }
                             }
                         })
                     })
 
                     if (required.length) {
                         input.checked = false
                         return alert(sku.name + ' requires ' + required.join(', ') + '.')
                     }
                 } else {
                     // Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync
                     // TODO: Should we display an alert instead?
                     this.skus.forEach(item => {
                         if (item.required && item.required.indexOf(sku.handler) > -1) {
                             $('#s' + item.id).find('input[type=checkbox]').prop('checked', false)
                         }
                     })
                 }
 
                 // Uncheck+lock/unlock conflicting SKUs
                 (sku.forbidden || []).forEach(title => {
                     this.skus.forEach(item => {
                         let checkbox
                         if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
                             if (input.checked) {
                                 checkbox.checked = false
                                 checkbox.readOnly = true
                             } else {
                                 checkbox.readOnly = false
                             }
                         }
                     })
                 })
             },
             selectPackage(e) {
                 // Make sure there always is only one package selected
                 $('#user-packages input').prop('checked', false)
                 this.package_id = $(e.target).prop('checked', false).val()
             },
             rangeUpdate(e) {
                 let input = $(e.target || e)
                 let value = input.val()
                 let record = input.parents('tr').first()
                 let sku_id = record.find('input[type=checkbox]').val()
                 let sku = this.findSku(sku_id)
                 let cost = sku.cost
 
                 // Update the label
                 input.prev().text(value + ' ' + sku.range.unit)
 
                 // Update the price
                 record.find('.price').text(this.$root.priceLabel(cost, value - sku.units_free, this.discount))
             },
             findSku(id) {
                 for (let i = 0; i < this.skus.length; i++) {
                     if (this.skus[i].id == id) {
                         return this.skus[i];
                     }
                 }
             },
             statusUpdate(user) {
                 this.user = Object.assign({}, this.user, user)
             }
         }
     }
 </script>
diff --git a/src/resources/vue/User/List.vue b/src/resources/vue/User/List.vue
index 16968c84..02dc12bf 100644
--- a/src/resources/vue/User/List.vue
+++ b/src/resources/vue/User/List.vue
@@ -1,123 +1,123 @@
 <template>
     <div class="container">
         <div class="card" id="user-list">
             <div class="card-body">
                 <div class="card-title">
                     User Accounts
                     <router-link class="btn btn-primary float-right create-user" :to="{ path: 'user/new' }" tag="button">
                         <svg-icon icon="user"></svg-icon> Create user
                     </router-link>
                 </div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
                         <thead class="thead-light">
                             <tr>
                                 <th scope="col">Primary Email</th>
                                 <th scope="col"></th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="user in users" :id="'user' + user.id" :key="user.id">
+                            <tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord">
                                 <td>
                                     <svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon>
                                     <router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link>
                                 </td>
                                 <td class="buttons">
                                     <button v-if="$root.isController(user.wallet_id)"
                                             title="Delete"
                                             class="btn btn-link text-danger button-delete p-0"
                                             @click="deleteUser(user.id)"
                                     >
                                         <svg-icon icon="trash-alt"></svg-icon><span class="sr-only">Delete</span>
                                     </button>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
 
         <div id="delete-warning" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title"></h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p>Do you really want to delete this user permanently?
                             This will delete all account data and withdraw the permission to access the email account.
                             Please note that this action cannot be undone.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-danger modal-action" @click="deleteUser()">
                             <svg-icon icon="trash-alt"></svg-icon> Delete
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 users: [],
                 current_user: null
             }
         },
         created() {
             axios.get('/api/v4/users')
                 .then(response => {
                     this.users = response.data
                 })
                 .catch(this.$root.errorHandler)
         },
         methods: {
             deleteUser(id) {
                 let dialog = $('#delete-warning').modal('hide')
 
                 // Delete the user from the confirm dialog
                 if (!id && this.current_user) {
                     id = this.current_user.id
                     axios.delete('/api/v4/users/' + id)
                         .then(response => {
                             if (response.data.status == 'success') {
                                 this.$toast.success(response.data.message)
                                 $('#user' + id).remove()
                             }
                         })
 
                     return
                 }
 
                 // Deleting self, redirect to /profile/delete page
                 if (id == this.$store.state.authInfo.id) {
                     this.$router.push({ name: 'profile-delete' })
                     return
                 }
 
                 // Display the warning
                 if (this.current_user = this.getUser(id)) {
                     dialog.find('.modal-title').text('Delete ' + this.current_user.email)
                     dialog.on('shown.bs.modal', () => {
                         dialog.find('button.modal-cancel').focus()
                     }).modal()
                 }
             },
             getUser(id) {
                 for (let i = 0; i < this.users.length; i++) {
                     if (this.users[i].id == id) {
                         return this.users[i]
                     }
                 }
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Widgets/Status.vue b/src/resources/vue/Widgets/Status.vue
index ec3ed2bd..2549569f 100644
--- a/src/resources/vue/Widgets/Status.vue
+++ b/src/resources/vue/Widgets/Status.vue
@@ -1,177 +1,177 @@
 <template>
     <div v-if="!state.isReady" id="status-box" :class="'p-4 mb-3 rounded process-' + className">
         <div v-if="state.step != 'domain-confirmed'" class="d-flex align-items-start">
             <p id="status-body" class="flex-grow-1">
                 <span v-if="scope == 'dashboard'">We are preparing your account.</span>
                 <span v-else-if="scope == 'domain'">We are preparing the domain.</span>
                 <span v-else>We are preparing the user account.</span>
                 <br>
                 Some features may be missing or readonly at the moment.<br>
                 <span id="refresh-text" v-if="refresh">The process never ends? Press the "Refresh" button, please.</span>
             </p>
             <button v-if="refresh" id="status-refresh" href="#" class="btn btn-secondary" @click="statusRefresh">
                 <svg-icon icon="sync-alt"></svg-icon> Refresh
             </button>
         </div>
         <div v-else class="d-flex align-items-start">
             <p id="status-body" class="flex-grow-1">
                 <span v-if="scope == 'dashboard'">Your account is almost ready.</span>
                 <span v-else-if="scope == 'domain'">The domain is almost ready.</span>
                 <span v-else>The user account is almost ready.</span>
                 <br>
                 Verify your domain to finish the setup process.
             </p>
             <div v-if="scope == 'domain'">
-                <button id="status-verify" class="btn btn-secondary" @click="confirmDomain">
+                <button id="status-verify" class="btn btn-secondary text-nowrap" @click="confirmDomain">
                     <svg-icon icon="sync-alt"></svg-icon> Verify
                 </button>
             </div>
             <div v-else-if="state.link && scope != 'domain'">
                 <router-link id="status-link" class="btn btn-secondary" :to="{ path: state.link }">Verify domain</router-link>
             </div>
         </div>
 
         <div class="status-progress text-center">
             <div class="progress">
                 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
             <span class="progress-label">{{ state.title || 'Initializing...' }}</span>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
             status: { type: Object, default: () => {} }
         },
         data() {
             return {
                 className: 'pending',
                 refresh: false,
                 delay: 5000,
                 scope: 'user',
                 state: { isReady: true }
             }
         },
         watch: {
             // We use property watcher because parent component
             // might set the property with a delay and we need to parse it
             status: function (val, oldVal) {
                 this.parseStatusInfo(val)
             }
         },
         destroyed() {
             clearTimeout(window.infoRequest)
         },
         mounted() {
             this.scope = this.$route.name
         },
         methods: {
             // Displays account status information
             parseStatusInfo(info) {
                 if (info) {
                     if (!info.isReady) {
                         info.process.forEach((step, idx) => {
                             if (!step.state && !('percent' in info)) {
                                 info.title = step.title
                                 info.step = step.label
                                 info.percent = Math.floor(idx / info.process.length * 100);
                                 info.link = step.link
                             }
                         })
                     }
 
                     this.state = info || {}
 
                     this.$nextTick(function() {
                         $(this.$el).find('.progress-bar')
                             .css('width', info.percent + '%')
                             .attr('aria-valuenow', info.percent)
                     })
 
                     // Unhide the Refresh button, the process is in failure state
                     this.refresh = info.processState == 'failed'
 
                     if (this.refresh || info.step == 'domain-confirmed') {
                         this.className = 'failed'
                     }
                 }
 
                 // Update status process info every 10 seconds
                 // FIXME: This probably should have some limit, or the interval
                 //        should grow (well, until it could be done with websocket notifications)
                 clearTimeout(window.infoRequest)
                 if (!this.refresh && (!info || !info.isReady)) {
                     window.infoRequest = setTimeout(() => {
                         delete window.infoRequest
                         // Stop updates after user logged out
                         if (!this.$store.state.isLoggedIn) {
                             return;
                         }
 
                         axios.get(this.getUrl())
                             .then(response => {
                                 this.parseStatusInfo(response.data)
                                 this.emitEvent(response.data)
                             })
                             .catch(error => {
                                 this.parseStatusInfo(info)
                             })
                     }, this.delay);
 
                     this.delay += 1000;
                 }
             },
             statusRefresh() {
                 clearTimeout(window.infoRequest)
 
                 axios.get(this.getUrl() + '?refresh=1')
                     .then(response => {
                         this.$toast[response.data.status](response.data.message)
                         this.parseStatusInfo(response.data)
                         this.emitEvent(response.data)
                     })
                     .catch(error => {
                         this.parseStatusInfo(this.state)
                     })
             },
             confirmDomain() {
                 axios.get('/api/v4/domains/' + this.$route.params.domain + '/confirm')
                     .then(response => {
                         if (response.data.message) {
                             this.$toast[response.data.status](response.data.message)
                         }
 
                         if (response.data.status == 'success') {
                             this.parseStatusInfo(response.data.statusInfo)
                             response.data.isConfirmed = true
                             this.emitEvent(response.data)
                         }
                     })
             },
             emitEvent(data) {
                 // Remove useless data and emit the event (to parent components)
                 delete data.status
                 delete data.message
                 this.$emit('status-update', data)
             },
             getUrl() {
                 let url
 
                 switch (this.scope) {
                     case 'dashboard':
                         url = '/api/v4/users/' + this.$store.state.authInfo.id + '/status'
                         break
                     case 'domain':
                         url = '/api/v4/domains/' + this.$route.params.domain + '/status'
                         break
                     default:
                         url = '/api/v4/users/' + this.$route.params.user + '/status'
                 }
 
                 return url
             }
         }
     }
 </script>
diff --git a/src/tests/Browser/Admin/LogonTest.php b/src/tests/Browser/Admin/LogonTest.php
index b221169d..b258c23b 100644
--- a/src/tests/Browser/Admin/LogonTest.php
+++ b/src/tests/Browser/Admin/LogonTest.php
@@ -1,145 +1,145 @@
 <?php
 
 namespace Tests\Browser\Admin;
 
 use Tests\Browser;
 use Tests\Browser\Components\Menu;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\TestCaseDusk;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 
 class LogonTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         self::useAdminUrl();
     }
 
     /**
      * Test menu on logon page
      */
     public function testLogonMenu(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->with(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
                 })
                 ->assertMissing('@second-factor-input')
                 ->assertMissing('@forgot-password');
         });
     }
 
     /**
      * Test redirect to /login if user is unauthenticated
      */
     public function testLogonRedirect(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('/dashboard');
 
             // Checks if we're really on the login page
             $browser->waitForLocation('/login')
                 ->on(new Home());
         });
     }
 
     /**
      * Logon with wrong password/user test
      */
     public function testLogonWrongCredentials(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('jeroen@jeroen.jeroen', 'wrong')
                 // Error message
                 ->assertToast(Toast::TYPE_ERROR, 'Invalid username or password.')
                 // Checks if we're still on the logon page
                 ->on(new Home());
         });
     }
 
     /**
      * Successful logon test
      */
     public function testLogonSuccessful(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('jeroen@jeroen.jeroen', 'jeroen', true);
 
             // Checks if we're really on Dashboard page
             $browser->on(new Dashboard())
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['support', 'contact', 'webmail', 'logout']);
                 })
                 ->assertUser('jeroen@jeroen.jeroen');
 
             // Test that visiting '/' with logged in user does not open logon form
             // but "redirects" to the dashboard
             $browser->visit('/')->on(new Dashboard());
         });
     }
 
     /**
      * Logout test
      *
      * @depends testLogonSuccessful
      */
     public function testLogout(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->on(new Dashboard());
 
             // Click the Logout button
             $browser->within(new Menu(), function ($browser) {
-                $browser->click('.link-logout');
+                $browser->clickMenuItem('logout');
             });
 
             // We expect the logon page
             $browser->waitForLocation('/login')
                 ->on(new Home());
 
             // with default menu
             $browser->within(new Menu(), function ($browser) {
                 $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
             });
 
             // Success toast message
             $browser->assertToast(Toast::TYPE_SUCCESS, 'Successfully logged out');
         });
     }
 
     /**
      * Logout by URL test
      */
     public function testLogoutByURL(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('jeroen@jeroen.jeroen', 'jeroen', true);
 
             // Checks if we're really on Dashboard page
             $browser->on(new Dashboard());
 
             // Use /logout url, and expect the logon page
             $browser->visit('/logout')
                 ->waitForLocation('/login')
                 ->on(new Home());
 
             // with default menu
             $browser->within(new Menu(), function ($browser) {
                 $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
             });
 
             // Success toast message
             $browser->assertToast(Toast::TYPE_SUCCESS, 'Successfully logged out');
         });
     }
 }
diff --git a/src/tests/Browser/Components/Menu.php b/src/tests/Browser/Components/Menu.php
index e19139a4..544e4c38 100644
--- a/src/tests/Browser/Components/Menu.php
+++ b/src/tests/Browser/Components/Menu.php
@@ -1,94 +1,113 @@
 <?php
 
 namespace Tests\Browser\Components;
 
 use Laravel\Dusk\Component as BaseComponent;
 use PHPUnit\Framework\Assert as PHPUnit;
 
 class Menu extends BaseComponent
 {
     protected $mode;
 
     /**
      * Object constructor
      *
      * @param string $mode Menu mode ('header' or 'footer')
      */
     public function __construct($mode = 'header')
     {
         $this->mode = $mode;
     }
 
     /**
      * Get the root selector for the component.
      *
      * @return string
      */
     public function selector()
     {
         return '#' . $this->mode . '-menu';
     }
 
     /**
      * Assert that the browser page contains the component.
      *
      * @param \Laravel\Dusk\Browser $browser
      *
      * @return void
      */
     public function assert($browser)
     {
         $browser->assertVisible($this->selector());
     }
 
     /**
      * Assert that menu contains only specified menu items.
      *
      * @param \Laravel\Dusk\Browser $browser
      * @param array                 $items   List of menu items
+     * @param string                $active  Expected active item
      *
      * @return void
      */
-    public function assertMenuItems($browser, array $items)
+    public function assertMenuItems($browser, array $items, string $active = null)
     {
-        // TODO: On mobile the links will not be visible
+        // On mobile the links are not visible, show them first (wait for transition)
+        if ($browser->isPhone()) {
+            $browser->click('@toggler')->waitFor('.navbar-collapse.show');
+        }
 
         foreach ($items as $item) {
             $browser->assertVisible('.link-' . $item);
         }
 
         // Check number of items, to make sure there's no extra items
         PHPUnit::assertCount(count($items), $browser->elements('li'));
+
+        if ($active) {
+            $browser->assertPresent(".link-{$active}.active");
+        }
+
+        if ($browser->isPhone()) {
+            $browser->click('@toggler')->waitUntilMissing('.navbar-collapse.show');
+        }
     }
 
     /**
-     * Assert that specified menu item is active
+     * Click menu link.
      *
-     * @param \Laravel\Dusk\Browser $browser
-     * @param string                $item    Menu item name
+     * @param \Laravel\Dusk\Browser $browser The browser object
+     * @param string                $name    Menu item name
      *
      * @return void
      */
-    public function assertActiveItem($browser, string $item)
+    public function clickMenuItem($browser, string $name)
     {
-        // TODO: On mobile the links will not be visible
+        // On mobile the links are not visible, show them first (wait for transition)
+        if ($browser->isPhone()) {
+            $browser->click('@toggler')->waitFor('.navbar-collapse.show');
+        }
 
-        $browser->assertVisible(".link-{$item}.active");
+        $browser->click('.link-' . $name);
+
+        if ($browser->isPhone()) {
+            $browser->waitUntilMissing('.navbar-collapse.show');
+        }
     }
 
     /**
      * Get the element shortcuts for the component.
      *
      * @return array
      */
     public function elements()
     {
         $selector = $this->selector();
 
         return [
             '@list' => ".navbar-nav",
             '@brand' =>  ".navbar-brand",
             '@toggler' => ".navbar-toggler",
         ];
     }
 }
diff --git a/src/tests/Browser/LogonTest.php b/src/tests/Browser/LogonTest.php
index 89fa7d0a..1d4eb6df 100644
--- a/src/tests/Browser/LogonTest.php
+++ b/src/tests/Browser/LogonTest.php
@@ -1,196 +1,207 @@
 <?php
 
 namespace Tests\Browser;
 
 use Tests\Browser;
 use Tests\Browser\Components\Menu;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\TestCaseDusk;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 
 class LogonTest extends TestCaseDusk
 {
 
     /**
      * Test menu on logon page
      */
     public function testLogonMenu(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
-                })
-                ->within(new Menu('footer'), function ($browser) {
+                });
+
+            if ($browser->isDesktop()) {
+                $browser->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'tos', 'webmail']);
                 });
+            } else {
+                $browser->assertMissing('#footer-menu .navbar-nav');
+            }
         });
     }
 
     /**
      * Test redirect to /login if user is unauthenticated
      */
     public function testLogonRedirect(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('/dashboard');
 
             // Checks if we're really on the login page
             $browser->waitForLocation('/login')
                 ->on(new Home());
         });
     }
 
     /**
      * Logon with wrong password/user test
      */
     public function testLogonWrongCredentials(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'wrong');
 
             // Error message
             $browser->assertToast(Toast::TYPE_ERROR, 'Invalid username or password.');
 
             // Checks if we're still on the logon page
             $browser->on(new Home());
         });
     }
 
     /**
      * Successful logon test
      */
     public function testLogonSuccessful(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true);
 
             // Checks if we're really on Dashboard page
             $browser->on(new Dashboard())
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['support', 'contact', 'webmail', 'logout']);
-                })
-                ->within(new Menu('footer'), function ($browser) {
+                });
+
+            if ($browser->isDesktop()) {
+                $browser->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['support', 'contact', 'webmail', 'logout']);
-                })
-                ->assertUser('john@kolab.org');
+                });
+            } else {
+                $browser->assertMissing('#footer-menu .navbar-nav');
+            }
+
+            $browser->assertUser('john@kolab.org');
 
             // Assert no "Account status" for this account
             $browser->assertMissing('@status');
 
             // Goto /domains and assert that the link on logo element
             // leads to the dashboard
             $browser->visit('/domains')
                 ->waitForText('Domains')
                 ->click('a.navbar-brand')
                 ->on(new Dashboard());
 
             // Test that visiting '/' with logged in user does not open logon form
             // but "redirects" to the dashboard
             $browser->visit('/')->on(new Dashboard());
         });
     }
 
     /**
      * Logout test
      *
      * @depends testLogonSuccessful
      */
     public function testLogout(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->on(new Dashboard());
 
             // Click the Logout button
             $browser->within(new Menu(), function ($browser) {
-                $browser->click('.link-logout');
+                $browser->clickMenuItem('logout');
             });
 
             // We expect the logon page
             $browser->waitForLocation('/login')
                 ->on(new Home());
 
             // with default menu
             $browser->within(new Menu(), function ($browser) {
                 $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
             });
 
             // Success toast message
             $browser->assertToast(Toast::TYPE_SUCCESS, 'Successfully logged out');
         });
     }
 
     /**
      * Logout by URL test
      */
     public function testLogoutByURL(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true);
 
             // Checks if we're really on Dashboard page
             $browser->on(new Dashboard());
 
             // Use /logout url, and expect the logon page
             $browser->visit('/logout')
                 ->waitForLocation('/login')
                 ->on(new Home());
 
             // with default menu
             $browser->within(new Menu(), function ($browser) {
                 $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']);
             });
 
             // Success toast message
             $browser->assertToast(Toast::TYPE_SUCCESS, 'Successfully logged out');
         });
     }
 
     /**
      * Test 2-Factor Authentication
      *
      * @depends testLogoutByURL
      */
     public function test2FA(): void
     {
         $this->browse(function (Browser $browser) {
             // Test missing 2fa code
             $browser->on(new Home())
                 ->type('@email-input', 'ned@kolab.org')
                 ->type('@password-input', 'simple123')
                 ->press('form button')
                 ->waitFor('@second-factor-input.is-invalid + .invalid-feedback')
                 ->assertSeeIn(
                     '@second-factor-input.is-invalid + .invalid-feedback',
                     'Second factor code is required.'
                 )
                 ->assertFocused('@second-factor-input')
                 ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
 
             // Test invalid code
             $browser->type('@second-factor-input', '123456')
                 ->press('form button')
                 ->waitUntilMissing('@second-factor-input.is-invalid')
                 ->waitFor('@second-factor-input.is-invalid + .invalid-feedback')
                 ->assertSeeIn(
                     '@second-factor-input.is-invalid + .invalid-feedback',
                     'Second factor code is invalid.'
                 )
                 ->assertFocused('@second-factor-input')
                 ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
 
             $code = \App\Auth\SecondFactor::code('ned@kolab.org');
 
             // Test valid (TOTP) code
             $browser->type('@second-factor-input', $code)
                 ->press('form button')
                 ->waitUntilMissing('@second-factor-input.is-invalid')
                 ->waitForLocation('/dashboard')->on(new Dashboard());
         });
     }
 }
diff --git a/src/tests/Browser/SignupTest.php b/src/tests/Browser/SignupTest.php
index 005fe6c2..0a279817 100644
--- a/src/tests/Browser/SignupTest.php
+++ b/src/tests/Browser/SignupTest.php
@@ -1,533 +1,536 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Discount;
 use App\Domain;
 use App\SignupCode;
 use App\User;
 use Tests\Browser;
 use Tests\Browser\Components\Menu;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Signup;
 use Tests\TestCaseDusk;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 
 class SignupTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('signuptestdusk@' . \config('app.domain'));
         $this->deleteTestUser('admin@user-domain-signup.com');
         $this->deleteTestDomain('user-domain-signup.com');
     }
 
     public function tearDown(): void
     {
         $this->deleteTestUser('signuptestdusk@' . \config('app.domain'));
         $this->deleteTestUser('admin@user-domain-signup.com');
         $this->deleteTestDomain('user-domain-signup.com');
 
         parent::tearDown();
     }
 
     /**
      * Test signup code verification with a link
      */
     public function testSignupCodeByLink(): void
     {
         // Test invalid code (invalid format)
         $this->browse(function (Browser $browser) {
             // Register Signup page element selectors we'll be using
             $browser->onWithoutAssert(new Signup());
 
             // TODO: Test what happens if user is logged in
 
             $browser->visit('/signup/invalid-code');
 
             // TODO: According to https://github.com/vuejs/vue-router/issues/977
             // it is not yet easily possible to display error page component (route)
             // without changing the URL
             // TODO: Instead of css selector we should probably define page/component
             // and use it instead
             $browser->waitFor('#error-page');
         });
 
         // Test invalid code (valid format)
         $this->browse(function (Browser $browser) {
             $browser->visit('/signup/XXXXX-code');
 
             // FIXME: User will not be able to continue anyway, so we should
             //        either display 1st step or 404 error page
             $browser->waitFor('@step1')
                 ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
         });
 
         // Test valid code
         $this->browse(function (Browser $browser) {
             $code = SignupCode::create([
                     'data' => [
                         'email' => 'User@example.org',
                         'first_name' => 'User',
                         'last_name' => 'Name',
                         'plan' => 'individual',
                         'voucher' => '',
                     ]
             ]);
 
             $browser->visit('/signup/' . $code->short_code . '-' . $code->code)
                 ->waitFor('@step3')
                 ->assertMissing('@step1')
                 ->assertMissing('@step2');
 
             // FIXME: Find a nice way to read javascript data without using hidden inputs
             $this->assertSame($code->code, $browser->value('@step2 #signup_code'));
 
             // TODO: Test if the signup process can be completed
         });
     }
 
     /**
      * Test signup "welcome" page
      */
     public function testSignupStep0(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Signup());
 
             $browser->assertVisible('@step0')
                 ->assertMissing('@step1')
                 ->assertMissing('@step2')
                 ->assertMissing('@step3');
 
             $browser->within(new Menu(), function ($browser) {
-                $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
-                $browser->assertActiveItem('signup');
+                $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login'], 'signup');
             });
 
             $browser->waitFor('@step0 .plan-selector > .plan-box');
 
             // Assert first plan box and press the button
             $browser->with('@step0 .plan-selector > .plan-individual', function ($step) {
                 $step->assertVisible('button')
                     ->assertSeeIn('button', 'Individual Account')
                     ->assertVisible('.plan-description')
                     ->click('button');
             });
 
             $browser->waitForLocation('/signup/individual')
                 ->assertVisible('@step1')
                 ->assertMissing('@step0')
                 ->assertMissing('@step2')
                 ->assertMissing('@step3')
                 ->assertFocused('@step1 #signup_first_name');
 
             // Click Back button
             $browser->click('@step1 [type=button]')
                 ->waitForLocation('/signup')
                     ->assertVisible('@step0')
                     ->assertMissing('@step1')
                     ->assertMissing('@step2')
                     ->assertMissing('@step3');
 
             // Choose the group account plan
             $browser->click('@step0 .plan-selector > .plan-group button')
                 ->waitForLocation('/signup/group')
                 ->assertVisible('@step1')
                 ->assertMissing('@step0')
                 ->assertMissing('@step2')
                 ->assertMissing('@step3')
                 ->assertFocused('@step1 #signup_first_name');
 
             // TODO: Test if 'plan' variable is set properly in vue component
         });
     }
 
     /**
      * Test 1st step of the signup process
      */
     public function testSignupStep1(): void
     {
         $this->browse(function (Browser $browser) {
-            $browser->visit('/signup/individual')->onWithoutAssert(new Signup());
-
-            $browser->assertVisible('@step1');
-
-            $browser->within(new Menu(), function ($browser) {
-                $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
-                $browser->assertActiveItem('signup');
-            });
+            $browser->visit('/signup/individual')
+                ->onWithoutAssert(new Signup());
 
             // Here we expect two text inputs and Back and Continue buttons
             $browser->with('@step1', function ($step) {
                 $step->assertVisible('#signup_last_name')
                     ->assertVisible('#signup_first_name')
                     ->assertFocused('#signup_first_name')
                     ->assertVisible('#signup_email')
                     ->assertVisible('[type=button]')
                     ->assertVisible('[type=submit]');
             });
 
             // Submit empty form
             // Email is required, so after pressing Submit
             // we expect focus to be moved to the email input
             $browser->with('@step1', function ($step) {
                 $step->click('[type=submit]');
                 $step->assertFocused('#signup_email');
             });
 
+            $browser->within(new Menu(), function ($browser) {
+                $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login'], 'signup');
+            });
+
             // Submit invalid email, and first_name
             // We expect both inputs to have is-invalid class added, with .invalid-feedback element
             $browser->with('@step1', function ($step) use ($browser) {
                 $step->type('#signup_first_name', str_repeat('a', 250))
                     ->type('#signup_email', '@test')
                     ->click('[type=submit]')
                     ->waitFor('#signup_email.is-invalid')
                     ->assertVisible('#signup_first_name.is-invalid')
                     ->assertVisible('#signup_email + .invalid-feedback')
                     ->assertVisible('#signup_last_name + .invalid-feedback')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit valid data
             // We expect error state on email input to be removed, and Step 2 form visible
             $browser->with('@step1', function ($step) {
                 $step->type('#signup_first_name', 'Test')
                     ->type('#signup_last_name', 'User')
                     ->type('#signup_email', 'BrowserSignupTestUser1@kolab.org')
                     ->click('[type=submit]')
                     ->assertMissing('#signup_email.is-invalid')
                     ->assertMissing('#signup_email + .invalid-feedback');
             });
 
             $browser->waitUntilMissing('@step2 #signup_code[value=""]');
             $browser->waitFor('@step2');
             $browser->assertMissing('@step1');
         });
     }
 
     /**
      * Test 2nd Step of the signup process
      *
      * @depends testSignupStep1
      */
     public function testSignupStep2(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->assertVisible('@step2')
                 ->assertMissing('@step0')
                 ->assertMissing('@step1')
                 ->assertMissing('@step3');
 
             // Here we expect one text input, Back and Continue buttons
             $browser->with('@step2', function ($step) {
                 $step->assertVisible('#signup_short_code')
                     ->assertFocused('#signup_short_code')
                     ->assertVisible('[type=button]')
                     ->assertVisible('[type=submit]');
             });
 
             // Test Back button functionality
             $browser->click('@step2 [type=button]')
                 ->waitFor('@step1')
                 ->assertFocused('@step1 #signup_first_name')
                 ->assertMissing('@step2');
 
             // Submit valid Step 1 data (again)
             $browser->with('@step1', function ($step) {
                 $step->type('#signup_first_name', 'User')
                     ->type('#signup_last_name', 'User')
                     ->type('#signup_email', 'BrowserSignupTestUser1@kolab.org')
                     ->click('[type=submit]');
             });
 
             $browser->waitFor('@step2');
             $browser->assertMissing('@step1');
 
             // Submit invalid code
             // We expect code input to have is-invalid class added, with .invalid-feedback element
             $browser->with('@step2', function ($step) use ($browser) {
                 $step->type('#signup_short_code', 'XXXXX');
                 $step->click('[type=submit]');
 
                 $step->waitFor('#signup_short_code.is-invalid')
                     ->assertVisible('#signup_short_code + .invalid-feedback')
                     ->assertFocused('#signup_short_code')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit valid code
             // We expect error state on code input to be removed, and Step 3 form visible
             $browser->with('@step2', function ($step) {
                 // Get the code and short_code from database
                 // FIXME: Find a nice way to read javascript data without using hidden inputs
                 $code = $step->value('#signup_code');
 
                 $this->assertNotEmpty($code);
 
                 $code = SignupCode::find($code);
 
                 $step->type('#signup_short_code', $code->short_code);
                 $step->click('[type=submit]');
 
                 $step->assertMissing('#signup_short_code.is-invalid');
                 $step->assertMissing('#signup_short_code + .invalid-feedback');
             });
 
             $browser->waitFor('@step3');
             $browser->assertMissing('@step2');
         });
     }
 
     /**
      * Test 3rd Step of the signup process
      *
      * @depends testSignupStep2
      */
     public function testSignupStep3(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->assertVisible('@step3');
 
             // Here we expect 3 text inputs, Back and Continue buttons
             $browser->with('@step3', function ($step) {
                 $step->assertVisible('#signup_login');
                 $step->assertVisible('#signup_password');
                 $step->assertVisible('#signup_confirm');
                 $step->assertVisible('select#signup_domain');
                 $step->assertVisible('[type=button]');
                 $step->assertVisible('[type=submit]');
                 $step->assertFocused('#signup_login');
                 $step->assertValue('select#signup_domain', \config('app.domain'));
                 $step->assertValue('#signup_login', '');
                 $step->assertValue('#signup_password', '');
                 $step->assertValue('#signup_confirm', '');
 
                 // TODO: Test domain selector
             });
 
             // Test Back button
             $browser->click('@step3 [type=button]');
             $browser->waitFor('@step2');
             $browser->assertFocused('@step2 #signup_short_code');
             $browser->assertMissing('@step3');
 
             // TODO: Test form reset when going back
 
             // Submit valid code again
             $browser->with('@step2', function ($step) {
                 $code = $step->value('#signup_code');
 
                 $this->assertNotEmpty($code);
 
                 $code = SignupCode::find($code);
 
                 $step->type('#signup_short_code', $code->short_code);
                 $step->click('[type=submit]');
             });
 
             $browser->waitFor('@step3');
 
             // Submit invalid data
             $browser->with('@step3', function ($step) use ($browser) {
                 $step->assertFocused('#signup_login')
                     ->type('#signup_login', '*')
                     ->type('#signup_password', '12345678')
                     ->type('#signup_confirm', '123456789')
                     ->click('[type=submit]')
                     ->waitFor('#signup_login.is-invalid')
                     ->assertVisible('#signup_domain + .invalid-feedback')
                     ->assertVisible('#signup_password.is-invalid')
                     ->assertVisible('#signup_password + .invalid-feedback')
                     ->assertFocused('#signup_login')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit invalid data (valid login, invalid password)
             $browser->with('@step3', function ($step) use ($browser) {
                 $step->type('#signup_login', 'SignupTestDusk')
                     ->click('[type=submit]')
                     ->waitFor('#signup_password.is-invalid')
                     ->assertVisible('#signup_password + .invalid-feedback')
                     ->assertMissing('#signup_login.is-invalid')
                     ->assertMissing('#signup_domain + .invalid-feedback')
                     ->assertFocused('#signup_password')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit valid data
             $browser->with('@step3', function ($step) {
                 $step->type('#signup_confirm', '12345678');
 
                 $step->click('[type=submit]');
             });
 
             // At this point we should be auto-logged-in to dashboard
             $browser->waitUntilMissing('@step3')
                 ->waitUntilMissing('.app-loader')
                 ->on(new Dashboard())
                 ->assertUser('signuptestdusk@' . \config('app.domain'));
 
             // Logout the user
-            $browser->click('a.link-logout');
+            $browser->within(new Menu(), function ($browser) {
+                $browser->clickMenuItem('logout');
+            });
         });
     }
 
     /**
      * Test signup for a group account
      */
     public function testSignupGroup(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new Signup());
 
             // Choose the group account plan
             $browser->waitFor('@step0 .plan-group button')
                 ->click('@step0 .plan-group button');
 
             // Submit valid data
             // We expect error state on email input to be removed, and Step 2 form visible
             $browser->whenAvailable('@step1', function ($step) {
                 $step->type('#signup_first_name', 'Test')
                     ->type('#signup_last_name', 'User')
                     ->type('#signup_email', 'BrowserSignupTestUser1@kolab.org')
                     ->click('[type=submit]');
             });
 
             // Submit valid code
             $browser->whenAvailable('@step2', function ($step) {
                 // Get the code and short_code from database
                 // FIXME: Find a nice way to read javascript data without using hidden inputs
                 $code = $step->value('#signup_code');
                 $code = SignupCode::find($code);
 
                 $step->type('#signup_short_code', $code->short_code)
                     ->click('[type=submit]');
             });
 
             // Here we expect 4 text inputs, Back and Continue buttons
             $browser->whenAvailable('@step3', function ($step) {
                 $step->assertVisible('#signup_login')
                     ->assertVisible('#signup_password')
                     ->assertVisible('#signup_confirm')
                     ->assertVisible('input#signup_domain')
                     ->assertVisible('[type=button]')
                     ->assertVisible('[type=submit]')
                     ->assertFocused('#signup_login')
                     ->assertValue('input#signup_domain', '')
                     ->assertValue('#signup_login', '')
                     ->assertValue('#signup_password', '')
                     ->assertValue('#signup_confirm', '');
             });
 
             // Submit invalid login and password data
             $browser->with('@step3', function ($step) use ($browser) {
                 $step->assertFocused('#signup_login')
                     ->type('#signup_login', '*')
                     ->type('#signup_domain', 'test.com')
                     ->type('#signup_password', '12345678')
                     ->type('#signup_confirm', '123456789')
                     ->click('[type=submit]')
                     ->waitFor('#signup_login.is-invalid')
                     ->assertVisible('#signup_domain + .invalid-feedback')
                     ->assertVisible('#signup_password.is-invalid')
                     ->assertVisible('#signup_password + .invalid-feedback')
                     ->assertFocused('#signup_login')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit invalid domain
             $browser->with('@step3', function ($step) use ($browser) {
                 $step->type('#signup_login', 'admin')
                     ->type('#signup_domain', 'aaa')
                     ->type('#signup_password', '12345678')
                     ->type('#signup_confirm', '12345678')
                     ->click('[type=submit]')
                     ->waitUntilMissing('#signup_login.is-invalid')
                     ->waitFor('#signup_domain.is-invalid + .invalid-feedback')
                     ->assertMissing('#signup_password.is-invalid')
                     ->assertMissing('#signup_password + .invalid-feedback')
                     ->assertFocused('#signup_domain')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // Submit invalid domain
             $browser->with('@step3', function ($step) {
                 $step->type('#signup_domain', 'user-domain-signup.com')
                     ->click('[type=submit]');
             });
 
             // At this point we should be auto-logged-in to dashboard
             $browser->waitUntilMissing('@step3')
                 ->waitUntilMissing('.app-loader')
                 ->on(new Dashboard())
                 ->assertUser('admin@user-domain-signup.com');
 
-            $browser->click('a.link-logout');
+            $browser->within(new Menu(), function ($browser) {
+                $browser->clickMenuItem('logout');
+            });
         });
     }
 
     /**
      * Test signup with voucher
      */
     public function testSignupVoucherLink(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('/signup/voucher/TEST')
                 ->onWithoutAssert(new Signup())
                 ->waitFor('@step0')
                 ->click('.plan-individual button')
                 ->whenAvailable('@step1', function (Browser $browser) {
                     $browser->type('#signup_first_name', 'Test')
                         ->type('#signup_last_name', 'User')
                         ->type('#signup_email', 'BrowserSignupTestUser1@kolab.org')
                         ->click('[type=submit]');
                 })
                 ->whenAvailable('@step2', function (Browser $browser) {
                     // Get the code and short_code from database
                     // FIXME: Find a nice way to read javascript data without using hidden inputs
                     $code = $browser->value('#signup_code');
 
                     $this->assertNotEmpty($code);
 
                     $code = SignupCode::find($code);
 
                     $browser->type('#signup_short_code', $code->short_code)
                         ->click('[type=submit]');
                 })
                 ->whenAvailable('@step3', function (Browser $browser) {
                     // Assert that the code is filled in the input
                     // Change it and test error handling
                     $browser->assertValue('#signup_voucher', 'TEST')
                         ->type('#signup_voucher', 'TESTXX')
                         ->type('#signup_login', 'signuptestdusk')
                         ->type('#signup_password', '123456789')
                         ->type('#signup_confirm', '123456789')
                         ->click('[type=submit]')
                         ->waitFor('#signup_voucher.is-invalid')
                         ->assertVisible('#signup_voucher + .invalid-feedback')
                         ->assertFocused('#signup_voucher')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         // Submit the correct code
                         ->type('#signup_voucher', 'TEST')
                         ->click('[type=submit]');
                 })
                 ->waitUntilMissing('@step3')
                 ->waitUntilMissing('.app-loader')
                 ->on(new Dashboard())
                 ->assertUser('signuptestdusk@' . \config('app.domain'))
                 // Logout the user
-                ->click('a.link-logout');
+                ->within(new Menu(), function ($browser) {
+                    $browser->clickMenuItem('logout');
+                });
         });
 
         $user = $this->getTestUser('signuptestdusk@' . \config('app.domain'));
         $discount = Discount::where('code', 'TEST')->first();
         $this->assertSame($discount->id, $user->wallets()->first()->discount_id);
     }
 }
diff --git a/src/tests/Browser/UsersTest.php b/src/tests/Browser/UsersTest.php
index 705a1d4a..361d6d2f 100644
--- a/src/tests/Browser/UsersTest.php
+++ b/src/tests/Browser/UsersTest.php
@@ -1,560 +1,560 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Discount;
 use App\Entitlement;
 use App\Sku;
 use App\User;
 use App\UserAlias;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\ListInput;
 use Tests\Browser\Components\QuotaInput;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\UserInfo;
 use Tests\Browser\Pages\UserList;
 use Tests\TestCaseDusk;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 
 class UsersTest extends TestCaseDusk
 {
     private $profile = [
         'first_name' => 'John',
         'last_name' => 'Doe',
         'organization' => 'Kolab Developers',
     ];
 
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('julia.roberts@kolab.org');
 
         $john = User::where('email', 'john@kolab.org')->first();
         $john->setSettings($this->profile);
         UserAlias::where('user_id', $john->id)
             ->where('alias', 'john.test@kolab.org')->delete();
 
         Entitlement::where('entitleable_id', $john->id)->whereIn('cost', [25, 100])->delete();
 
         $wallet = $john->wallets()->first();
         $wallet->discount()->dissociate();
         $wallet->save();
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->deleteTestUser('julia.roberts@kolab.org');
 
         $john = User::where('email', 'john@kolab.org')->first();
         $john->setSettings($this->profile);
         UserAlias::where('user_id', $john->id)
             ->where('alias', 'john.test@kolab.org')->delete();
 
         Entitlement::where('entitleable_id', $john->id)->whereIn('cost', [25, 100])->delete();
 
         $wallet = $john->wallets()->first();
         $wallet->discount()->dissociate();
         $wallet->save();
 
         parent::tearDown();
     }
 
     /**
      * Test user info page (unauthenticated)
      */
     public function testInfoUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $user = User::where('email', 'john@kolab.org')->first();
 
             $browser->visit('/user/' . $user->id)->on(new Home());
         });
     }
 
     /**
      * Test users list page (unauthenticated)
      */
     public function testListUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/users')->on(new Home());
         });
     }
 
     /**
      * Test users list page
      */
     public function testList(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
                 ->assertSeeIn('@links .link-users', 'User accounts')
                 ->click('@links .link-users')
                 ->on(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 4)
                         ->assertSeeIn('tbody tr:nth-child(1) a', 'jack@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(2) a', 'joe@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(3) a', 'john@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'ned@kolab.org')
                         ->assertVisible('tbody tr:nth-child(1) button.button-delete')
                         ->assertVisible('tbody tr:nth-child(2) button.button-delete')
                         ->assertVisible('tbody tr:nth-child(3) button.button-delete')
                         ->assertVisible('tbody tr:nth-child(4) button.button-delete');
                 });
         });
     }
 
     /**
      * Test user account editing page (not profile page)
      *
      * @depends testList
      */
     public function testInfo(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->on(new UserList())
                 ->click('@table tr:nth-child(3) a')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'User account')
                 ->with('@form', function (Browser $browser) {
                     // Assert form content
                     $browser->assertSeeIn('div.row:nth-child(1) label', 'Status')
                         ->assertSeeIn('div.row:nth-child(1) #status', 'Active')
                         ->assertFocused('div.row:nth-child(2) input')
                         ->assertSeeIn('div.row:nth-child(2) label', 'First name')
                         ->assertValue('div.row:nth-child(2) input[type=text]', $this->profile['first_name'])
                         ->assertSeeIn('div.row:nth-child(3) label', 'Last name')
                         ->assertValue('div.row:nth-child(3) input[type=text]', $this->profile['last_name'])
                         ->assertSeeIn('div.row:nth-child(4) label', 'Organization')
                         ->assertValue('div.row:nth-child(4) input[type=text]', $this->profile['organization'])
                         ->assertSeeIn('div.row:nth-child(5) label', 'Email')
                         ->assertValue('div.row:nth-child(5) input[type=text]', 'john@kolab.org')
                         ->assertDisabled('div.row:nth-child(5) input[type=text]')
                         ->assertSeeIn('div.row:nth-child(6) label', 'Email aliases')
                         ->assertVisible('div.row:nth-child(6) .list-input')
                         ->with(new ListInput('#aliases'), function (Browser $browser) {
                             $browser->assertListInputValue(['john.doe@kolab.org'])
                                 ->assertValue('@input', '');
                         })
                         ->assertSeeIn('div.row:nth-child(7) label', 'Password')
                         ->assertValue('div.row:nth-child(7) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(8) label', 'Confirm password')
                         ->assertValue('div.row:nth-child(8) input[type=password]', '')
                         ->assertSeeIn('button[type=submit]', 'Submit');
 
                     // Clear some fields and submit
                     $browser->type('#first_name', '')
                         ->type('#last_name', '')
                         ->click('button[type=submit]');
                 })
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
 
             // Test error handling (password)
             $browser->with('@form', function (Browser $browser) {
                 $browser->type('#password', 'aaaaaa')
                     ->type('#password_confirmation', '')
                     ->click('button[type=submit]')
                     ->waitFor('#password + .invalid-feedback')
                     ->assertSeeIn('#password + .invalid-feedback', 'The password confirmation does not match.')
                     ->assertFocused('#password')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             });
 
             // TODO: Test password change
 
             // Test form error handling (aliases)
             $browser->with('@form', function (Browser $browser) {
                 // TODO: For some reason, clearing the input value
                 // with ->type('#password', '') does not work, maybe some dusk/vue intricacy
                 // For now we just use the default password
                 $browser->type('#password', 'simple123')
                     ->type('#password_confirmation', 'simple123')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->addListEntry('invalid address');
                     })
                     ->click('button[type=submit]')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
             })
             ->with('@form', function (Browser $browser) {
                 $browser->with(new ListInput('#aliases'), function (Browser $browser) {
                     $browser->assertFormError(2, 'The specified alias is invalid.', false);
                 });
             });
 
             // Test adding aliases
             $browser->with('@form', function (Browser $browser) {
                 $browser->with(new ListInput('#aliases'), function (Browser $browser) {
                     $browser->removeListEntry(2)
                         ->addListEntry('john.test@kolab.org');
                 })
                     ->click('button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
             });
 
             $john = User::where('email', 'john@kolab.org')->first();
             $alias = UserAlias::where('user_id', $john->id)->where('alias', 'john.test@kolab.org')->first();
             $this->assertTrue(!empty($alias));
 
             // Test subscriptions
             $browser->with('@form', function (Browser $browser) {
                 $browser->assertSeeIn('div.row:nth-child(9) label', 'Subscriptions')
                     ->assertVisible('@skus.row:nth-child(9)')
                     ->with('@skus', function ($browser) {
                         $browser->assertElementsCount('tbody tr', 5)
                             // Mailbox SKU
                             ->assertSeeIn('tbody tr:nth-child(1) td.name', 'User Mailbox')
                             ->assertSeeIn('tbody tr:nth-child(1) td.price', '4,44 CHF/month')
                             ->assertChecked('tbody tr:nth-child(1) td.selection input')
                             ->assertDisabled('tbody tr:nth-child(1) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(1) td.buttons button',
                                 'Just a mailbox'
                             )
                             // Storage SKU
                             ->assertSeeIn('tbody tr:nth-child(2) td.name', 'Storage Quota')
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,00 CHF/month')
                             ->assertChecked('tbody tr:nth-child(2) td.selection input')
                             ->assertDisabled('tbody tr:nth-child(2) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(2) td.buttons button',
                                 'Some wiggle room'
                             )
                             ->with(new QuotaInput('tbody tr:nth-child(2) .range-input'), function ($browser) {
                                 $browser->assertQuotaValue(2)->setQuotaValue(3);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,25 CHF/month')
                             // groupware SKU
                             ->assertSeeIn('tbody tr:nth-child(3) td.name', 'Groupware Features')
                             ->assertSeeIn('tbody tr:nth-child(3) td.price', '5,55 CHF/month')
                             ->assertChecked('tbody tr:nth-child(3) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(3) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(3) td.buttons button',
                                 'Groupware functions like Calendar, Tasks, Notes, etc.'
                             )
                             // ActiveSync SKU
                             ->assertSeeIn('tbody tr:nth-child(4) td.name', 'Activesync')
                             ->assertSeeIn('tbody tr:nth-child(4) td.price', '1,00 CHF/month')
                             ->assertNotChecked('tbody tr:nth-child(4) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(4) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(4) td.buttons button',
                                 'Mobile synchronization'
                             )
                             // 2FA SKU
                             ->assertSeeIn('tbody tr:nth-child(5) td.name', '2-Factor Authentication')
                             ->assertSeeIn('tbody tr:nth-child(5) td.price', '0,00 CHF/month')
                             ->assertNotChecked('tbody tr:nth-child(5) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(5) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(5) td.buttons button',
                                 'Two factor authentication for webmail and administration panel'
                             )
                             ->click('tbody tr:nth-child(4) td.selection input');
                     })
                     ->assertMissing('@skus table + .hint')
                     ->click('button[type=submit]')
                     ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
             });
 
             $expected = ['activesync', 'groupware', 'mailbox', 'storage', 'storage', 'storage'];
             $this->assertUserEntitlements($john, $expected);
 
             // Test subscriptions interaction
             $browser->with('@form', function (Browser $browser) {
                 $browser->with('@skus', function ($browser) {
                     // Uncheck 'groupware', expect activesync unchecked
-                    $browser->click('@sku-input-groupware')
-                        ->assertNotChecked('@sku-input-groupware')
-                        ->assertNotChecked('@sku-input-activesync')
-                        ->assertEnabled('@sku-input-activesync')
-                        ->assertNotReadonly('@sku-input-activesync')
+                    $browser->click('#sku-input-groupware')
+                        ->assertNotChecked('#sku-input-groupware')
+                        ->assertNotChecked('#sku-input-activesync')
+                        ->assertEnabled('#sku-input-activesync')
+                        ->assertNotReadonly('#sku-input-activesync')
                         // Check 'activesync', expect an alert
-                        ->click('@sku-input-activesync')
+                        ->click('#sku-input-activesync')
                         ->assertDialogOpened('Activesync requires Groupware Features.')
                         ->acceptDialog()
-                        ->assertNotChecked('@sku-input-activesync')
+                        ->assertNotChecked('#sku-input-activesync')
                         // Check '2FA', expect 'activesync' unchecked and readonly
-                        ->click('@sku-input-2fa')
-                        ->assertChecked('@sku-input-2fa')
-                        ->assertNotChecked('@sku-input-activesync')
-                        ->assertReadonly('@sku-input-activesync')
+                        ->click('#sku-input-2fa')
+                        ->assertChecked('#sku-input-2fa')
+                        ->assertNotChecked('#sku-input-activesync')
+                        ->assertReadonly('#sku-input-activesync')
                         // Uncheck '2FA'
-                        ->click('@sku-input-2fa')
-                        ->assertNotChecked('@sku-input-2fa')
-                        ->assertNotReadonly('@sku-input-activesync');
+                        ->click('#sku-input-2fa')
+                        ->assertNotChecked('#sku-input-2fa')
+                        ->assertNotReadonly('#sku-input-activesync');
                 });
             });
         });
     }
 
     /**
      * Test user adding page
      *
      * @depends testList
      */
     public function testNewUser(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
                 ->assertSeeIn('button.create-user', 'Create user')
                 ->click('button.create-user')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'New user account')
                 ->with('@form', function (Browser $browser) {
                     // Assert form content
                     $browser->assertFocused('div.row:nth-child(1) input')
                         ->assertSeeIn('div.row:nth-child(1) label', 'First name')
                         ->assertValue('div.row:nth-child(1) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(2) label', 'Last name')
                         ->assertValue('div.row:nth-child(2) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(3) label', 'Organization')
                         ->assertValue('div.row:nth-child(3) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(4) label', 'Email')
                         ->assertValue('div.row:nth-child(4) input[type=text]', '')
                         ->assertEnabled('div.row:nth-child(4) input[type=text]')
                         ->assertSeeIn('div.row:nth-child(5) label', 'Email aliases')
                         ->assertVisible('div.row:nth-child(5) .list-input')
                         ->with(new ListInput('#aliases'), function (Browser $browser) {
                             $browser->assertListInputValue([])
                                 ->assertValue('@input', '');
                         })
                         ->assertSeeIn('div.row:nth-child(6) label', 'Password')
                         ->assertValue('div.row:nth-child(6) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(7) label', 'Confirm password')
                         ->assertValue('div.row:nth-child(7) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(8) label', 'Package')
                         // assert packages list widget, select "Lite Account"
                         ->with('@packages', function ($browser) {
                             $browser->assertElementsCount('tbody tr', 2)
                                 ->assertSeeIn('tbody tr:nth-child(1)', 'Groupware Account')
                                 ->assertSeeIn('tbody tr:nth-child(2)', 'Lite Account')
                                 ->assertSeeIn('tbody tr:nth-child(1) .price', '9,99 CHF/month')
                                 ->assertSeeIn('tbody tr:nth-child(2) .price', '4,44 CHF/month')
                                 ->assertChecked('tbody tr:nth-child(1) input')
                                 ->click('tbody tr:nth-child(2) input')
                                 ->assertNotChecked('tbody tr:nth-child(1) input')
                                 ->assertChecked('tbody tr:nth-child(2) input');
                         })
                         ->assertMissing('@packages table + .hint')
                         ->assertSeeIn('button[type=submit]', 'Submit');
 
                     // Test browser-side required fields and error handling
                     $browser->click('button[type=submit]')
                         ->assertFocused('#email')
                         ->type('#email', 'invalid email')
                         ->click('button[type=submit]')
                         ->assertFocused('#password')
                         ->type('#password', 'simple123')
                         ->click('button[type=submit]')
                         ->assertFocused('#password_confirmation')
                         ->type('#password_confirmation', 'simple')
                         ->click('button[type=submit]')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertSeeIn('#email + .invalid-feedback', 'The specified email is invalid.')
                         ->assertSeeIn('#password + .invalid-feedback', 'The password confirmation does not match.');
                 });
 
             // Test form error handling (aliases)
             $browser->with('@form', function (Browser $browser) {
                 $browser->type('#email', 'julia.roberts@kolab.org')
                     ->type('#password_confirmation', 'simple123')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->addListEntry('invalid address');
                     })
                     ->click('button[type=submit]')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->assertFormError(1, 'The specified alias is invalid.', false);
                     });
             });
 
             // Successful account creation
             $browser->with('@form', function (Browser $browser) {
                 $browser->type('#first_name', 'Julia')
                     ->type('#last_name', 'Roberts')
                     ->type('#organization', 'Test Org')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->removeListEntry(1)
                             ->addListEntry('julia.roberts2@kolab.org');
                     })
                     ->click('button[type=submit]');
             })
             ->assertToast(Toast::TYPE_SUCCESS, 'User created successfully.')
             // check redirection to users list
             ->waitForLocation('/users')
             ->on(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 5)
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'julia.roberts@kolab.org');
                 });
 
             $julia = User::where('email', 'julia.roberts@kolab.org')->first();
             $alias = UserAlias::where('user_id', $julia->id)->where('alias', 'julia.roberts2@kolab.org')->first();
             $this->assertTrue(!empty($alias));
             $this->assertUserEntitlements($julia, ['mailbox', 'storage', 'storage']);
             $this->assertSame('Julia', $julia->getSetting('first_name'));
             $this->assertSame('Roberts', $julia->getSetting('last_name'));
             $this->assertSame('Test Org', $julia->getSetting('organization'));
         });
     }
 
     /**
      * Test user delete
      *
      * @depends testNewUser
      */
     public function testDeleteUser(): void
     {
         // First create a new user
         $john = $this->getTestUser('john@kolab.org');
         $julia = $this->getTestUser('julia.roberts@kolab.org');
         $package_kolab = \App\Package::where('title', 'kolab')->first();
         $john->assignPackage($package_kolab, $julia);
 
         // Test deleting non-controller user
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 5)
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'julia.roberts@kolab.org')
                         ->click('tbody tr:nth-child(4) button.button-delete');
                 })
                 ->with(new Dialog('#delete-warning'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Delete julia.roberts@kolab.org')
                         ->assertFocused('@button-cancel')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Delete')
                         ->click('@button-cancel');
                 })
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->click('tbody tr:nth-child(4) button.button-delete');
                 })
                 ->with(new Dialog('#delete-warning'), function (Browser $browser) {
                     $browser->click('@button-action');
                 })
                 ->assertToast(Toast::TYPE_SUCCESS, 'User deleted successfully.')
                 ->with('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 4)
                         ->assertSeeIn('tbody tr:nth-child(1) a', 'jack@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(2) a', 'joe@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(3) a', 'john@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'ned@kolab.org');
                 });
 
             $julia = User::where('email', 'julia.roberts@kolab.org')->first();
             $this->assertTrue(empty($julia));
 
             // Test clicking Delete on the controller record redirects to /profile/delete
             $browser
                 ->with('@table', function (Browser $browser) {
                     $browser->click('tbody tr:nth-child(3) button.button-delete');
                 })
                 ->waitForLocation('/profile/delete');
         });
 
         // Test that non-controller user cannot see/delete himself on the users list
         // Note: Access to /profile/delete page is tested in UserProfileTest.php
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('jack@kolab.org', 'simple123', true)
                 ->visit(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 0);
                 });
         });
 
         // Test that controller user (Ned) can see/delete all the users ???
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('ned@kolab.org', 'simple123', true)
                 ->visit(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 4)
                         ->assertElementsCount('tbody button.button-delete', 4);
                 });
 
                 // TODO: Test the delete action in details
         });
 
         // TODO: Test what happens with the logged in user session after he's been deleted by another user
     }
 
     /**
      * Test discounted sku/package prices in the UI
      */
     public function testDiscountedPrices(): void
     {
         // Add 10% discount
         $discount = Discount::where('code', 'TEST')->first();
         $john = User::where('email', 'john@kolab.org')->first();
         $wallet = $john->wallet();
         $wallet->discount()->associate($discount);
         $wallet->save();
 
         // SKUs on user edit page
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->visit(new UserList())
                 ->click('@table tr:nth-child(2) a')
                 ->on(new UserInfo())
                 ->with('@form', function (Browser $browser) {
                     $browser->whenAvailable('@skus', function (Browser $browser) {
                         $quota_input = new QuotaInput('tbody tr:nth-child(2) .range-input');
                         $browser->waitFor('tbody tr')
                             ->assertElementsCount('tbody tr', 5)
                             // Mailbox SKU
                             ->assertSeeIn('tbody tr:nth-child(1) td.price', '3,99 CHF/month¹')
                             // Storage SKU
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,00 CHF/month¹')
                             ->with($quota_input, function (Browser $browser) {
                                 $browser->setQuotaValue(100);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '21,56 CHF/month¹')
                             // groupware SKU
                             ->assertSeeIn('tbody tr:nth-child(3) td.price', '4,99 CHF/month¹')
                             // ActiveSync SKU
                             ->assertSeeIn('tbody tr:nth-child(4) td.price', '0,90 CHF/month¹')
                             // 2FA SKU
                             ->assertSeeIn('tbody tr:nth-child(5) td.price', '0,00 CHF/month¹');
                     })
                     ->assertSeeIn('@skus table + .hint', '¹ applied discount: 10% - Test voucher');
                 });
         });
 
         // Packages on new user page
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
                 ->click('button.create-user')
                 ->on(new UserInfo())
                 ->with('@form', function (Browser $browser) {
                     $browser->whenAvailable('@packages', function (Browser $browser) {
                         $browser->assertElementsCount('tbody tr', 2)
                             ->assertSeeIn('tbody tr:nth-child(1) .price', '8,99 CHF/month¹') // Groupware
                             ->assertSeeIn('tbody tr:nth-child(2) .price', '3,99 CHF/month¹'); // Lite
                     })
                     ->assertSeeIn('@packages table + .hint', '¹ applied discount: 10% - Test voucher');
                 });
         });
     }
 }