diff --git a/ui/package-lock.json b/ui/package-lock.json
index 3f6e983..0373f6d 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,11 +8,11 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.2.1",
-        "@fortawesome/free-solid-svg-icons": "^6.2.1",
+        "@fortawesome/fontawesome-svg-core": "^6.3.0",
+        "@fortawesome/free-solid-svg-icons": "^6.3.0",
         "@fortawesome/vue-fontawesome": "^2.0.10",
         "axios": "^1.3.2",
-        "buefy": "^0.9.7",
+        "buefy": "^0.9.22",
         "chart.js": "^2.9.4",
         "core-js": "^3.27.2",
         "currency-formatter": "^1.5.9",
@@ -4459,33 +4459,33 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
-      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
       "hasInstallScript": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
-      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
+      "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
       },
       "engines": {
         "node": ">=6"
@@ -9656,11 +9656,11 @@
       }
     },
     "node_modules/buefy": {
-      "version": "0.9.7",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.7.tgz",
-      "integrity": "sha512-Fli0ZjNDgtFtHm0LItWmfhNJ1oLjDwPzUWccvwXXoo2mADXaH8JQxyhY+drUuUV5/GMu5PtwqQSqPgZy942VZg==",
+      "version": "0.9.22",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.22.tgz",
+      "integrity": "sha512-rA9Bf7+2lZupL1PlQU60o7cc0Og4MRz9it5LZlKOIwPENM1uEOjH48EFnNFniLyxIcz6vln0EicS96GsVCFx1Q==",
       "dependencies": {
-        "bulma": "0.9.2"
+        "bulma": "0.9.4"
       },
       "engines": {
         "node": ">= 4.0.0",
@@ -9743,9 +9743,9 @@
       "dev": true
     },
     "node_modules/bulma": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
-      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
     },
     "node_modules/bundle-require": {
       "version": "2.1.8",
@@ -36546,24 +36546,24 @@
       "requires": {}
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
-      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
-      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
+      "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
       }
     },
     "@fortawesome/vue-fontawesome": {
@@ -40837,11 +40837,11 @@
       }
     },
     "buefy": {
-      "version": "0.9.7",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.7.tgz",
-      "integrity": "sha512-Fli0ZjNDgtFtHm0LItWmfhNJ1oLjDwPzUWccvwXXoo2mADXaH8JQxyhY+drUuUV5/GMu5PtwqQSqPgZy942VZg==",
+      "version": "0.9.22",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.22.tgz",
+      "integrity": "sha512-rA9Bf7+2lZupL1PlQU60o7cc0Og4MRz9it5LZlKOIwPENM1uEOjH48EFnNFniLyxIcz6vln0EicS96GsVCFx1Q==",
       "requires": {
-        "bulma": "0.9.2"
+        "bulma": "0.9.4"
       }
     },
     "buffer": {
@@ -40914,9 +40914,9 @@
       "dev": true
     },
     "bulma": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
-      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
     },
     "bundle-require": {
       "version": "2.1.8",
diff --git a/ui/package.json b/ui/package.json
index 6bc5ef0..ba22e8f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,11 +23,11 @@
     "pre-commit": "cross-env PRE_COMMIT=true lint-staged"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "axios": "^1.3.2",
-    "buefy": "^0.9.7",
+    "buefy": "^0.9.22",
     "chart.js": "^2.9.4",
     "core-js": "^3.27.2",
     "currency-formatter": "^1.5.9",
diff --git a/ui/src/components/createQuickEntry.vue b/ui/src/components/createQuickEntry.vue
index d535ebc..64257c6 100644
--- a/ui/src/components/createQuickEntry.vue
+++ b/ui/src/components/createQuickEntry.vue
@@ -95,11 +95,10 @@ export default {
             </div>
             <div class="column">
               <b-button
-                tag="input"
+                tag="button"
                 native-type="submit"
                 :disabled="tryingToCreate"
                 type="is-primary"
-                :value="this.$t('uploadfile')"
                 class="control"
               >
                 {{ $t('uploadfile') }}
diff --git a/ui/src/components/quickEntryDisplay.vue b/ui/src/components/quickEntryDisplay.vue
index 0381302..712ab31 100644
--- a/ui/src/components/quickEntryDisplay.vue
+++ b/ui/src/components/quickEntryDisplay.vue
@@ -50,7 +50,7 @@ export default {
       <b-select
         v-if="unprocessedQuickEntries.length"
         v-model="quickEntry"
-        :placeholder="this.$t('referquickentry')"
+        :placeholder="$t('referquickentry')"
         expanded
         @input="showQuickEntry($event)"
       >
diff --git a/ui/src/components/shareVehicle.vue b/ui/src/components/shareVehicle.vue
index 35ed5b1..bbfb6d1 100644
--- a/ui/src/components/shareVehicle.vue
+++ b/ui/src/components/shareVehicle.vue
@@ -92,7 +92,7 @@ export default {
   <div class="box" style="max-width:600px">
     <h1 class="subtitle">{{ $t('share') }} {{ vehicle.nickname }}</h1>
     <section>
-      <div class="columns is-mobile" v-for="model in models" :key="model.id">
+      <div v-for="model in models" :key="model.id" class="columns is-mobile">
         <div class="column is-one-third">
           <b-field>
             <b-switch v-model="model.isShared" :disabled="model.isOwner" @input="changeShareStatus(model)">
diff --git a/ui/src/main.js b/ui/src/main.js
index cc61992..0020173 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -34,7 +34,6 @@ import '@components/_globals'
 import 'buefy/dist/buefy.css'
 import 'nprogress/nprogress.css'
 
-Vue.component('vue-fontawesome', FontAwesomeIcon)
 library.add(
   faCheck,
   faTimes,
@@ -54,11 +53,12 @@ library.add(
   faShare,
   faUserFriends,
   faTimesCircle
-)
+);
+Vue.component('VueFontawesome', FontAwesomeIcon)
 
 Vue.use(Buefy, {
   defaultIconComponent: 'vue-fontawesome',
-  defaultIconPack: 'fas',
+  defaultIconPack: 'fa',
 })
 
 // Don't warn about using the dev version of Vue in development.
diff --git a/ui/src/router/views/createExpense.vue b/ui/src/router/views/createExpense.vue
index 90c9730..c357c8b 100644
--- a/ui/src/router/views/createExpense.vue
+++ b/ui/src/router/views/createExpense.vue
@@ -162,41 +162,41 @@ export default {
       </div>
     </div>
     <form @submit.prevent="createExpense">
-      <b-field :label="this.$t('selectvehicle')">
-        <b-select v-model="selectedVehicle" :placeholder="this.$t('vehicle')" required expanded :disabled="expense.id">
+      <b-field :label="$t('selectvehicle')">
+        <b-select v-model="selectedVehicle" :placeholder="$t('vehicle')" required expanded :disabled="expense.id">
           <option v-for="option in myVehicles" :key="option.id" :value="option">
             {{ option.nickname }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('expenseby')">
-        <b-select v-model="expenseModel.userId" :placeholder="this.$t('user')" required expanded :disabled="expense.id">
+      <b-field :label="$t('expenseby')">
+        <b-select v-model="expenseModel.userId" :placeholder="$t('user')" required expanded :disabled="expense.id">
           <option v-for="option in users" :key="option.userId" :value="option.userId">
             {{ option.name }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('expensedate')">
+      <b-field :label="$t('expensedate')">
         <b-datepicker
           v-model="expenseModel.date"
           :date-formatter="formatDate"
-          :placeholder="this.$t('clicktoselect')"
+          :placeholder="$t('clicktoselect')"
           icon="calendar"
           :max-date="new Date()"
         >
         </b-datepicker>
       </b-field>
-      <b-field :label="this.$t('expensetype') + `*`">
+      <b-field :label="$t('expensetype') + `*`">
         <b-input v-model="expenseModel.expenseType" expanded required></b-input>
       </b-field>
 
-      <b-field :label="this.$t('totalamountpaid')">
+      <b-field :label="$t('totalamountpaid')">
         <p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
         <b-input v-model.number="expenseModel.amount" type="number" min="0" expanded step=".001" required></b-input>
       </b-field>
-      <b-field :label="this.$t('odometer')">
+      <b-field :label="$t('odometer')">
         <p class="control">
           <span class="button is-static">{{ $t('unit.short.' + me.distanceUnitDetail.key) }}</span>
         </p>
@@ -207,7 +207,7 @@ export default {
         <b-switch v-model="showMore">{{ $t('fillmoredetails') }}</b-switch>
       </b-field>
       <fieldset v-if="showMore">
-        <b-field :label="this.$t('details')">
+        <b-field :label="$t('details')">
           <b-input v-model="expenseModel.comments" type="textarea" expanded></b-input>
         </b-field>
       </fieldset>
@@ -216,7 +216,7 @@ export default {
       </b-field>
       <br />
       <b-field>
-        <b-button tag="input" native-type="submit" :value="this.$t('save')" :disabled="tryingToCreate" type="is-primary" label="Create Expense" expanded> </b-button>
+        <b-button tag="button" native-type="submit" :value="$t('save')" :disabled="tryingToCreate" type="is-primary" label="Create Expense" expanded/> 
       </b-field>
     </form>
   </Layout>
diff --git a/ui/src/router/views/createFillup.vue b/ui/src/router/views/createFillup.vue
index 12db8bd..a2769dc 100644
--- a/ui/src/router/views/createFillup.vue
+++ b/ui/src/router/views/createFillup.vue
@@ -193,21 +193,21 @@ export default {
       </div>
     </div>
     <form class="" @submit.prevent="createFillup">
-      <b-field :label="this.$t('selectvehicle')">
-        <b-select v-model="selectedVehicle" :placeholder="this.$t('vehicle')" required expanded :disabled="fillup.id">
+      <b-field :label="$t('selectvehicle')">
+        <b-select v-model="selectedVehicle" :placeholder="$t('vehicle')" required expanded :disabled="fillup.id">
           <option v-for="option in myVehicles" :key="option.id" :value="option">
             {{ option.nickname }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('expenseby')">
-        <b-select v-model="fillupModel.userId" :placeholder="this.$t('user')" required expanded :disabled="fillup.id">
+      <b-field :label="$t('expenseby')">
+        <b-select v-model="fillupModel.userId" :placeholder="$t('user')" required expanded :disabled="fillup.id">
           <option v-for="option in users" :key="option.userId" :value="option.userId">
             {{ option.name }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('fillupdate')">
+      <b-field :label="$t('fillupdate')">
         <b-datepicker
           v-model="fillupModel.date"
           :date-formatter="formatDate"
@@ -218,7 +218,7 @@ export default {
         >
         </b-datepicker>
       </b-field>
-      <b-field :label="this.$t('fuelsubtype')">
+      <b-field :label="$t('fuelsubtype')">
         <b-autocomplete
           v-model="fillupModel.fuelSubType"
           :data="filteredFuelSubtypes"
@@ -229,27 +229,27 @@ export default {
         >
         </b-autocomplete>
       </b-field>
-      <b-field :label="this.$t('quantity') + `*`" addons>
+      <b-field :label="$t('quantity') + `*`" addons>
         <b-input v-model.number="fillupModel.fuelQuantity" type="number" step=".001" min="0" expanded required></b-input>
-        <b-select v-model="fillupModel.fuelUnit" :placeholder="this.$t('fuelunit')" required>
+        <b-select v-model="fillupModel.fuelUnit" :placeholder="$t('fuelunit')" required>
           <option v-for="(option, key) in fuelUnitMasters" :key="key" :value="key">
             {{ $t('unit.long.' + option.key) }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('per', { '0': this.$t('price'), '1': $t('unit.short.' + vehicle.fuelUnitDetail.key) })"
+      <b-field :label="$t('per', { '0': $t('price'), '1': $t('unit.short.' + vehicle.fuelUnitDetail.key) })"
         ><p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
         <b-input v-model.number="fillupModel.perUnitPrice" type="number" min="0" step=".001" expanded required></b-input>
       </b-field>
-      <b-field :label="this.$t('totalamountpaid')">
+      <b-field :label="$t('totalamountpaid')">
         <p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
         <b-input v-model.number="fillupModel.totalAmount" type="number" min="0" step=".001" expanded required></b-input>
       </b-field>
-      <b-field :label="this.$t('odometer')">
+      <b-field :label="$t('odometer')">
         <p class="control">
           <span class="button is-static">{{ $t('unit.short.' + me.distanceUnitDetail.key) }}</span>
         </p>
@@ -265,10 +265,10 @@ export default {
         <b-switch v-model="showMore">{{ $t('fillmoredetails') }}</b-switch>
       </b-field>
       <fieldset v-if="showMore">
-        <b-field :label="this.$t('fillingstation')">
+        <b-field :label="$t('fillingstation')">
           <b-input v-model="fillupModel.fillingStation" type="text" expanded></b-input>
         </b-field>
-        <b-field :label="this.$t('comments')">
+        <b-field :label="$t('comments')">
           <b-input v-model="fillupModel.comments" type="textarea" expanded></b-input>
         </b-field>
       </fieldset>
@@ -277,7 +277,7 @@ export default {
       </b-field>
       <br />
       <b-field>
-        <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" :value="this.$t('save')" :label="this.$t('createfillup')" expanded> </b-button>
+        <b-button tag="button" native-type="submit" :disabled="tryingToCreate" type="is-primary" :value="$t('save')" :label="$t('createfillup')" expanded/> 
         <p v-if="authError">
           There was an error logging in to your account.
         </p>
diff --git a/ui/src/router/views/createVehicle.vue b/ui/src/router/views/createVehicle.vue
index 2d385e8..9527649 100644
--- a/ui/src/router/views/createVehicle.vue
+++ b/ui/src/router/views/createVehicle.vue
@@ -134,53 +134,53 @@ export default {
       </div>
     </div>
     <form @submit.prevent="createVehicle">
-      <b-field :label="this.$t('nickname') + `*`">
+      <b-field :label="$t('nickname') + `*`">
         <b-input v-model="vehicleModel.nickname" type="text" expanded required></b-input>
       </b-field>
-      <b-field :label="this.$t('registration') + `*`">
+      <b-field :label="$t('registration') + `*`">
         <b-input v-model="vehicleModel.registration" type="text" expanded required></b-input>
       </b-field>
       <b-field label="VIN">
         <b-input v-model="vehicleModel.vin" type="text" expanded></b-input>
       </b-field>
-      <b-field :label="this.$t('fueltype') + `*`">
-        <b-select v-model.number="vehicleModel.fuelType" :placeholder="this.$t('fueltype')" required expanded>
+      <b-field :label="$t('fueltype') + `*`">
+        <b-select v-model.number="vehicleModel.fuelType" :placeholder="$t('fueltype')" required expanded>
           <option v-for="(option, key) in fuelTypeMasters" :key="key" :value="key">
             {{ $t('fuel.' + option.key) }}
           </option>
         </b-select>
       </b-field>
 
-      <b-field :label="this.$t('fuelunit') + `*`">
-        <b-select v-model.number="vehicleModel.fuelUnit" :placeholder="this.$t('fuelunit')" required expanded>
+      <b-field :label="$t('fuelunit') + `*`">
+        <b-select v-model.number="vehicleModel.fuelUnit" :placeholder="$t('fuelunit')" required expanded>
           <option v-for="(option, key) in fuelUnitMasters" :key="key" :value="key">
             {{ $t('unit.long.' + option.key) }}
           </option>
         </b-select>
       </b-field>
 
-      <b-field :label="this.$t('make') + `*`">
+      <b-field :label="$t('make') + `*`">
         <b-input v-model="vehicleModel.make" type="text" required expanded></b-input>
       </b-field>
-      <b-field :label="this.$t('model') + `*`">
+      <b-field :label="$t('model') + `*`">
         <b-input v-model="vehicleModel.model" type="text" required expanded></b-input>
       </b-field>
-      <b-field :label="this.$t('yearmanufacture') + `*`">
+      <b-field :label="$t('yearmanufacture') + `*`">
         <b-input v-model.number="vehicleModel.yearOfManufacture" type="number" expanded number></b-input>
       </b-field>
-      <b-field :label="this.$t('enginesize')">
+      <b-field :label="$t('enginesize')">
         <b-input v-model.number="vehicleModel.engineSize" type="number" expanded number></b-input>
       </b-field>
 
       <br />
       <b-field>
         <b-button
-          tag="input"
+          tag="button"
           native-type="submit"
           :disabled="tryingToCreate"
           type="is-primary"
-          :value="this.$t('save')"
-          :label="this.$t('createvehicle')"
+          :value="$t('save')"
+          :label="$t('createvehicle')"
           expanded
         >
           <BaseIcon v-if="tryingToCreate" name="sync" spin />
diff --git a/ui/src/router/views/import-drivvo.vue b/ui/src/router/views/import-drivvo.vue
index 143b2d5..1ffbdbd 100644
--- a/ui/src/router/views/import-drivvo.vue
+++ b/ui/src/router/views/import-drivvo.vue
@@ -154,7 +154,7 @@ export default {
                 </b-field>
               </div>
               <div class="column">
-                <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" value="Upload File" class="control">
+                <b-button tag="button" native-type="submit" :disabled="tryingToCreate" type="is-primary" class="control">
                   Import
                 </b-button>
               </div></div
diff --git a/ui/src/router/views/import-fuelly.vue b/ui/src/router/views/import-fuelly.vue
index f536184..8439f0d 100644
--- a/ui/src/router/views/import-fuelly.vue
+++ b/ui/src/router/views/import-fuelly.vue
@@ -9,6 +9,19 @@ export default {
     meta: [{ name: 'description', content: 'The Import Fuelly page.' }],
   },
   components: { Layout },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: function() {
+    return {
+      file: null,
+      tryingToCreate: false,
+      errors: [],
+    }
+  },
   computed: {
     ...mapState('utils', ['isMobile']),
     uploadButtonLabel() {
@@ -27,19 +40,6 @@ export default {
       }
     },
   },
-  props: {
-    user: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function() {
-    return {
-      file: null,
-      tryingToCreate: false,
-      errors: [],
-    }
-  },
   methods: {
     importFuelly() {
       if (this.file == null) {
@@ -121,7 +121,7 @@ export default {
                 </b-field>
               </div>
               <div class="column">
-                <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" :value="this.$t('uploadfile')" class="control">
+                <b-button tag="button" native-type="submit" :disabled="tryingToCreate" type="is-primary" class="control">
                   {{ $t('import') }}
                 </b-button>
               </div></div
diff --git a/ui/src/router/views/initialize.vue b/ui/src/router/views/initialize.vue
index c47c5de..c363cef 100644
--- a/ui/src/router/views/initialize.vue
+++ b/ui/src/router/views/initialize.vue
@@ -187,7 +187,7 @@ export default {
         {{ connectionError }}
       </b-notification>
 
-      <b-field addons :label="this.$t('mysqlconnstr')">
+      <b-field addons :label="$t('mysqlconnstr')">
         <b-input v-model="url" required></b-input>
       </b-field>
 
@@ -200,20 +200,20 @@ export default {
     <div v-if="migrationMode === 'fresh'" class="box content">
       <h1 class="title">{{ $t('init.fresh.setupadminuser') }}</h1>
       <form @submit.prevent="register">
-        <b-field :label="this.$t('init.fresh.yourname')">
+        <b-field :label="$t('init.fresh.yourname')">
           <b-input v-model="registerModel.name" required></b-input>
         </b-field>
-        <b-field :label="this.$t('init.fresh.youremail')">
+        <b-field :label="$t('init.fresh.youremail')">
           <b-input v-model="registerModel.email" type="email" required></b-input>
         </b-field>
-        <b-field :label="this.$t('init.fresh.yourpassword')">
+        <b-field :label="$t('init.fresh.yourpassword')">
           <b-input v-model="registerModel.password" type="password" required minlength="8" password-reveal></b-input>
         </b-field>
-        <b-field :label="this.$t('currency')">
+        <b-field :label="$t('currency')">
           <b-autocomplete
             v-model="registerModel.currency"
             :custom-formatter="formatCurrency"
-            :placeholder="this.$t('currency')"
+            :placeholder="$t('currency')"
             :data="filteredCurrencyMasters"
             :keep-first="true"
             :open-on-focus="true"
@@ -221,8 +221,8 @@ export default {
             @select="(option) => (selected = option)"
           ></b-autocomplete>
         </b-field>
-        <b-field :label="this.$t('distanceunit')">
-          <b-select v-model.number="registerModel.distanceUnit" :placeholder="this.$t('distanceunit')" required expanded>
+        <b-field :label="$t('distanceunit')">
+          <b-select v-model.number="registerModel.distanceUnit" :placeholder="$t('distanceunit')" required expanded>
             <option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
               {{ `${$t('unit.long.' + option.key)} (${$t('unit.short.' + option.key)})` }}
             </option>
@@ -230,7 +230,7 @@ export default {
         </b-field>
         <br />
         <div class="buttons">
-          <b-button type="is-primary" native-type="submit" tag="input" :value="this.$t('save')"></b-button>
+          <b-button type="is-primary" native-type="submit" tag="button" :value="$t('save')"></b-button>
 
           <b-button type="is-danger is-light" @click="resetMigrationMode">{{ $t('cancel') }}</b-button>
         </div>
diff --git a/ui/src/router/views/login.vue b/ui/src/router/views/login.vue
index 8fd5251..c0d3da3 100644
--- a/ui/src/router/views/login.vue
+++ b/ui/src/router/views/login.vue
@@ -71,7 +71,7 @@ export default {
       <b-field :label="$t('password')">
         <b-input v-model="password" tag="b-input" name="password" type="password" :placeholder="placeholders.password" />
       </b-field>
-      <b-button tag="input" native-type="submit" :value="$t('login')" :disabled="tryingToLogIn" type="is-primary">
+      <b-button tag="button" native-type="submit" :disabled="tryingToLogIn" type="is-primary">
         <BaseIcon v-if="tryingToLogIn" name="sync" spin />
         <span v-else>
           {{ $t('login') }}
diff --git a/ui/src/router/views/settings.vue b/ui/src/router/views/settings.vue
index af647d6..ca4b326 100644
--- a/ui/src/router/views/settings.vue
+++ b/ui/src/router/views/settings.vue
@@ -167,7 +167,7 @@ export default {
           </b-field>
           <br />
           <b-field>
-            <b-button tag="input" native-type="submit" :disabled="tryingToSave" type="is-primary" :value="$t('save')" expanded> </b-button>
+            <b-button tag="button" native-type="submit" :disabled="tryingToSave" type="is-primary" expanded> {{ $t('save') }} </b-button>
           </b-field>
         </form>
       </div>
@@ -185,7 +185,8 @@ export default {
           </b-field>
           <p v-if="!passwordValid" class="help is-danger">{{ $t('passworddontmatch') }}</p>
           <b-field>
-            <b-button tag="input" native-type="submit" :disabled="!passwordValid" type="is-primary" :value="$t('changepassword')" expanded>
+            <b-button tag="button" native-type="submit" :disabled="!passwordValid" type="is-primary" expanded>
+              {{ $t('changepassword') }}
             </b-button>
           </b-field>
         </form>
diff --git a/ui/src/router/views/siteSettings.vue b/ui/src/router/views/siteSettings.vue
index 9b6bb83..f148a91 100644
--- a/ui/src/router/views/siteSettings.vue
+++ b/ui/src/router/views/siteSettings.vue
@@ -72,15 +72,15 @@ export default {
     </div>
     <br />
     <form class="" @submit.prevent="saveSettings">
-      <b-field :label="this.$t('currency')">
-        <b-select v-model="settingsModel.currency" :placeholder="this.$t('currency')" required expanded>
+      <b-field :label="$t('currency')">
+        <b-select v-model="settingsModel.currency" :placeholder="$t('currency')" required expanded>
           <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
             {{ `${option.namePlural} (${option.code})` }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="this.$t('distanceunit')">
-        <b-select v-model.number="settingsModel.distanceUnit" :placeholder="this.$t('distanceunit')" required expanded>
+      <b-field :label="$t('distanceunit')">
+        <b-select v-model.number="settingsModel.distanceUnit" :placeholder="$t('distanceunit')" required expanded>
           <option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
             {{ `${$t('unit.long.' + option.key)} (${$t('unit.short.' + option.key)})` }}
           </option>
@@ -88,7 +88,7 @@ export default {
       </b-field>
       <br />
       <b-field>
-        <b-button tag="input" native-type="submit" :disabled="tryingToSave" type="is-primary" :value="this.$t('save')" expanded> </b-button>
+        <b-button tag="button" native-type="submit" :disabled="tryingToSave" type="is-primary" expanded> {{ $t('save') }}</b-button>
       </b-field>
     </form>
   </Layout>
diff --git a/ui/src/router/views/users.vue b/ui/src/router/views/users.vue
index 6c76211..c6dd378 100644
--- a/ui/src/router/views/users.vue
+++ b/ui/src/router/views/users.vue
@@ -181,7 +181,7 @@ export default {
           </b-field>
           <br />
           <div class="buttons">
-            <b-button type="is-primary" native-type="submit" tag="input" :value="$t('save')"></b-button>
+            <b-button type="is-primary" native-type="submit" tag="button">{{ $t('save') }}</b-button>
 
             <b-button type="is-danger is-light" @click="resetUserForm">{{ $t('cancel') }}</b-button>
           </div>
diff --git a/ui/src/router/views/vehicle.vue b/ui/src/router/views/vehicle.vue
index 59c574c..ec0b477 100644
--- a/ui/src/router/views/vehicle.vue
+++ b/ui/src/router/views/vehicle.vue
@@ -92,7 +92,10 @@ export default {
           },
           {
             label: this.$t('avgfuelcost'),
-            value: this.$t('per', {'0': this.formatCurrency(x.avgFuelPrice, x.currency), '1': this.$t('unit.short.' + this.vehicle.fuelUnitDetail.key)}),
+            value: this.$t('per', {
+              0: this.formatCurrency(x.avgFuelPrice, x.currency),
+              1: this.$t('unit.short.' + this.vehicle.fuelUnitDetail.key),
+            }),
           },
         ]
       })
@@ -309,15 +312,15 @@ export default {
       <div class="column is-one-half" :class="isMobile ? 'has-text-centered' : ''">
         <p class="title">{{ vehicle.nickname }} - {{ vehicle.registration }}</p>
         <p class="subtitle">
-          {{ [vehicle.make, vehicle.model, this.$t('fuel.' + vehicle.fuelTypeDetail.key)].join(' | ') }}
+          {{ [vehicle.make, vehicle.model, $t('fuel.' + vehicle.fuelTypeDetail.key)].join(' | ') }}
 
           <template v-if="users.length > 1">
-            | {{ $t("sharedwith") }} :
+            | {{ $t('sharedwith') }} :
             {{
               users
                 .map((x) => {
                   if (x.userId === me.id) {
-                    return this.$t('you')
+                    return $t('you')
                   } else {
                     return x.name
                   }
@@ -328,8 +331,8 @@ export default {
         </p>
       </div>
       <div :class="(!isMobile ? 'has-text-right ' : '') + 'column is-one-half buttons'">
-        <b-button type="is-primary" tag="router-link" :to="`/vehicles/${vehicle.id}/fillup`">{{ this.$t('addfillup') }}</b-button>
-        <b-button type="is-primary" tag="router-link" :to="`/vehicles/${vehicle.id}/expense`">{{ this.$t('addexpense') }}</b-button>
+        <b-button type="is-primary" tag="router-link" :to="`/vehicles/${vehicle.id}/fillup`">{{ $t('addfillup') }}</b-button>
+        <b-button type="is-primary" tag="router-link" :to="`/vehicles/${vehicle.id}/expense`">{{ $t('addexpense') }}</b-button>
         <b-button
           v-if="vehicle.isOwner"
           tag="router-link"
@@ -339,9 +342,8 @@ export default {
             props: { vehicle: vehicle },
             params: { id: vehicle.id },
           }"
-        >
-          <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
-        ></b-button>
+        ><b-icon size="is-small" pack="fas" icon="edit" type="is-info"> </b-icon>
+      </b-button>
         <b-button v-if="vehicle.isOwner" :title="$t('sharevehicle')" @click="showShareVehicleModal">
           <b-icon pack="fas" icon="user-friends" type="is-info"> </b-icon
         ></b-button>
@@ -362,46 +364,47 @@ export default {
       <h1 class="title is-4">{{ $t('pastfillups') }}</h1>
 
       <b-table :data="fillups" hoverable mobile-cards :detailed="isMobile" detail-key="id" paginated per-page="10">
-        <b-table-column v-slot="props" field="date" :label="this.$t('date')" :td-attrs="columnTdAttrs" sortable date>
+        <b-table-column v-slot="props" field="date" :label="$t('date')" :td-attrs="columnTdAttrs" sortable date>
           {{ formatDate(props.row.date) }}
         </b-table-column>
-        <b-table-column v-slot="props" field="fuelSubType" :label="this.$t('fuelsubtype')" :td-attrs="columnTdAttrs">
+        <b-table-column v-slot="props" field="fuelSubType" :label="$t('fuelsubtype')" :td-attrs="columnTdAttrs">
           {{ props.row.fuelSubType }}
         </b-table-column>
-        <b-table-column v-slot="props" field="fuelQuantity" :label="this.$t('quantity')" :td-attrs="hiddenMobile" numeric>
+        <b-table-column v-slot="props" field="fuelQuantity" :label="$t('quantity')" :td-attrs="hiddenMobile" numeric>
           {{ `${props.row.fuelQuantity} ${$t('unit.short.' + props.row.fuelUnitDetail.key)}` }}
         </b-table-column>
         <b-table-column
           v-slot="props"
           field="perUnitPrice"
-          :label="this.$t('per', { '0': this.$t('price'), '1': this.$t('unit.short.' + vehicle.fuelUnitDetail.key) })"
+          :label="$t('per', { '0': $t('price'), '1': $t('unit.short.' + vehicle.fuelUnitDetail.key) })"
           :td-attrs="hiddenMobile"
           numeric
           sortable
         >
           {{ `${formatCurrency(props.row.perUnitPrice, props.row.currency)}` }}
         </b-table-column>
-        <b-table-column v-if="isMobile" v-slot="props" field="totalAmount" :label="this.$t('total')" :td-attrs="hiddenDesktop" sortable numeric>
+        <b-table-column v-if="isMobile" v-slot="props" field="totalAmount" :label="$t('total')" :td-attrs="hiddenDesktop" sortable numeric>
           {{ `${me.currency} ${props.row.totalAmount}` }} ({{ `${props.row.fuelQuantity} ${$t('unit.short.' + props.row.fuelUnitDetail.key)}` }} @
           {{ `${me.currency} ${props.row.perUnitPrice}` }})
         </b-table-column>
-        <b-table-column v-if="!isMobile" v-slot="props" field="totalAmount" :label="this.$t('total')" :td-attrs="hiddenMobile" sortable numeric>
+        <b-table-column v-if="!isMobile" v-slot="props" field="totalAmount" :label="$t('total')" :td-attrs="hiddenMobile" sortable numeric>
           {{ `${formatCurrency(props.row.totalAmount, props.row.currency)}` }}
         </b-table-column>
-        <b-table-column v-slot="props" width="20" field="isTankFull" :label="this.$t('fulltank')" :td-attrs="hiddenMobile">
+        <b-table-column v-slot="props" width="20" field="isTankFull" :label="$t('fulltank')" :td-attrs="hiddenMobile">
           <b-icon pack="fas" :icon="props.row.isTankFull ? 'check' : 'times'" type="is-info"> </b-icon>
         </b-table-column>
-        <b-table-column v-slot="props" field="odoReading" :label="this.$t('odometer')" :td-attrs="hiddenMobile" numeric>
+        <b-table-column v-slot="props" field="odoReading" :label="$t('odometer')" :td-attrs="hiddenMobile" numeric>
           {{ `${props.row.odoReading} ${$t('unit.short.' + me.distanceUnitDetail.key)}` }}
         </b-table-column>
-        <b-table-column v-slot="props" field="fillingStation" :label="this.$t('gasstation')" :td-attrs="hiddenMobile">
+        <b-table-column v-slot="props" field="fillingStation" :label="$t('gasstation')" :td-attrs="hiddenMobile">
           {{ `${props.row.fillingStation}` }}
         </b-table-column>
-        <b-table-column v-slot="props" field="userId" :label="this.$t('by')" :td-attrs="hiddenMobile">
+        <b-table-column v-slot="props" field="userId" :label="$t('by')" :td-attrs="hiddenMobile">
           {{ `${props.row.user.name}` }}
         </b-table-column>
         <b-table-column v-slot="props">
           <b-button
+            size="is-small"
             type="is-ghost"
             tag="router-link"
             :to="{
@@ -412,7 +415,11 @@ export default {
           >
             <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
           ></b-button>
-          <b-button type="is-ghost" :title="$t('deletefillup')" @click="deleteFillup(props.row.id)">
+          <b-button 
+            size="is-small" 
+            type="is-ghost"
+            :title="$t('deletefillup')"
+             @click="deleteFillup(props.row.id)">
             <b-icon pack="fas" icon="trash" type="is-danger"> </b-icon
           ></b-button>
         </b-table-column>
@@ -427,26 +434,27 @@ export default {
       <h1 class="title is-4">{{ $t('expenses') }}</h1>
 
       <b-table :data="expenses" hoverable mobile-cards paginated per-page="10">
-        <b-table-column v-slot="props" field="date" :label="this.$t('date')" :td-attrs="columnTdAttrs" date>
+        <b-table-column v-slot="props" field="date" :label="$t('date')" :td-attrs="columnTdAttrs" date>
           {{ formatDate(props.row.date) }}
         </b-table-column>
-        <b-table-column v-slot="props" field="expenseType" :label="this.$t('expensetype')">
+        <b-table-column v-slot="props" field="expenseType" :label="$t('expensetype')">
           {{ `${props.row.expenseType}` }}
         </b-table-column>
 
-        <b-table-column v-slot="props" field="amount" :label="this.$t('total')" :td-attrs="hiddenMobile" sortable numeric>
+        <b-table-column v-slot="props" field="amount" :label="$t('total')" :td-attrs="hiddenMobile" sortable numeric>
           {{ `${formatCurrency(props.row.amount, props.row.currency)}` }}
         </b-table-column>
 
-        <b-table-column v-slot="props" field="odoReading" :label="this.$t('odometer')" :td-attrs="columnTdAttrs" numeric>
+        <b-table-column v-slot="props" field="odoReading" :label="$t('odometer')" :td-attrs="columnTdAttrs" numeric>
           {{ `${props.row.odoReading} ${$t('unit.short.' + me.distanceUnitDetail.key)}` }}
         </b-table-column>
 
-        <b-table-column v-slot="props" field="userId" :label="this.$t('by')" :td-attrs="columnTdAttrs">
+        <b-table-column v-slot="props" field="userId" :label="$t('by')" :td-attrs="columnTdAttrs">
           {{ `${props.row.user.name}` }}
         </b-table-column>
         <b-table-column v-slot="props">
           <b-button
+            size="is-small"
             type="is-ghost"
             tag="router-link"
             :to="{
@@ -457,7 +465,7 @@ export default {
           >
             <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
           ></b-button>
-          <b-button type="is-ghost" :title="$t('deleteexpense')" @click="deleteExpense(props.row.id)">
+          <b-button size="is-small" type="is-ghost" :title="$t('deleteexpense')" @click="deleteExpense(props.row.id)">
             <b-icon pack="fas" icon="trash" type="is-danger"> </b-icon
           ></b-button>
         </b-table-column>
@@ -467,7 +475,9 @@ export default {
     <br />
     <div class="box">
       <div class="columns">
-        <div class="column is-three-quarters"> <h1 class="title is-4">{{ $t('attachments') }}</h1></div>
+        <div class="column is-three-quarters">
+          <h1 class="title is-4">{{ $t('attachments') }}</h1></div
+        >
         <div class="column buttons">
           <b-button type="is-primary" @click="showAttachmentForm = true">
             {{ $t('addattachment') }}
@@ -492,18 +502,18 @@ export default {
                   </b-upload>
                 </b-field>
                 <b-field>
-                  <b-input v-model="title" required :placeholder="this.$t('labelforfile')"></b-input>
+                  <b-input v-model="title" required :placeholder="$t('labelforfile')"></b-input>
                 </b-field>
 
                 <b-field class="buttons">
-                  <b-button tag="input" native-type="submit" :disabled="tryingToUpload" type="is-primary" label="Upload File" value="Upload File">
+                  <b-button tag="button" native-type="submit" :disabled="tryingToUpload" type="is-primary" label="Upload File" value="Upload File">
                   </b-button>
                   <b-button
-                    tag="input"
+                    tag="button"
                     native-type="submit"
                     :disabled="tryingToUpload"
                     type="is-danger"
-                    label="Upload File"
+                    label="Cancel"
                     value="Cancel"
                     @click="showAttachmentForm = false"
                   >
@@ -516,14 +526,14 @@ export default {
       </div>
 
       <b-table :data="attachments" hoverable mobile-cards>
-        <b-table-column v-slot="props" field="title" :label="this.$t('title')" :td-attrs="columnTdAttrs">
+        <b-table-column v-slot="props" field="title" :label="$t('title')" :td-attrs="columnTdAttrs">
           {{ `${props.row.title}` }}
         </b-table-column>
 
-        <b-table-column v-slot="props" field="originalName" :label="this.$t('name')" :td-attrs="columnTdAttrs">
+        <b-table-column v-slot="props" field="originalName" :label="$t('name')" :td-attrs="columnTdAttrs">
           {{ `${props.row.originalName}` }}
         </b-table-column>
-        <b-table-column v-slot="props" field="id" :label="this.$t('download')" :td-attrs="columnTdAttrs">
+        <b-table-column v-slot="props" field="id" :label="$t('download')" :td-attrs="columnTdAttrs">
           <b-button tag="a" :href="`/api/attachments/${props.row.id}/file?access_token=${currentUser.token}`" :download="props.row.originalName">
             <b-icon type="is-primary" icon="download"></b-icon>
           </b-button>
@@ -533,7 +543,9 @@ export default {
     </div>
     <div class="box">
       <div class="columns">
-        <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">{{ $t('statistics') }}</h1></div>
+        <div class="column" :class="isMobile ? 'has-text-centered' : ''">
+          <h1 class="title">{{ $t('statistics') }}</h1></div
+        >
         <div class="column">
           <div class="columns is-pulled-right is-medium">
             <div class="column">