diff --git a/src/package.json b/src/package.json
index 29c2131c..ca22ce1e 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,37 +1,37 @@
 {
   "private": true,
   "scripts": {
     "dev": "npm run development",
     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "npm run development -- --watch",
     "watch-poll": "npm run watch -- --watch-poll",
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "lint": "eslint --ext .js,.vue resources && stylelint \"resources/sass/*.scss\" \"resources/vue/*.vue\""
   },
   "devDependencies": {
     "axios": "^0.19",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "^4.5.0",
     "cross-env": "^5.1",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-brands-svg-icons": "^5.12.1",
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/vue-fontawesome": "^0.1.9",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "laravel-mix": "^4.0.7",
-    "popper.js": "^1.12",
+    "popper.js": "^1.16.0",
     "resolve-url-loader": "^2.3.1",
     "sass": "^1.15.2",
     "sass-loader": "^7.1.0",
     "stylelint": "^12.0.1",
     "stylelint-config-standard": "^19.0.0",
     "vue": "^2.5.17",
     "vue-router": "^3.1.3",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.1.1"
   }
 }
diff --git a/src/resources/sass/_variables.scss b/src/resources/sass/_variables.scss
index 66d55c8c..a7b6deb6 100644
--- a/src/resources/sass/_variables.scss
+++ b/src/resources/sass/_variables.scss
@@ -1,23 +1,23 @@
 // Body
 $body-bg: #fff;
 
 // Typography
 $font-family-sans-serif: 'Nunito', sans-serif;
 $font-size-base: 0.9rem;
-$line-height-base: 1.6;
+$line-height-base: 1.5;
 
 // Colors
 $blue: #3490dc;
 $indigo: #6574cd;
 $purple: #9561e2;
 $pink: #f66d9b;
 $red: #e3342f;
 $orange: #f6993f;
 $yellow: #ffed4a;
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
 
 // App colors
 $menu-bg-color: #f6f5f3;
 $main-color: #f1a539;
diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss
index 36cff610..f227c715 100644
--- a/src/resources/sass/app.scss
+++ b/src/resources/sass/app.scss
@@ -1,214 +1,220 @@
 // Fonts
 
 // Variables
 @import 'variables';
 
 // Bootstrap
 @import '~bootstrap/scss/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: 1;
     }
 
     & > 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;
 
     .spinner-border {
         width: 120px;
         height: 120px;
         border-width: 15px;
         color: #b2aa99;
     }
 }
 
 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;
     height: 8em;
 
     td {
         vertical-align: middle;
     }
 
     tbody:not(:empty) + & {
         display: none;
     }
 }
 
 table {
     td.buttons,
     td.price,
     td.selection {
         width: 1%;
     }
 
     td.price {
         text-align: right;
     }
 
     &.form-list {
         td {
             border: 0;
 
             &:first-child {
                 padding-left: 0;
             }
 
             &:last-child {
                 padding-right: 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-top: 0.5rem;
         text-decoration: none;
         width: 150px;
 
         &.disabled {
             pointer-events: none;
             opacity: 0.6;
         }
 
         .badge {
             position: absolute;
             top: 0.5rem;
             right: 0.5rem;
         }
 
         & + a {
             margin-left: 0.5rem;
         }
     }
 
     svg {
         width: 6rem;
         height: 6rem;
         margin: auto;
     }
 }
 
 .plan-selector {
     .plan-ico {
-        font-size: 4em;
+        font-size: 3.8rem;
         color: #f1a539;
         border: 3px solid #f1a539;
-        width: 100px;
+        width: 6rem;
+        height: 6rem;
         margin-bottom: 1rem;
         border-radius: 50%;
     }
 
     ul:last-child {
         margin-bottom: 0;
     }
 }
+
+// Bootstrap style fix
+.btn-link {
+    border: 0;
+}
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
index b0b37f7a..eadd3b4f 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,366 +1,366 @@
 <template>
     <div class="container">
         <status-component v-if="user_id !== 'new'" v-bind: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">
                             <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 form-list">
+                                <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">
                                             </td>
                                             <td class="name">
                                                 {{ pkg.name }}
                                             </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 form-list">
+                                <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"
                                                 >
                                             </td>
                                             <td class="name">
                                                 <span class="name">{{ sku.name }}</span>
                                                 <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/Profile.vue b/src/resources/vue/User/Profile.vue
index 7c3f15cd..97a32575 100644
--- a/src/resources/vue/User/Profile.vue
+++ b/src/resources/vue/User/Profile.vue
@@ -1,114 +1,114 @@
 <template>
     <div class="container">
         <div class="card" id="user-profile">
             <div class="card-body">
                 <div class="card-title">Your profile</div>
                 <div class="card-text">
                     <form @submit.prevent="submit">
                         <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="profile.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="profile.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="profile.organization">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="phone" v-model="profile.phone">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="external_email" class="col-sm-4 col-form-label">External email</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="external_email" v-model="profile.external_email">
                             </div>
                         </div>
                         <div class="form-group row">
-                            <label for="billing_address" class="col-sm-4 col-form-label">Address</label>
+                            <label for="billing_address" class="col-sm-4 col-form-label" rows="3">Address</label>
                             <div class="col-sm-8">
                                 <textarea class="form-control" id="billing_address" v-model="profile.billing_address"></textarea>
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="country" class="col-sm-4 col-form-label">Country</label>
                             <div class="col-sm-8">
                                 <select class="form-control custom-select" id="country" v-model="profile.country">
                                     <option value="">-</option>
                                     <option v-for="(item, code) in countries" :value="code" :key="code">{{ item[1] }}</option>
                                 </select>
                             </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="profile.password">
                             </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="profile.password_confirmation">
                             </div>
                         </div>
                         <button class="btn btn-primary button-submit" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
                         <router-link
                             v-if="$root.isController(wallet_id)"
                             class="btn btn-danger button-delete"
                             to="/profile/delete" tag="button"
                         ><svg-icon icon="trash-alt"></svg-icon> Delete account</router-link>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 profile: {},
                 wallet_id: null,
                 countries: window.config.countries
             }
         },
         created() {
             this.wallet_id = this.$store.state.authInfo.wallet.id
             this.profile = this.$store.state.authInfo.settings
         },
         mounted() {
             $('#first_name').focus()
         },
         methods: {
             submit() {
                 if (this.profile.country) {
                     this.profile.currency = this.countries[this.profile.country][0]
                 }
 
                 this.$root.clearFormValidation($('#user-profile form'))
 
                 axios.put('/api/v4/users/' + this.$store.state.authInfo.id, this.profile)
                     .then(response => {
                         delete this.profile.password
                         delete this.profile.password_confirm
 
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Widgets/ListInput.vue b/src/resources/vue/Widgets/ListInput.vue
index 61432efb..37fe1f9a 100644
--- a/src/resources/vue/Widgets/ListInput.vue
+++ b/src/resources/vue/Widgets/ListInput.vue
@@ -1,55 +1,55 @@
 <template>
     <div class="list-input" :id="id">
         <div class="input-group">
             <input :id="id + '-input'" type="text" class="form-control main-input" @keydown="keyDown">
             <div class="input-group-append">
-                <a href="#" class="btn btn-outline-secondary" @click="addItem">
+                <a href="#" class="btn btn-outline-secondary" @click.prevent="addItem">
                     <svg-icon icon="plus"></svg-icon>
                     <span class="sr-only">Add</span>
                 </a>
             </div>
         </div>
         <div class="input-group" v-for="(item, index) in list" :key="index">
             <input type="text" class="form-control" :value="item">
             <div class="input-group-append">
-                <a href="#" class="btn btn-outline-secondary" @click="deleteItem(index)">
+                <a href="#" class="btn btn-outline-secondary" @click.prevent="deleteItem(index)">
                     <svg-icon icon="trash-alt"></svg-icon>
                     <span class="sr-only">Delete</span>
                 </a>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
             list: { type: Array, default: () => [] },
             id: { type: String, default: '' }
         },
         methods: {
             addItem() {
                 let input = $(this.$el).find('.main-input')
                 let value = input.val()
 
                 if (value) {
                     this.list.push(value)
                     input.val('').focus()
                 }
             },
             deleteItem(index) {
                 this.$delete(this.list, index)
 
                 if (this.list.length == 1) {
                     $(this.$el).removeClass('is-invalid')
                 }
             },
             keyDown(e) {
                 if (e.which == 13 && e.target.value) {
                     this.addItem()
                     e.preventDefault()
                 }
             }
         }
     }
 </script>