diff --git a/README.md b/README.md
index 3bd7e5a..554532c 100644
--- a/README.md
+++ b/README.md
@@ -10,15 +10,14 @@ vue add kingscode-scaffold
 npm run serve
 ```
 
-Mind that some of the choices you make in the `vue create my-app` and 
-later in the `vue add vuetify` will be overwritten by vuetify or the kings code scaffold.
+Mind that some choices you make in the `vue create my-app` and 
+later in the `vue add vuetify` will be overwritten by vuetify, or the kings code scaffold.
 
 
 ## Configuration
 
-```
-Notice: it does not matter which choice you make with options that are not documented.
- ```
+> Notice: it does not matter which choice you make with options that are not documented.
+
 
 ### Vue:
 We'd recommend you to choose
@@ -36,12 +35,7 @@ And then:
 The rest doesn't matter.
 
 ### Vuetify
-Configure:
-- Pre made templates will be overwritten, so keep it default
-- Custom properties
-- Font awesome 5 (this will be overwritten with font awesome pro)
-- Use a-la-carte components
-- Locale will be overwritten to dutch as default
+Choose recommended
 
 ### Kingscode scaffold
 This is our own scaffold, which you can use with our laravel API you can answer the questions
diff --git a/generator/index.js b/generator/index.js
index fc8b7ae..1256f10 100644
--- a/generator/index.js
+++ b/generator/index.js
@@ -5,13 +5,14 @@ module.exports = (api, options) => {
   api.extendPackage({
     dependencies: {
       'axios': '^0.19.2',
-      'dayjs': '^1.8.19',
-      'vuex': '^3.1.2',
+      'dayjs': '^1.8.34',
+      'vuex': '^3.4.0',
       'vuex-persistedstate': '^2.5.4',
-      'lodash.clonedeep': '^4.5.0',
       'css-vars-ponyfill': '^2.1.2',
       'qs': '^6.9.4',
       'vue-router': '3.3.4',
+      'vue-i18n': '^8.21.0',
+
     },
   });
   if (options.plugins.includes('fontawesomepro')) {
@@ -28,15 +29,6 @@ module.exports = (api, options) => {
     });
   }
 
-  if (options.useCrud) {
-    api.extendPackage({
-      dependencies: {
-        '@kingscode/vuetify-resource': '^2.0.3',
-      },
-    });
-    api.render('./templates/Crud', options);
-  }
-
   if (options.useGithubDeployments) {
     api.render('./templates/Deployment', options);
   }
@@ -51,6 +43,15 @@ module.exports = (api, options) => {
     api.render('./templates/Authorisation', options);
   }
 
+  if (options.useCrud) {
+    api.extendPackage({
+      dependencies: {
+        '@kingscode/vuetify-resource': '^2.0.3',
+      },
+    });
+    api.render('./templates/Crud', options);
+  }
+
   if (options.plugins.includes('sentry')) {
     api.extendPackage({
       dependencies: {
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
index 90bdfed..628d706 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
@@ -2,7 +2,7 @@ import { post } from '../../implementation/app';
 
 export default function (email, password) {
   return post('auth/login', {
-    email: email,
-    password: password,
+    email,
+    password,
   });
 }
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js
deleted file mode 100644
index c64d13c..0000000
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { post } from '../../implementation/app';
-
-function passwordForgotten(email) {
-  return post('password/forgotten', {
-    email: email,
-  });
-}
-
-function passwordReset(token, email, password, passwordConfirmation) {
-  return post('password/reset', {
-    token: token,
-    email: email,
-    password: password,
-    password_confirmation: passwordConfirmation,
-  });
-}
-
-export {
-  passwordForgotten,
-  passwordReset,
-};
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/password/forgotten.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/password/forgotten.js
new file mode 100644
index 0000000..f3c75c5
--- /dev/null
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/password/forgotten.js
@@ -0,0 +1,7 @@
+import { post } from '@/api/implementation/app';
+
+export default function (email) {
+  return post('password/forgotten', {
+    email,
+  });
+}
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/password/reset.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/password/reset.js
new file mode 100644
index 0000000..f3578d0
--- /dev/null
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/password/reset.js
@@ -0,0 +1,10 @@
+import { post } from '@/api/implementation/app';
+
+export default async function (email, token, password, passwordConfirmation) {
+  return post('password/reset', {
+    email,
+    token,
+    password,
+    passwordConfirmation,
+  });
+}
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
index 65259aa..de2560e 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
@@ -1,22 +1,24 @@
 import { post } from '../../implementation/app';
 
-function register(email, name) {
-  return post('registration', {
+function verify(token, email, password, passwordConfirmation) {
+  return post('registration/verify', {
+    token,
     email,
-    name,
+    password,
+    passwordConfirmation,
   });
 }
 
-function verify(token, email, password, passwordConfirmation) {
-  return post('registration/verify', {
-    token: token,
-    email: email,
-    password: password,
-    password_confirmation: passwordConfirmation,
+function acceptInvitation(email, token, password, passwordConfirmation) {
+  return post('invitation/accept', {
+    email,
+    password,
+    passwordConfirmation,
+    token,
   });
 }
 
 export {
-  register,
   verify,
+  acceptInvitation,
 };
diff --git a/generator/templates/Authorisation/src/api/endpoints/password/reset.js b/generator/templates/Authorisation/src/api/endpoints/password/reset.js
index 6897a25..54e65fa 100644
--- a/generator/templates/Authorisation/src/api/endpoints/password/reset.js
+++ b/generator/templates/Authorisation/src/api/endpoints/password/reset.js
@@ -2,9 +2,9 @@ import { post } from '../../implementation/app';
 
 export default async function (email, token, password, passwordConfirmation) {
   return post('registration', {
-    email: email,
-    token: token,
-    password: password,
-    password_confirmation: passwordConfirmation,
+    email,
+    token,
+    password,
+    passwordConfirmation,
   });
 }
diff --git a/generator/templates/Authorisation/src/api/endpoints/user.js b/generator/templates/Authorisation/src/api/endpoints/user.js
deleted file mode 100644
index c54a7f3..0000000
--- a/generator/templates/Authorisation/src/api/endpoints/user.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import axios, { getPaginated } from '../implementation/app';
-
-function index(page, perPage, search, sortBy, descending, params) {
-  return getPaginated('user', page, perPage, search, sortBy, descending, params);
-}
-
-/**
- * @param id {number}
- */
-function show(id) {
-  return axios.get(`user/${id}`);
-}
-
-/**
- * @param user {User}
- */
-function create(user) {
-  return axios.post('user', user);
-}
-
-/**
- * @param user {User}
- */
-function update(user) {
-  return axios.put(`user/${user.id}`, user);
-}
-
-/**
- * @param userId {number}
- */
-function destroy(userId) {
-  return axios.delete(`user/${userId}`);
-}
-
-export {
-  index,
-  show,
-  create,
-  update,
-  destroy,
-};
diff --git a/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue b/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue
deleted file mode 100644
index 7091b6b..0000000
--- a/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <v-card height="100%">
-    <v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
-      <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
-      <v-card-text>
-        <v-alert
-            :type="alertType"
-            :value="!!alertMessage.length"
-            class="mb-10"
-            transition="fade-transition"
-        >
-          {{ alertMessage }}
-        </v-alert>
-        <VTextField
-            :rules="[(v) => !!v || 'E-Mail is verplicht']"
-            label="E-Mail"
-            tabindex="11"
-            v-model="form.email"
-        />
-      </v-card-text>
-      <v-card-actions>
-        <VSpacer/>
-        <v-btn :loading="isLoading" color="primary" tabindex="12" type="submit">Wachtwoord aanvragen</v-btn>
-      </v-card-actions>
-    </v-form>
-  </v-card>
-</template>
-
-<script>
-import ForgottenRequest from '../../api/endpoints/password/forgotten.js';
-
-export default {
-  name: 'PasswordForgottenCard',
-  data() {
-    return {
-      alertType: 'success',
-      alertMessage: '',
-      isLoading: false,
-      isValid: false,
-      form: {
-        email: '',
-      },
-    };
-  },
-  methods: {
-    handleRegister() {
-      this.$refs.form.validate();
-
-      if (!this.isValid) return;
-
-      this.isLoading = true;
-      this.alertMessage = '';
-      this.alertType = 'error';
-
-      ForgottenRequest(this.form.email)
-          .then(() => {
-            this.alertMessage = 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.';
-            this.alertType = 'success';
-          })
-          .catch(() => this.alertMessage = 'De ingevulde gegevens kloppen niet.')
-          .finally(() => this.isLoading = false);
-    },
-  },
-};
-</script>
diff --git a/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue b/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue
deleted file mode 100644
index 201a888..0000000
--- a/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <v-card height="100%">
-    <v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
-      <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
-      <v-card-text>
-        <v-alert
-            :type="alertType"
-            :value="!!alertMessage.length"
-            class="mb-10"
-            transition="fade-transition"
-        >
-          {{ alertMessage }}
-        </v-alert>
-        <VTextField
-            :rules="[(v) => !!v || 'E-Mail is verplicht']"
-            label="E-Mail"
-            tabindex="1"
-            v-model="form.email"
-        />
-        <VTextField
-            :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
-            :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
-            :type="showPassword ? 'text' : 'password'"
-            @click:append="showPassword = !showPassword"
-            label="Wachtwoord"
-            tabindex="2"
-            v-model="form.password"
-        />
-        <VTextField
-            :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
-            :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
-            :type="showPassword ? 'text' : 'password'"
-            @click:append="showPassword = !showPassword"
-            label="Wachtwoord"
-            tabindex="3"
-            v-model="form.passwordConfirmation"
-        />
-      </v-card-text>
-      <v-card-actions>
-        <VSpacer/>
-        <v-btn :loading="isLoading" color="primary" tabindex="4" type="submit">Wachtwoord aanvragen</v-btn>
-      </v-card-actions>
-    </v-form>
-  </v-card>
-</template>
-
-<script>
-import resetRequest from '../../api/endpoints/password/reset.js';
-import { getRateLimitMinutes } from '../../api/util/response.js';
-
-export default {
-  name: 'PasswordResetCard',
-  props: {
-    token: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      alertType: 'success',
-      alertMessage: '',
-      isLoading: false,
-      isValid: false,
-      form: {
-        email: '',
-        password: '',
-        passwordConfirmation: '',
-      },
-      showPassword: false,
-    };
-  },
-  methods: {
-    handleRegister() {
-      this.$refs.form.validate();
-
-      if (!this.isValid) return;
-
-      this.isLoading = true;
-      this.alertType = 'error';
-      this.errorMessage = '';
-
-      resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
-          .then(() => {
-            this.alertType = 'success';
-            this.alertMessage = 'Je wachtwoord is opnieuw ingesteld, je kan nu inloggen.';
-          })
-          .catch(error => {
-            const response = error.response;
-            const status = response.status;
-
-            if (status === 429) {
-              this.alertMessage =
-                  `Je hebt tevaak een foutieve login poging gedaan. Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
-            } else if (status === 400) {
-              this.alertMessage =
-                  'Deze wachtwoord reset pagina is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie';
-            }
-
-            this.$refs.form.validate();
-          })
-          .finally(() => this.isLoading = false);
-    },
-  },
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue b/generator/templates/Authorisation/src/components/authorisation/LoginCard.vue
similarity index 53%
rename from generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
rename to generator/templates/Authorisation/src/components/authorisation/LoginCard.vue
index 34d2764..8e22197 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
+++ b/generator/templates/Authorisation/src/components/authorisation/LoginCard.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card height="100%">
     <v-form @submit.prevent="handleLogin()" ref="form" v-model="isValid">
-      <v-card-title class="title">Ik wil inloggen</v-card-title>
+      <VCardTitle class="title" v-text="$t('authorisation.login.title')"/>
       <v-card-text>
         <v-alert :value="!!errorMessage.length"
                  class="mb-10"
@@ -10,43 +10,58 @@
         >
           {{ errorMessage }}
         </v-alert>
-        <VTextField
-            :rules="[(v) => !!v || 'E-Mail is verplicht']"
-            label="E-Mail"
-            tabindex="1"
-            v-model="form.email"
-        />
-        <VTextField
-            :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
-            :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
-            :type="showPassword ? 'text' : 'password'"
-            @click:append="showPassword = !showPassword"
-            label="Wachtwoord"
-            tabindex="2"
-            v-model="form.password"
-        />
+        <k-field-group language-prefix="authorisation.fields">
+          <KTextField field="email"
+                      autofocus
+                      tabindex="1"
+                      v-model="form.email"
+                      autocomplete="username"
+          />
+          <KTextField :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword = !showPassword"
+                      field="password"
+                      autocomplete="current-password"
+                      tabindex="2"
+                      v-model="form.password"
+          />
+        </k-field-group>
       </v-card-text>
       <v-card-actions>
         <VSpacer/>
-        <v-btn :to="{name: 'password.forgotten'}" color="primary" tabindex="4" text>Wachtwoord vergeten</v-btn>
-        <v-btn :loading="isLoading" color="primary" tabindex="3" type="submit">Inloggen</v-btn>
+        <VBtn :to="{name: 'password.forgotten'}"
+              color="primary"
+              tabindex="4"
+              text
+              v-text="$t('authorisation.actions.passwordForgotten')"/>
+        <VBtn :loading="isLoading"
+              color="primary"
+              tabindex="3"
+              type="submit"
+              v-text="$t('authorisation.actions.login')"/>
       </v-card-actions>
     </v-form>
 
     <v-overlay class="text-center" v-model="isRedirecting">
       <VProgressCircular indeterminate size="64"/>
-      <div class="mt-5">Je bent ingelogd, we sturen je nu door.</div>
+      <div class="mt-5" v-text="$t('authorisation.login.successMessage')"></div>
     </v-overlay>
   </v-card>
 </template>
 
 <script>
+import { getRateLimitMinutes } from '@/api/util/response';
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
 import { mapGetters } from 'vuex';
 import LoginRequest from '../../api/endpoints/authorisation/login';
-import { getRateLimitMinutes } from '../../api/util/response.js';
 
 export default {
   name: 'LoginCard',
+  components: {
+    KFieldGroup,
+    KTextField,
+  },
   data() {
     return {
       errorMessage: '',
@@ -69,33 +84,33 @@ export default {
     handleLogin() {
       this.isLoading = true;
       LoginRequest(this.form.email, this.form.password)
-          .then(res => {
+          .then((res) => {
             this.isRedirecting = true;
             this.redirectToAuthDispense(res.data.data.token);
           })
-          .catch(err => {
-            const response = err.response;
-            const status = response.status;
+          .catch((err) => {
+            const { response } = err;
+            const { status } = response;
 
             if (status === 429) {
-              this.errorMessage =
-                  `Je hebt te veel foutieve inlog pogingen gedaan.
-                             Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
+              this.errorMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
             } else {
               this.errorMessage = this.findError('email');
             }
           })
-          .finally(() => this.isLoading = false);
+          .finally(() => {
+            this.isLoading = false;
+          });
     },
     redirectToAuthDispense(token) {
       const form = document.createElement('form');
 
       form.method = 'POST';
-      form.action = process.env.VUE_APP_ROOT_API + '/auth/dispense';
+      form.action = `${process.env.VUE_APP_ROOT_API}/auth/dispense`;
 
       const redirectUriElement = document.createElement('input');
       redirectUriElement.name = 'redirect_uri';
-      redirectUriElement.value = 'home';
+      redirectUriElement.value = 'dashboard';
       form.appendChild(redirectUriElement);
 
       const emailElement = document.createElement('input');
diff --git a/generator/templates/Authorisation/src/components/authorisation/PasswordForgottenCard.vue b/generator/templates/Authorisation/src/components/authorisation/PasswordForgottenCard.vue
new file mode 100644
index 0000000..d74e38a
--- /dev/null
+++ b/generator/templates/Authorisation/src/components/authorisation/PasswordForgottenCard.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-card height="100%">
+    <v-form ref="form" v-model="isValid" @submit.prevent="handleRegister()">
+      <VCardTitle class="title" v-text="$t('authorisation.passwordForgotten.title')"/>
+      <v-card-text>
+        <v-alert
+            :type="alertType"
+            :value="!!alertMessage.length"
+            class="mb-10"
+            transition="fade-transition"
+        >
+          {{ alertMessage }}
+        </v-alert>
+        <k-field-group language-prefix="authorisation.fields">
+          <KTextField
+              v-model="form.email"
+              autocomplete="username"
+              autofocus
+              field="email"
+              tabindex="1"
+          />
+        </k-field-group>
+      </v-card-text>
+      <v-card-actions>
+        <VSpacer/>
+        <VBtn
+            :to="{name:'login'}"
+            color="primary"
+            text
+            v-text="$t('actions.back')"/>
+        <VBtn :loading="isLoading"
+              color="primary"
+              tabindex="2"
+              type="submit"
+              v-text="$t('authorisation.passwordForgotten.request')"/>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<script>
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
+import ForgottenRequest from '../../api/endpoints/authorisation/password/forgotten';
+
+export default {
+  name: 'PasswordForgottenCard',
+  components: {
+    KFieldGroup,
+    KTextField,
+  },
+  data() {
+    return {
+      alertType: 'success',
+      alertMessage: '',
+      isLoading: false,
+      isValid: false,
+      form: {
+        email: '',
+      },
+    };
+  },
+  methods: {
+    handleRegister() {
+      this.$refs.form.validate();
+
+      if (!this.isValid) return;
+
+      this.isLoading = true;
+      this.alertMessage = '';
+      this.alertType = 'error';
+
+      ForgottenRequest(this.form.email)
+          .then(() => {
+            this.alertMessage = this.$t('authorisation.passwordForgotten.successMessage');
+            this.alertType = 'success';
+          })
+          .catch(() => {
+            this.alertMessage = this.$t('errors.422');
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Authorisation/src/components/authorisation/PasswordResetCard.vue b/generator/templates/Authorisation/src/components/authorisation/PasswordResetCard.vue
new file mode 100644
index 0000000..f4c040a
--- /dev/null
+++ b/generator/templates/Authorisation/src/components/authorisation/PasswordResetCard.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-card height="100%">
+    <v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
+      <VCardTitle class="title" v-text="$t('authorisation.passwordReset.title')"/>
+      <v-card-text>
+        <v-alert
+            :type="alertType"
+            :value="!!alertMessage.length"
+            class="mb-10"
+            transition="fade-transition"
+        >
+          {{ alertMessage }}
+        </v-alert>
+        <k-field-group language-prefix="authorisation.fields">
+          <KTextField
+              field="email"
+              tabindex="1"
+              v-model="form.email"
+          />
+          <KTextField
+              :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
+              :type="showPassword ? 'text' : 'password'"
+              @click:append="showPassword = !showPassword"
+              field="password"
+              tabindex="2"
+              v-model="form.password"
+          />
+          <KTextField
+              :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
+              :type="showPassword ? 'text' : 'password'"
+              @click:append="showPassword = !showPassword"
+              field="password"
+              tabindex="3"
+              v-model="form.passwordConfirmation"
+          />
+        </k-field-group>
+      </v-card-text>
+      <v-card-actions>
+        <VSpacer/>
+        <VBtn :loading="isLoading" color="primary" tabindex="4" type="submit" v-text="$t('actions.save')"/>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<script>
+import { getRateLimitMinutes } from '@/api/util/response.js';
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
+import resetRequest from '../../api/endpoints/authorisation/password/reset';
+
+export default {
+  name: 'PasswordResetCard',
+  components: {
+    KTextField,
+    KFieldGroup,
+  },
+  props: {
+    token: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      alertType: 'success',
+      alertMessage: '',
+      isLoading: false,
+      isValid: false,
+      form: {
+        email: '',
+        password: '',
+        passwordConfirmation: '',
+      },
+      showPassword: false,
+    };
+  },
+  created() {
+    this.form.email = this.$route.query.email;
+  },
+  methods: {
+    handleRegister() {
+      this.$refs.form.validate();
+
+      if (!this.isValid) return;
+
+      this.isLoading = true;
+      this.alertType = 'error';
+      this.errorMessage = '';
+
+      resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
+          .then(() => {
+            this.alertType = 'success';
+            this.alertMessage = this.$t('authorisation.passwordReset.successMessage');
+          })
+          .catch((error) => {
+            this.alertType = 'error';
+            const { response } = error;
+            const { status } = response;
+
+            if (status === 429) {
+              this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
+            } else if (status === 400) {
+              this.alertMessage = this.$t('authorisation.passwordReset.errorMessage');
+            }
+
+            this.$refs.form.validate();
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue b/generator/templates/Authorisation/src/components/authorisation/RegisterCard.vue
similarity index 91%
rename from generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
rename to generator/templates/Authorisation/src/components/authorisation/RegisterCard.vue
index f2944da..a4b73bb 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
+++ b/generator/templates/Authorisation/src/components/authorisation/RegisterCard.vue
@@ -4,36 +4,36 @@
       <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
       <v-card-text>
         <v-alert
-            :type="alertType"
             :value="!!alertMessage.length"
             class="mb-10"
             transition="fade-transition"
+            :type="alertType"
         >
           {{ alertMessage }}
         </v-alert>
         <VTextField
             :rules="[(v) => !!v || 'Naam is verplicht']"
             label="Naam"
-            tabindex="10"
             v-model="form.name"
+            tabindex="10"
         />
         <VTextField
             :rules="[(v) => !!v || 'E-Mail is verplicht']"
             label="E-Mail"
-            tabindex="11"
             v-model="form.email"
+            tabindex="11"
         />
       </v-card-text>
       <v-card-actions>
         <VSpacer/>
-        <v-btn :loading="isLoading" color="primary" tabindex="12" type="submit">Registreren</v-btn>
+        <v-btn tabindex="12" type="submit" color="primary" :loading="isLoading">Registreren</v-btn>
       </v-card-actions>
     </v-form>
   </v-card>
 </template>
 
 <script>
-import { register } from '../../api/endpoints/authorisation/register.js';
+import { register } from '../../api/endpoints/authorisation/register';
 
 export default {
   name: 'RegisterCard',
@@ -68,7 +68,9 @@ export default {
             this.alertType = 'error';
             this.alertMessage = 'De ingevulde gegevens kloppen niet.';
           })
-          .finally(() => this.isLoading = false);
+          .finally(() => {
+            this.isLoading = false;
+          });
     },
   },
 };
diff --git a/generator/templates/Authorisation/src/locales/nl/authorisation.json b/generator/templates/Authorisation/src/locales/nl/authorisation.json
new file mode 100644
index 0000000..a827868
--- /dev/null
+++ b/generator/templates/Authorisation/src/locales/nl/authorisation.json
@@ -0,0 +1,38 @@
+{
+    "login": {
+        "title": "Inloggen",
+        "successMessage": "Je bent ingelogd, we sturen je nu door."
+    },
+    "registrationVerify": {
+        "title": "Registratie afronden",
+        "successMessage": "Je registratie is voltooid, je kunt nu inloggen.",
+        "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de registratie link uit je mail verlopen."
+    },
+    "passwordForgotten": {
+        "title": "Wachtwoord vergeten",
+        "successMessage": "Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.",
+        "request": "Wachtwoord aanvragen"
+    },
+    "passwordReset": {
+        "title": "Wachtwoord opnieuw instellen",
+        "successMessage": "Je wachtwoord is veranderd, je kunt nu inloggen.",
+        "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de wachtwoord reset link uit je mail verlopen.",
+        "request": "Wachtwoord aanvragen"
+    },
+    "invitationAccept": {
+        "title": "Uitnodiging accepteren",
+        "request": "Uitnodiging accepteren",
+        "successMessage": "Je account is geactiveerd, je kunt nu inloggen.",
+        "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de uitnodigings link uit je mail verlopen."
+    },
+    "fields": {
+        "email": "E-mail",
+        "password": "Wachtwoord",
+        "passwordConfirmation": "Wachtwoord herhalen"
+    },
+    "actions": {
+        "login": "Inloggen",
+        "passwordForgotten": "Wachtwoord vergeten",
+        "logout": "Uitloggen"
+    }
+}
diff --git a/generator/templates/Authorisation/src/guards/AuthorisationGuard.js b/generator/templates/Authorisation/src/router/guards/AuthorisationGuard.js
similarity index 84%
rename from generator/templates/Authorisation/src/guards/AuthorisationGuard.js
rename to generator/templates/Authorisation/src/router/guards/AuthorisationGuard.js
index fc2856d..86f12da 100644
--- a/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
+++ b/generator/templates/Authorisation/src/router/guards/AuthorisationGuard.js
@@ -1,4 +1,4 @@
-import store from '../store';
+import store from '@/store';
 
 export default function (to, from, next) {
   if (!store.getters['authorisation/isLoggedIn']) {
diff --git a/generator/templates/Authorisation/src/router/routes/authorisation.js b/generator/templates/Authorisation/src/router/routes/authorisation.js
new file mode 100644
index 0000000..26f1dee
--- /dev/null
+++ b/generator/templates/Authorisation/src/router/routes/authorisation.js
@@ -0,0 +1,36 @@
+export default {
+  path: '',
+  component: () => import('@/templates/Authorisation'),
+  children: [
+    {
+      path: 'login',
+      name: 'login',
+      component: () => import('@/views/authorisation/Login.vue'),
+    },
+    {
+      path: 'auth/callback',
+      name: 'auth.callback',
+      component: () => import('@/views/authorisation/AuthorisationCallback.vue'),
+    },
+    {
+      path: 'password/forgotten',
+      name: 'password.forgotten',
+      component: () => import('@/views/authorisation/PasswordForgotten.vue'),
+    },
+    {
+      path: 'password/reset/:token',
+      name: 'password.reset',
+      component: () => import('@/views/authorisation/PasswordReset.vue'),
+    },
+    {
+      path: 'invitation/accept/:token',
+      name: 'invitation.accept',
+      component: () => import('@/views/authorisation/InvitationAccept.vue'),
+    },
+    {
+      path: 'registration/verify',
+      name: 'registration.verify',
+      component: () => import('@/views/authorisation/RegistrationVerify.vue'),
+    },
+  ],
+};
diff --git a/generator/templates/Authorisation/src/views/InvitationAccept.vue b/generator/templates/Authorisation/src/views/InvitationAccept.vue
deleted file mode 100644
index 55c196b..0000000
--- a/generator/templates/Authorisation/src/views/InvitationAccept.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <v-form @submit.prevent="handleAccept()" ref="form">
-    <v-card>
-      <v-card-text>
-        <img :src="require('../assets/logo.png')" class="logo">
-        <div v-if="!isLoading">
-          <v-alert
-              :value="!!firstValidGlobalError.length"
-              class="mb-10"
-              transition="fade-transition"
-              type="error"
-          >
-            {{ firstValidGlobalError }}
-          </v-alert>
-          <VTextField
-              :rules="[(v) => !!v || 'E-Mail is verplicht']"
-              label="E-Mail"
-              v-model="email"
-          />
-          <VTextField
-              :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
-              :rules="[(v) => !!v || 'Wachtwoord is verplicht', () => serverError('password')]"
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword = !showPassword"
-              label="Wachtwoord"
-              v-model="password"
-          />
-          <VTextField
-              :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
-              :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword = !showPassword"
-              label="Wachtwoord"
-              v-model="passwordConfirmation"
-          />
-        </div>
-        <div class="text-center" v-else>
-          <VProgressCircular
-              :size="70"
-              :width="7"
-              color="accent"
-              indeterminate
-          />
-        </div>
-      </v-card-text>
-      <v-card-actions>
-        <VSpacer/>
-        <v-btn color="accent" type="submit">Uitnodiging accepteren</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-form>
-</template>
-
-<script lang="js">
-import { mapGetters } from 'vuex';
-import axios from '../api/implementation/app';
-
-export default {
-  name: 'InvitationAccept',
-  data() {
-    return {
-      isLoading: false,
-      email: '',
-      password: '',
-      passwordConfirmation: '',
-      errorMessage: '',
-      showPassword: false,
-      errors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      isLoggedIn: 'authorisation/isLoggedIn',
-      firstError: 'error/first',
-      findError: 'error/find',
-    }),
-    firstValidGlobalError: vm => vm.errorMessage || vm.firstError,
-  },
-  created() {
-    if (this.isLoggedIn) {
-      this.$router.push({
-        name: 'home',
-      });
-    }
-    this.email = this.$route.query.email || '';
-  },
-  methods: {
-    handleAccept() {
-      this.$refs.form.validate();
-
-      this.isLoading = true;
-
-      axios.post('invitation/accept', {
-            email: this.email,
-            password: this.password,
-            password_confirmation: this.passwordConfirmation,
-            token: this.$route.params.token,
-          })
-          .then(() => this.$router.push({
-                name: 'login',
-              }),
-          )
-          .catch(error => {
-            const response = error.response;
-            const data = response.data;
-
-            if (response.status === 422) {
-              this.errors = data.errors || [];
-              process.nextTick(() => {
-                this.$refs.form.validate();
-              });
-            } else {
-              if (data.message) {
-                this.errorMessage = data.message;
-              } else {
-                this.errorMessage = 'Er ging iets mis';
-              }
-            }
-          })
-          .finally(() => this.isLoading = false);
-    },
-    serverError(name) {
-      return this.findError(name) || true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.logo {
-  display: block;
-  margin:  0 auto;
-}
-</style>
diff --git a/generator/templates/Authorisation/src/views/Verify.vue b/generator/templates/Authorisation/src/views/Verify.vue
deleted file mode 100644
index f3fcb48..0000000
--- a/generator/templates/Authorisation/src/views/Verify.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <v-row align="stretch" justify-md="center">
-    <v-col md="3">
-      <v-card height="100%">
-        <v-form @submit.prevent="onFormSubmit()" ref="form" v-model="isValid">
-          <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
-          <v-card-text>
-            <v-alert
-                :type="alertType"
-                :value="!!alertMessage.length"
-                text
-                transition="fade-transition"
-            >
-              {{ alertMessage }}
-            </v-alert>
-            <VTextField
-                :rules="[(v) => !!v || 'E-mailadres is verplicht', () => serverError('email')]"
-                filled
-                label="E-mailadres"
-                tabindex="0"
-                v-model="form.email"
-            />
-            <VTextField
-                :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
-                :rules="[(v) => !!v || 'Wachtwoord is verplicht', () => serverError('password')]"
-                :type="showPassword ? 'text' : 'password'"
-                @click:append="showPassword = !showPassword"
-                filled
-                label="Wachtwoord"
-                tabindex="1"
-                v-model="form.password"
-            />
-            <VTextField
-                :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
-                :rules="[(v) => !!v || 'Wachtwoord is verplicht', (v) => v === form.password || 'Wachtwoorden komen niet overeen', () => serverError('passwordConfirmation')]"
-                :type="showPassword ? 'text' : 'password'"
-                @click:append="showPassword = !showPassword"
-                filled
-                label="Wachtwoord nogmaals"
-                tabindex="2"
-                v-model="form.passwordConfirmation"
-            />
-          </v-card-text>
-          <v-card-actions>
-            <VSpacer/>
-            <v-btn :loading="isLoading" color="primary" tabindex="12" type="submit">Instellen</v-btn>
-          </v-card-actions>
-        </v-form>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-import { verify } from '../api/endpoints/authorisation/register.js';
-import { getRateLimitMinutes } from '../api/util/response.js';
-import { getFragment } from '../application/util/url.js';
-import BaseForm from '../components/BaseForm.vue';
-
-export default {
-  name: 'Verify',
-  extends: BaseForm,
-  data() {
-    return {
-      form: {
-        email: '',
-      },
-      isLoading: false,
-      alertType: 'success',
-      alertMessage: '',
-      valid: true,
-      showPassword: false,
-    };
-  },
-  created() {
-    this.form.email = getFragment('email');
-  },
-  methods: {
-    onFormSubmit() {
-      const token = getFragment('token');
-
-      if (!token) return; // what to do?
-
-      this.isLoading = true;
-
-      verify(token, this.form.email, this.form.password, this.form.passwordConfirmation)
-          .then(() => {
-            this.alertMessage = 'Je account is geactiveerd, je kunt nu inloggen.';
-            this.alertType = 'success';
-          })
-          .catch(error => {
-            const response = error.response;
-            const status = response.status;
-
-            if (status === 429) {
-              this.alertMessage = `Je hebt te vaak een foutieve activatie poging gedaan.
-                         Probeer het over ${getRateLimitMinutes(response)} minuten opnieuw`;
-              this.alertType = 'error';
-              return;
-            } else if (status === 400) {
-              this.alertMessage = 'De verificatie is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie.';
-              this.alertType = 'error';
-              return;
-            }
-            this.alertMessage = 'Niet alle velden zijn juist ingevuld';
-            this.alertType = 'error';
-            this.validate();
-          })
-          .finally(() => {
-            this.isLoading = false;
-          });
-    },
-  },
-};
-</script>
-=
diff --git a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue b/generator/templates/Authorisation/src/views/authorisation/AuthorisationCallback.vue
similarity index 89%
rename from generator/templates/Authorisation/src/views/AuthorisationCallback.vue
rename to generator/templates/Authorisation/src/views/authorisation/AuthorisationCallback.vue
index a36cdb1..6ae7dd9 100644
--- a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
+++ b/generator/templates/Authorisation/src/views/authorisation/AuthorisationCallback.vue
@@ -5,8 +5,8 @@
 </template>
 
 <script lang="js">
+import { getFragment } from '@/application/util/url';
 import { mapMutations } from 'vuex';
-import { getFragment } from '../application/util/url.js';
 
 export default {
   name: 'AuthorisationCallback',
@@ -15,8 +15,9 @@ export default {
       setAuthorisationToken: 'authorisation/setAuthorisationToken',
     }),
   },
-  created() {
+  async created() {
     const redirectUri = this.$route.query.redirect_uri;
+
     const token = getFragment('token');
 
     if (!token) throw new Error('AuthorisationCallback::created token hash not found');
diff --git a/generator/templates/Authorisation/src/views/authorisation/InvitationAccept.vue b/generator/templates/Authorisation/src/views/authorisation/InvitationAccept.vue
new file mode 100644
index 0000000..d3b5163
--- /dev/null
+++ b/generator/templates/Authorisation/src/views/authorisation/InvitationAccept.vue
@@ -0,0 +1,135 @@
+<template>
+  <v-row align="stretch" justify-md="center">
+    <v-col md="3">
+      <v-form @submit.prevent="handleAccept()" ref="form" v-model="isValid">
+        <v-card>
+          <VCardTitle class="title" v-text="$t('authorisation.invitationAccept.title')"/>
+          <v-card-text>
+            <v-alert
+                :value="!!alertMessage.length"
+                class="mb-10"
+                transition="fade-transition"
+                :type="alertType"
+            >
+              {{ alertMessage }}
+            </v-alert>
+
+            <k-field-group language-prefix="authorisation.fields">
+              <KTextField
+                  autocomplete="username"
+                  autofocus
+                  disabled
+                  field="email"
+                  tabindex="1"
+                  v-model="email"
+              />
+              <KTextField
+                  autocomplete="new-password"
+                  autofocus
+                  field="password"
+                  tabindex="1"
+                  type="password"
+                  v-model="password"
+              />
+              <KTextField
+                  autocomplete="new-password"
+                  field="passwordConfirmation"
+                  tabindex="1"
+                  type="password"
+                  v-model="passwordConfirmation"
+              />
+            </k-field-group>
+          </v-card-text>
+          <v-card-actions>
+            <VSpacer/>
+            <v-btn :loading="isLoading" color="primary" type="submit">{{
+                $t('authorisation.invitationAccept.request')
+              }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="js">
+import { acceptInvitation } from '@/api/endpoints/authorisation/register.js';
+import { getRateLimitMinutes } from '@/api/util/response.js';
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'InvitationAccept',
+  components: {
+    KFieldGroup,
+    KTextField,
+  },
+  data() {
+    return {
+      alertType: 'success',
+      alertMessage: '',
+      isLoading: false,
+      email: this.$route.query.email,
+      password: '',
+      passwordConfirmation: '',
+      isValid: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      isLoggedIn: 'authorisation/isLoggedIn',
+      firstError: 'error/first',
+    }),
+  },
+  created() {
+    if (this.isLoggedIn) {
+      this.$router.push({
+        name: 'dashboard',
+      });
+    }
+
+    if (!this.$route.query.email) {
+      this.$router.push({
+        name: 'login',
+      });
+
+      throw new Error('InvitationAccept::created no email present');
+    }
+  },
+  methods: {
+    handleAccept() {
+      this.isLoading = true;
+      acceptInvitation(this.email, this.$route.params.token, this.password, this.passwordConfirmation)
+          .then(() => {
+            this.alertType = 'success';
+            this.alertMessage = this.$t('authorisation.invitationAccept.successMessage');
+          })
+          .catch((error) => {
+            this.alertType = 'error';
+            const { response } = error;
+            const { status } = response;
+
+            if (status === 429) {
+              this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
+            } else if (status === 400) {
+              this.alertMessage = this.$t('authorisation.invitationAccept.errorMessage');
+            }
+
+            this.$refs.form.validate();
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  display: block;
+  margin:  0 auto;
+}
+</style>
diff --git a/generator/templates/Authorisation/src/views/Login.vue b/generator/templates/Authorisation/src/views/authorisation/Login.vue
similarity index 52%
rename from generator/templates/Authorisation/src/views/Login.vue
rename to generator/templates/Authorisation/src/views/authorisation/Login.vue
index 691d904..93e9c57 100644
--- a/generator/templates/Authorisation/src/views/Login.vue
+++ b/generator/templates/Authorisation/src/views/authorisation/Login.vue
@@ -3,20 +3,15 @@
     <v-col md="3">
       <LoginCard/>
     </v-col>
-    <v-col md="3">
-      <RegisterCard/>
-    </v-col>
   </v-row>
 </template>
 
 <script lang="js">
-import LoginCard from '../components/Authorisation/LoginCard.vue';
-import RegisterCard from '../components/Authorisation/RegisterCard.vue';
+import LoginCard from '@/components/authorisation/LoginCard.vue';
 
 export default {
   name: 'Login',
   components: {
-    RegisterCard,
     LoginCard,
   },
 };
diff --git a/generator/templates/Authorisation/src/views/PasswordForgotten.vue b/generator/templates/Authorisation/src/views/authorisation/PasswordForgotten.vue
similarity index 60%
rename from generator/templates/Authorisation/src/views/PasswordForgotten.vue
rename to generator/templates/Authorisation/src/views/authorisation/PasswordForgotten.vue
index e2b8c13..fbad0f1 100644
--- a/generator/templates/Authorisation/src/views/PasswordForgotten.vue
+++ b/generator/templates/Authorisation/src/views/authorisation/PasswordForgotten.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row align="stretch" justify-md="center">
+  <v-row justify-md="center" align="stretch">
     <v-col md="3">
       <PasswordForgottenCard/>
     </v-col>
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import PasswordForgottenCard from '../components/Authorisation/PasswordForgottenCard.vue';
+import PasswordForgottenCard from '@/components/authorisation/PasswordForgottenCard.vue';
 
 export default {
   name: 'PasswordForgotten',
diff --git a/generator/templates/Authorisation/src/views/PasswordReset.vue b/generator/templates/Authorisation/src/views/authorisation/PasswordReset.vue
similarity index 65%
rename from generator/templates/Authorisation/src/views/PasswordReset.vue
rename to generator/templates/Authorisation/src/views/authorisation/PasswordReset.vue
index 559e8bc..581c6f1 100644
--- a/generator/templates/Authorisation/src/views/PasswordReset.vue
+++ b/generator/templates/Authorisation/src/views/authorisation/PasswordReset.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row align="stretch" justify-md="center">
+  <v-row justify-md="center" align="stretch">
     <v-col md="3">
       <PasswordResetCard :token="$route.params.token"/>
     </v-col>
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="js">
-import PasswordResetCard from '../components/Authorisation/PasswordResetCard.vue';
+import PasswordResetCard from '@/components/authorisation/PasswordResetCard.vue';
 
 export default {
   name: 'PasswordReset',
diff --git a/generator/templates/Authorisation/src/views/authorisation/RegistrationVerify.vue b/generator/templates/Authorisation/src/views/authorisation/RegistrationVerify.vue
new file mode 100644
index 0000000..5d67555
--- /dev/null
+++ b/generator/templates/Authorisation/src/views/authorisation/RegistrationVerify.vue
@@ -0,0 +1,110 @@
+<template>
+  <v-row align="stretch" justify-md="center">
+    <v-col md="3">
+      <v-card height="100%">
+        <v-form @submit.prevent="onFormSubmit()" ref="form">
+          <VCardTitle class="title" v-text="$t('authorisation.registrationVerify.title')"/>
+          <v-card-text>
+            <v-alert
+                :type="alertType"
+                :value="!!alertMessage.length"
+                text
+                transition="fade-transition"
+            >
+              {{ alertMessage }}
+            </v-alert>
+
+            <k-field-group language-prefix="authorisation.fields">
+              <KTextField
+                  field="email"
+                  tabindex="0"
+                  v-model="form.email"
+              />
+              <KTextField
+                  :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
+                  :type="showPassword ? 'text' : 'password'"
+                  @click:append="showPassword = !showPassword"
+                  field="password"
+                  tabindex="1"
+                  v-model="form.password"
+              />
+              <KTextField
+                  :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
+                  :type="showPassword ? 'text' : 'password'"
+                  @click:append="showPassword = !showPassword"
+                  field="password"
+                  tabindex="2"
+                  v-model="form.passwordConfirmation"
+              />
+            </k-field-group>
+          </v-card-text>
+          <v-card-actions>
+            <VSpacer/>
+            <VBtn :loading="isLoading" color="primary" tabindex="12" type="submit" v-text="$t('actions.save')"/>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { verify } from '@/api/endpoints/authorisation/register';
+import { getRateLimitMinutes } from '@/api/util/response';
+import { getFragment } from '@/application/util/url';
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
+
+export default {
+  name: 'Verify',
+  components: {
+    KTextField,
+    KFieldGroup,
+  },
+  data() {
+    return {
+      form: {
+        email: '',
+      },
+      isLoading: false,
+      alertType: 'success',
+      alertMessage: '',
+      valid: true,
+      showPassword: false,
+    };
+  },
+  created() {
+    this.form.email = getFragment('email');
+  },
+  methods: {
+    onFormSubmit() {
+      const token = getFragment('token');
+
+      if (!token) return;
+
+      this.isLoading = true;
+
+      verify(token, this.form.email, this.form.password, this.form.passwordConfirmation)
+          .then(() => {
+            this.alertMessage = this.$t('authorisation.registrationVerify.successMessage');
+            this.alertType = 'success';
+          })
+          .catch((error) => {
+            const { response } = error;
+            const { status } = response;
+
+            this.alertType = 'error';
+            if (status === 429) {
+              this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
+            } else if (status === 400) {
+              this.alertMessage = this.$t('authorisation.registrationVerify.errorMessage');
+            }
+            this.$refs.form.validate();
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Crud/src/api/endpoints/user.js b/generator/templates/Crud/src/api/endpoints/user.js
new file mode 100644
index 0000000..f909e11
--- /dev/null
+++ b/generator/templates/Crud/src/api/endpoints/user.js
@@ -0,0 +1,30 @@
+import { getPaginated } from '@/api/implementation/app/wrapper.js';
+import { destroy, get, post, put } from '@/api/implementation/app';
+
+function index(page, perPage, search, sortBy, descending, params) {
+  return getPaginated('user', page, perPage, search, sortBy, descending, params);
+}
+
+function show(id) {
+  return get(`user/${id}`);
+}
+
+function create(user) {
+  return post('user', user);
+}
+
+function update(user) {
+  return put(`user/${user.id}`, user);
+}
+
+function remove(userId) {
+  return destroy(`user/${userId}`);
+}
+
+export {
+  index,
+  show,
+  create,
+  update,
+  remove,
+};
diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 7f04c5d..da89953 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -1,40 +1,38 @@
 <template>
-  <v-container fluid>
-    <vuetify-resource
-        :beforeCreateCallback="beforeOpenCreateHandler"
-        :beforeUpdateCallback="beforeOpenUpdateHandler"
-        :createCallback="handleCreateRequest"
-        :deleteCallback="handleDeleteRequest"
-        :getDataCallback="handleIndexRequest"
-        :getItemCallback="handleShowRequest"
-        :meta="meta"
-        :tableContent="tableContent"
-        :texts="require('../VuetifyResourceTexts.js').default"
-        :updateCallback="handleUpdateRequest"
-        @row-click="onRowClick"
-        ref="resourceList"
-        v-bind="$attrs"
-        v-model="selected"
-    >
-      <div slot="createContent">
-        <component :errors="errors"
-                   :is="formComponent"
-                   :is-update-form="false"
-                   ref="createForm"
-                   v-model="createForm"/>
-      </div>
-      <div slot="updateContent">
-        <component :errors="errors"
-                   :is="formComponent"
-                   :is-update-form="true"
-                   ref="updateForm"
-                   v-model="updateForm"/>
-      </div>
-      <template v-slot:crudActionsAfter="slotProps">
-        <slot name="crudActionsAfter" v-bind="slotProps"></slot>
-      </template>
-    </vuetify-resource>
-  </v-container>
+  <vuetify-resource
+      ref="resourceList"
+      v-model="selected"
+      v-bind="$attrs"
+      :beforeCreateCallback="beforeOpenCreateHandler"
+      :beforeUpdateCallback="beforeOpenUpdateHandler"
+      :createCallback="handleCreateRequest"
+      :deleteCallback="handleDeleteRequest"
+      :getDataCallback="handleIndexRequest"
+      :getItemCallback="handleShowRequest"
+      :meta="meta"
+      :tableContent="tableContent"
+      :texts="require('../VuetifyResourceTexts.js').default"
+      :updateCallback="handleUpdateRequest"
+      @row-click="onRowClick"
+  >
+    <div slot="createContent">
+      <component :is="formComponent"
+                 ref="createForm"
+                 v-model="createForm"
+                 :errors="errors"
+                 :is-update-form="false"/>
+    </div>
+    <div slot="updateContent">
+      <component :is="formComponent"
+                 ref="updateForm"
+                 v-model="updateForm"
+                 :errors="errors"
+                 :is-update-form="true"/>
+    </div>
+    <template v-slot:crudActionsAfter="slotProps">
+      <slot v-bind="slotProps" name="crudActionsAfter"></slot>
+    </template>
+  </vuetify-resource>
 </template>
 
 <script>
diff --git a/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue b/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
index 8f67d1f..5e3c0cf 100644
--- a/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
+++ b/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
@@ -1,9 +1,7 @@
 <script>
-import BaseForm from '@/components/BaseForm.vue';
 
 export default {
   name: 'Form',
-  extends: BaseForm,
   props: {
     value: {
       default() {
diff --git a/generator/templates/Crud/src/components/forms/UserForm.vue b/generator/templates/Crud/src/components/forms/UserForm.vue
index c0dcbef..1b4c7ef 100644
--- a/generator/templates/Crud/src/components/forms/UserForm.vue
+++ b/generator/templates/Crud/src/components/forms/UserForm.vue
@@ -1,37 +1,36 @@
 <template>
-    <v-container>
-        <v-form ref="form" v-model="valid" class="mt-5">
-            <v-col cols="12" sm="10" offset-sm="1" md="8" offset-md="2" lg="6" offset-lg="3">
-                <v-subheader class="pa-0">Gebruiker</v-subheader>
-                <v-card>
-                    <v-card-text>
-                        <VTextField
-                            :counter="100"
-                            :rules="[(v) => !!v || 'Naam is verplicht', () => serverError('name'), (v) => !!v && v.length <= 100 || 'de naam mag maximaal 100 tekens bevatten']"
-                            label="Naam"
-                            v-model="values.name"/>
-                        <VTextField
-                            :counter="150"
-                            :rules="[(v) => !!v || 'E-mail is verplicht', () => serverError('email'), (v) => !!v && v.length <= 100 || 'het e-mailadres mag maximaal 150 tekens bevatten']"
-                            label="E-mail"
-                            hint="Het e-mailadres waarmee de gebruiker gaat inloggen en waarnaar een mail verzonden wordt met instructies om een wachtwoord aan te maken"
-                            v-model="values.email"/>
-                    </v-card-text>
-                </v-card>
-            </v-col>
-        </v-form>
-    </v-container>
+  <v-container>
+    <v-form ref="form" v-model="valid" class="mt-5">
+      <k-field-group language-prefix="user.fields">
+        <v-col cols="12" lg="6" md="8" offset-lg="3" offset-md="2" offset-sm="1" sm="10">
+          <v-subheader class="pa-0">Gebruiker</v-subheader>
+          <v-card>
+            <v-card-text>
+              <KTextField v-model="values.name" field="name" required/>
+              <KTextField v-model="values.email" field="email" required/>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </k-field-group>
+    </v-form>
+  </v-container>
 </template>
 
 <script lang="js">
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
 import Form from '@/components/VuetifyResourceBaseForm.vue';
 import User from '../../application/models/user.js';
 
 export default {
-    name: 'UserForm',
-    extends: Form,
-    data: () => ({
-        values: new User(),
-    }),
+  name: 'UserForm',
+  extends: Form,
+  components: {
+    KTextField,
+    KFieldGroup,
+  },
+  data: () => ({
+    values: new User(),
+  }),
 };
 </script>
diff --git a/generator/templates/Crud/src/locales/nl/user.json b/generator/templates/Crud/src/locales/nl/user.json
new file mode 100644
index 0000000..14108fe
--- /dev/null
+++ b/generator/templates/Crud/src/locales/nl/user.json
@@ -0,0 +1,7 @@
+{
+    "title": "Gebruiker|Gebruikers",
+    "fields": {
+        "name": "Naam",
+        "email": "E-mail"
+    }
+}
diff --git a/generator/templates/Crud/src/mixins/formDataValues.js b/generator/templates/Crud/src/mixins/formDataValues.js
deleted file mode 100644
index 4376d0a..0000000
--- a/generator/templates/Crud/src/mixins/formDataValues.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  methods: {
-    appendFormData(form_data, values, startKey = '') {
-      if (typeof values === 'object') {
-        for (const key in values) {
-          const currentKey = startKey.length ? startKey + '[' + key + ']' : key;
-
-          if (typeof values[key] === 'object' && !(values[key] instanceof File)) {
-            this.appendFormData(form_data, values[key], currentKey);
-          } else if (typeof values[key] !== 'undefined') {
-            form_data.append(currentKey, values[key]);
-          }
-        }
-      }
-    },
-  },
-};
diff --git a/generator/templates/Crud/src/router/routes/authorised.js b/generator/templates/Crud/src/router/routes/authorised.js
new file mode 100644
index 0000000..cfa1439
--- /dev/null
+++ b/generator/templates/Crud/src/router/routes/authorised.js
@@ -0,0 +1,18 @@
+import AuthorisationGuard from '@/router/guards/AuthorisationGuard.js';
+
+export default {
+  path: '',
+  beforeEnter: AuthorisationGuard,
+  component: () => import('@/templates/Default'),
+  children: [
+    {
+      path: '',
+      name: 'home',
+      component: () => import('@/views/Home'),
+    },{
+      path: '/users',
+      name: 'users',
+      component: () => import('@/views/UserResource.vue')
+    },
+  ]
+}
diff --git a/generator/templates/Crud/src/views/UserResource.vue b/generator/templates/Crud/src/views/UserResource.vue
index 73e47ac..811bea5 100644
--- a/generator/templates/Crud/src/views/UserResource.vue
+++ b/generator/templates/Crud/src/views/UserResource.vue
@@ -5,7 +5,7 @@
         :delete-request="deleteHandler"
         :form-component="() => import('../components/forms/UserForm.vue')"
         :index-request="indexHandler"
-        :meta="{name: 'gebruiker', namePlural: 'gebruikers'}"
+        :meta="{name: $tc('user.title', 1), namePlural: $tc('user.title', 2)}"
         :model-type="modelType"
         :show-request="showHandler"
         :table-content="tableContent"
@@ -16,7 +16,8 @@
 
 <script lang="js">
 import Resource from '@/components/Resource.vue';
-import { create, destroy, index, show, update } from '../api/endpoints/user.js';
+import eventBus from '@/eventBus.js';
+import { create, index, remove, show, update } from '../api/endpoints/user.js';
 import User from '../application/models/user.js';
 
 export default {
@@ -28,23 +29,39 @@ export default {
     indexHandler: () => index,
     showHandler: () => show,
     updateHandler: () => update,
-    deleteHandler: () => destroy,
+    deleteHandler: () => remove,
     createHandler: () => create,
     modelType: () => User,
-    tableContent: () => [
+    tableContent() {
+      return [
+        {
+          text: this.$t('user.fields.name'),
+          align: 'left',
+          sortable: true,
+          value: 'name',
+        },
+        {
+          text: this.$t('user.fields.email'),
+          align: 'left',
+          sortable: true,
+          value: 'email',
+        },
+      ];
+    },
+  },
+  created() {
+    eventBus.$emit('setBreadcrumbs', [
       {
-        text: 'Naam',
-        align: 'left',
-        sortable: true,
-        value: 'name',
+        exact: true,
+        to: { name: 'home' },
+        text: this.$t('global.dashboard'),
       },
       {
-        text: 'E-mail',
-        align: 'left',
-        sortable: true,
-        value: 'email',
+        exact: true,
+        to: { name: 'users' },
+        text: this.$tc('user.title', 2),
       },
-    ],
-  },
+    ]);
+  }
 };
 </script>
diff --git a/generator/templates/Default/src/api/implementation/app/index.js b/generator/templates/Default/src/api/implementation/app/index.js
index 57da027..a680a82 100644
--- a/generator/templates/Default/src/api/implementation/app/index.js
+++ b/generator/templates/Default/src/api/implementation/app/index.js
@@ -7,7 +7,6 @@ import {
   onResponseRejected,
 } from './interceptor';
 import { transformParams, transformRequest, transformResponse } from './transformer';
-import { getPaginated } from './wrapper';
 
 /**
  * Returns an axios instance
@@ -32,13 +31,11 @@ const instance = axios.create(config);
 instance.interceptors.request.use(onRequestFulFilled, onRequestRejected);
 instance.interceptors.response.use(onResponseFulFilled, onResponseRejected);
 
-const get = instance.get;
-const post = instance.post;
+const { get, post, put } = instance;
 const destroy = instance.delete;
-const put = instance.put;
+
 
 export {
-  getPaginated,
   get,
   post,
   destroy,
diff --git a/generator/templates/Default/src/api/implementation/app/interceptor.js b/generator/templates/Default/src/api/implementation/app/interceptor.js
index 696c42c..26a843e 100644
--- a/generator/templates/Default/src/api/implementation/app/interceptor.js
+++ b/generator/templates/Default/src/api/implementation/app/interceptor.js
@@ -1,4 +1,5 @@
-import store from '../../../store';
+import router from '@/router';
+import store from '@/store';
 
 /**
  * @param request {AxiosRequestConfig}
@@ -9,14 +10,14 @@ function onRequestFulFilled(request) {
     if (request.data instanceof FormData) {
       request.data.append('_method', 'put');
     } else {
-      request.data['_method'] = 'put';
+      request.data._method = 'put';
     }
   }
 
   const computedHeaders = computeHeaders();
 
   Object.keys(computedHeaders)
-    .forEach(header => {
+    .forEach((header) => {
       Object.assign(request.headers.common, {
         [header]: computedHeaders[header],
       });
@@ -51,17 +52,27 @@ function onResponseFulFilled(response) {
  * @param error {AxiosError}
  */
 function onResponseRejected(error) {
-  const response = error.response;
+  const { response } = error;
 
   if (!response) return Promise.reject(error); // network error, not axios related
 
-  const status = response.status;
-  const errors = response.data.errors;
+  const { status } = response;
+  const { errors } = response.data;
+
+  if (status === 401) {
+    store.dispatch('authorisation/logout');
+    router.push({ name: 'login' });
+    return;
+  } else if (status === 403) {
+    router.push({ name: '403' });
+  } else if (status === 404) {
+    router.push({ name: '404' });
+  }
 
   if (errors && status === 422) {
     Object.keys(errors)
-      .forEach(key => store.commit('error/add', {
-        key: key,
+      .forEach((key) => store.commit('error/add', {
+        key,
         message: errors[key][0],
       }));
   }
diff --git a/generator/templates/Default/src/api/implementation/app/transformer.js b/generator/templates/Default/src/api/implementation/app/transformer.js
index d7d647c..64cac2a 100644
--- a/generator/templates/Default/src/api/implementation/app/transformer.js
+++ b/generator/templates/Default/src/api/implementation/app/transformer.js
@@ -1,7 +1,7 @@
 import Qs from 'qs';
-import Model from '../../../application/models/model.js';
+import Model from '@/application/models/model';
 import { camelToSnake, snakeToCamel } from '../../util/keyConverter';
-import objectToFormData from '../../util/objectToFormDataConverter.js';
+import objectToFormData from '../../util/objectToFormDataConverter';
 
 /**
  * @param response
@@ -9,8 +9,12 @@ import objectToFormData from '../../util/objectToFormDataConverter.js';
  */
 function transformResponse(response) {
   if (typeof response === 'string' && response.length > 0) {
-    const result = JSON.parse(response);
-    return snakeToCamel(result);
+    try {
+      const result = JSON.parse(response);
+      return snakeToCamel(result);
+    } catch (e) {
+      return response;
+    }
   }
 
   if (!response) {
diff --git a/generator/templates/Default/src/api/implementation/app/wrapper.js b/generator/templates/Default/src/api/implementation/app/wrapper.js
index 9456dbf..c067a9d 100644
--- a/generator/templates/Default/src/api/implementation/app/wrapper.js
+++ b/generator/templates/Default/src/api/implementation/app/wrapper.js
@@ -1,4 +1,5 @@
-import handle from './index';
+import { get } from '@/api/implementation/app';
+import { convertCamelToSnake } from '@/api/util/keyConverter.js';
 
 /**
  * @param url
@@ -14,17 +15,18 @@ function getPaginated(url, page = 1, perPage = 10, search, sortBy, descending, p
   if (search) {
     params.search = search;
   }
+
   if (sortBy) {
-    params.sortBy = sortBy;
+    params.sortBy = convertCamelToSnake(sortBy);
   }
   if (typeof descending !== 'undefined') {
     params.desc = descending ? '1' : '0';
   }
 
-  return handle.get(url, {
+  return get(url, {
     params: {
-      page: page,
-      perPage: perPage,
+      page,
+      perPage,
       ...params,
     },
   });
diff --git a/generator/templates/Default/src/api/util/keyConverter.js b/generator/templates/Default/src/api/util/keyConverter.js
index 54338a0..775b9c4 100644
--- a/generator/templates/Default/src/api/util/keyConverter.js
+++ b/generator/templates/Default/src/api/util/keyConverter.js
@@ -6,9 +6,11 @@ function camelToSnake(data) {
   const target = Array.isArray(data) ? [] : {};
 
   Object.keys(data)
-    .forEach(key => {
+    .forEach((key) => {
       Object.assign(target, {
-        [convertCamelToSnake(key)]: isIterableObject(data[key]) ? camelToSnake(data[key]) : data[key],
+        [convertCamelToSnake(key)]: isIterableObject(data[key])
+          ? camelToSnake(data[key])
+          : data[key],
       });
     });
 
@@ -16,9 +18,7 @@ function camelToSnake(data) {
 }
 
 function convertCamelToSnake(key) {
-  return key.replace(/[A-Z]/g, value => {
-    return '_' + value[0].toLowerCase();
-  });
+  return key.replace(/[A-Z]/g, (value) => `_${value[0].toLowerCase()}`);
 }
 
 function snakeToCamel(data) {
@@ -29,9 +29,11 @@ function snakeToCamel(data) {
   const target = Array.isArray(data) ? [] : {};
 
   Object.keys(data)
-    .forEach(key => {
+    .forEach((key) => {
       Object.assign(target, {
-        [convertSnakeToCamel(key)]: isIterableObject(data[key]) ? snakeToCamel(data[key]) : data[key],
+        [convertSnakeToCamel(key)]: isIterableObject(data[key])
+          ? snakeToCamel(data[key])
+          : data[key],
       });
     });
 
@@ -39,9 +41,7 @@ function snakeToCamel(data) {
 }
 
 function convertSnakeToCamel(key) {
-  return key.replace(/_\w/g, value => {
-    return value[1].toUpperCase();
-  });
+  return key.replace(/_\w/g, (value) => value[1].toUpperCase());
 }
 
 function isIterableObject(target) {
@@ -51,4 +51,6 @@ function isIterableObject(target) {
 export {
   snakeToCamel,
   camelToSnake,
+  convertCamelToSnake,
+  convertSnakeToCamel,
 };
diff --git a/generator/templates/Default/src/api/util/response.js b/generator/templates/Default/src/api/util/response.js
index 3b3c370..b3f8a8e 100644
--- a/generator/templates/Default/src/api/util/response.js
+++ b/generator/templates/Default/src/api/util/response.js
@@ -1,4 +1,4 @@
-import dayjs from '../../plugins/dayJs.js';
+import dayjs from '../../plugins/dayJs';
 
 function getRateLimitMinutes(response, defaultMinutes = 15) {
   const remainingMilliseconds = (+response.headers['retry-after']) * 1000;
diff --git a/generator/templates/Default/src/application/models/model.js b/generator/templates/Default/src/application/models/model.js
index ed45054..262d4e6 100644
--- a/generator/templates/Default/src/application/models/model.js
+++ b/generator/templates/Default/src/application/models/model.js
@@ -29,48 +29,29 @@ class Model {
         const value = assignable[key];
         const type = typeof value;
 
-        if (typeof data[key] === type) {
-          assignable[key] = data[key];
+        if (typeof data === 'undefined') {
+          assignable[key] = value;
           return;
         }
 
-        const defaultValue = this.getDefaultValueFromType(type, value);
-
-        assignable[key] = data[key] || defaultValue;
-      });
-
-    Object.keys(data)
-      .forEach(key => {
-        if (typeof assignable[key] === 'undefined') {
-          assignable[key] = data[key];
-        }
+        const apiValue = data[key];
+        assignable[key] = this.convertByType(type, value, apiValue);
       });
 
     return assignable;
   }
 
-  /**
-   * @private
-   * @param type
-   * @param defaultModelValue
-   * @return {*}
-   */
-  getDefaultValueFromType(type, defaultModelValue) {
-    let defaultValue;
-
-    if (type === 'string') {
-      defaultValue = defaultModelValue || '';
+  convertByType(type, currentValue, apiValue) {
+    if (type === 'object' && currentValue && typeof currentValue.mapResponse === 'function') {
+      return currentValue.mapResponse(apiValue);
+    } else if (type === 'string') {
+      return apiValue ? String(apiValue) : '';
     } else if (type === 'boolean') {
-      defaultValue = defaultModelValue || false;
+      return Boolean(apiValue);
     } else if (type === 'number') {
-      defaultValue = defaultModelValue || 0;
-    } else if (Array.isArray(defaultModelValue)) {
-      defaultValue = defaultModelValue || [];
-    } else {
-      defaultValue = defaultModelValue || null;
+      return parseFloat(apiValue);
     }
-
-    return defaultValue;
+    return apiValue || currentValue;
   }
 }
 
diff --git a/generator/templates/Default/src/application/util/translation.js b/generator/templates/Default/src/application/util/translation.js
new file mode 100644
index 0000000..ffee3b5
--- /dev/null
+++ b/generator/templates/Default/src/application/util/translation.js
@@ -0,0 +1,20 @@
+import i18n from '@/plugins/i18n.js';
+
+function translateField(field, translationPrefix) {
+  if (translationPrefix) {
+    const translationKey = `${translationPrefix}.${field}`;
+    if (translationPrefix && i18n.te(translationKey)) {
+      return i18n.t(translationKey);
+    }
+
+    if (i18n.te(field)) {
+      return i18n.t(field);
+    }
+
+    return i18n.t(translationKey);
+  }
+}
+
+export {
+  translateField,
+};
diff --git a/generator/templates/Default/src/application/util/url.js b/generator/templates/Default/src/application/util/url.js
index 4c606b9..59801b5 100644
--- a/generator/templates/Default/src/application/util/url.js
+++ b/generator/templates/Default/src/application/util/url.js
@@ -1,6 +1,6 @@
 function getFragment(key, defaultValue = '') {
   const fragmentRegExp = new RegExp(`[\\#&]${key}=([^&#]*)`);
-  const result = fragmentRegExp.exec(location.hash);
+  const result = fragmentRegExp.exec(window.location.hash);
 
   if (result && result.length >= 2) {
     return decodeURIComponent(result[1]);
diff --git a/generator/templates/Default/src/components/BaseForm.vue b/generator/templates/Default/src/components/BaseForm.vue
deleted file mode 100644
index 87beb3f..0000000
--- a/generator/templates/Default/src/components/BaseForm.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-import { mapGetters, mapMutations } from 'vuex';
-
-export default {
-  name: 'Form',
-  props: {
-    errors: {
-      default: () => {
-      },
-      type: Object,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      findError: 'error/find',
-    }),
-  },
-  watch: {
-    errors: {
-      handler() {
-        this.validate();
-      },
-      deep: true,
-    },
-  },
-  data() {
-    return {
-      valid: false,
-    };
-  },
-  methods: {
-    ...mapMutations({
-      removeError: 'error/remove',
-    }),
-    validate() {
-      this.$refs.form.validate();
-    },
-    clear() {
-      this.$refs.form.reset();
-    },
-    /* Should only be used for Vuetify rules */
-    serverError(key) {
-      const error = this.findError(key);
-
-      if (error) {
-        this.removeServerError(key);
-
-        return error;
-      }
-
-      return true;
-    },
-    removeServerError(key) {
-      this.removeError(key);
-    },
-  },
-};
-</script>
diff --git a/generator/templates/Default/src/components/Breadcrumbs.vue b/generator/templates/Default/src/components/Breadcrumbs.vue
new file mode 100644
index 0000000..0a290bb
--- /dev/null
+++ b/generator/templates/Default/src/components/Breadcrumbs.vue
@@ -0,0 +1,27 @@
+<template>
+  <VBreadcrumbs :class="breadcrumbsClass" :items="breadcrumbs" class="py-1 pl-0"/>
+</template>
+
+<script>
+import eventBus from '../eventBus';
+
+export default {
+  name: 'Breadcrumbs',
+  data() {
+    return {
+      breadcrumbs: [],
+      placeholders: {},
+    };
+  },
+  computed: {
+    breadcrumbsClass() {
+      return this.$vuetify.theme.dark ? 'dark' : 'light';
+    },
+  },
+  created() {
+    eventBus.$on('setBreadcrumbs', (breadcrumbs) => {
+      this.breadcrumbs = breadcrumbs;
+    });
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/PaginatedAutocomplete.vue b/generator/templates/Default/src/components/PaginatedAutocomplete.vue
deleted file mode 100644
index 1dc3ed3..0000000
--- a/generator/templates/Default/src/components/PaginatedAutocomplete.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <v-autocomplete :items="items"
-                  :loading="isLoading"
-                  :search-input.sync="searchInput"
-                  :value="$attrs.value"
-                  @change="handleChange"
-                  v-bind="$attrs"
-                  v-if="enabled"
-  >
-    <template v-slot:append-item>
-      <v-flex class="text-center" v-if="canLoadMoreItems">
-        <v-btn @click="getItemsFromApi(page + 1)" color="accent">Meer laden</v-btn>
-      </v-flex>
-    </template>
-  </v-autocomplete>
-</template>
-
-<script lang="js">
-import axios from '../api/implementation/app';
-
-export default {
-  name: 'PaginatedAutocomplete',
-  data() {
-    return {
-      items: [],
-      page: 1,
-      lastPage: 1,
-      searchInput: '',
-      isLoading: true,
-    };
-  },
-  props: {
-    pagination: {
-      type: Object,
-      default() {
-        return {
-          url: '',
-          perPage: 15,
-        };
-      },
-    },
-  },
-  watch: {
-    searchInput() {
-      const selectedItemsText = this.items.filter(item => item.id === this.$attrs.value)[0][this.$attrs['item-text']];
-
-      if (selectedItemsText !== this.searchInput) {
-        this.getItemsFromApi(this.page, this.searchInput);
-      }
-    },
-    '$attrs.value': {
-      handler() {
-        this.loadSelectedItemsIfTheyNotExist();
-      },
-      deep: false,
-    },
-  },
-  computed: {
-    canLoadMoreItems: vm => vm.page < vm.lastPage,
-    selectedIds: vm => {
-      const value = vm.$attrs.value;
-
-      if (!value) return [];
-
-      return Array.isArray(value) ? value : [value];
-    },
-  },
-  created() {
-    this.reload();
-  },
-  methods: {
-    getItemsFromApi(page, searchInput) {
-      this.isLoading = true;
-
-      axios.get(`${this.pagination.url}?perPage=${this.pagination.perPage}page=${page}&q=${searchInput}`)
-          .then(response => {
-            const axiosData = response.data;
-
-            axiosData.data = response.data.data.map(obj => this.mapItems(obj));
-            this.items = [...this.items, ...axiosData.data];
-
-            const meta = axiosData.meta;
-            this.page = meta.currentPage;
-            this.lastPage = meta.lastPage;
-          })
-          .finally(() => this.isLoading = false);
-    },
-    getSelectedItems() {
-      const ids = this.selectedIds;
-
-      if (!ids.length) return;
-
-      this.isLoading = true;
-
-      axios.get(`${this.pagination.url}?only=${ids.join()}&perPage=${ids.length}`)
-          .then(response => {
-            const axiosData = response.data;
-
-            axiosData.data = axiosData.data.map(obj => this.mapItems(obj));
-            this.items = [...this.items, ...axiosData.data];
-          })
-          .finally(() => this.isLoading = false);
-    },
-    handleChange(value) {
-      this.$emit('input', value);
-    },
-    mapItems(obj) {
-      const itemText = this.$attrs['item-text'];
-      const itemValue = this.$attrs['item-value'];
-
-      return {
-        [itemText]: obj[itemText],
-        [itemValue]: obj[itemValue],
-      };
-    },
-    reload() {
-      this.items = [];
-      this.getSelectedItems();
-      this.getItemsFromApi(1);
-    },
-    loadSelectedItemsIfTheyNotExist() {
-      const ids = this.selectedIds;
-
-      if (!ids.length) return;
-
-      ids.forEach(value => {
-        const item = this.items.find(item => item.id === value);
-
-        if (!item) this.getSelectedItems();
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/generator/templates/Default/src/components/crud/fields/FieldMixin.vue b/generator/templates/Default/src/components/crud/fields/FieldMixin.vue
new file mode 100644
index 0000000..9f22f69
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/FieldMixin.vue
@@ -0,0 +1,90 @@
+<script>
+import { translateField } from '@/application/util/translation.js';
+
+export default {
+  name: 'BaseField',
+  inject: {
+    fieldGroup: {
+      default: undefined,
+    },
+  },
+  props: {
+    field: {
+      required: true,
+      type: String,
+    },
+    validationField: {
+      type: String,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    tabindex: {
+      type: [String, Number],
+    },
+    grid: {
+      type: [Object, String],
+    },
+  },
+  computed: {
+    translatedLabel() {
+      if (this.required) {
+        return `${this.computedLabel} *`;
+      }
+      return this.computedLabel;
+    },
+    computedLabel() {
+      if (this.label) {
+        return this.label;
+      }
+      if (this.fieldGroup && this.fieldGroup.languagePrefix) {
+        return translateField(this.field, this.fieldGroup.languagePrefix);
+      }
+      return this.label || this.field;
+    },
+    computedRules() {
+      const rules = [...this.rules, () => this.getServerError()];
+      if (this.required) {
+        rules.push((v) => !!v || this.$t('validation.required', { field: this.computedLabel }));
+      }
+      return rules;
+    },
+    fieldProps() {
+      if (this.fieldGroup && this.fieldGroup.computedFieldProps) {
+        return { ...this.fieldGroup.computedFieldProps, ...this.$attrs };
+      }
+      return { ...this.$attrs };
+    },
+
+  },
+  methods: {
+    getServerError() {
+      const error = this.$store.getters['error/find'](this.validationField || this.field);
+      if (error) {
+        this.removeServerError(this.field);
+        return error;
+      }
+
+      return true;
+    },
+    removeServerError(key) {
+      this.$store.commit('error/remove', key);
+    },
+  },
+};
+</script>
+<style>
+.k-field-wrapper {
+  padding: 0;
+  width:   100%;
+}
+</style>
diff --git a/generator/templates/Default/src/components/crud/fields/KAutocomplete.vue b/generator/templates/Default/src/components/crud/fields/KAutocomplete.vue
new file mode 100644
index 0000000..c5c959a
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KAutocomplete.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="k-field-wrapper" :class="this.grid">
+    <v-autocomplete :label="translatedLabel"
+                    :rules="computedRules"
+                    v-bind="fieldProps"
+                    v-on="$listeners">
+      <template v-for="(index, name) in $slots" v-slot:[name]>
+        <slot :name="name"/>
+      </template>
+    </v-autocomplete>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  mixins: [Field],
+  name: 'KAutocomplete',
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KDateField.vue b/generator/templates/Default/src/components/crud/fields/KDateField.vue
new file mode 100644
index 0000000..161fe93
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KDateField.vue
@@ -0,0 +1,95 @@
+<template>
+  <div :class="this.grid" class="k-field-wrapper">
+    <v-menu
+        ref="menu"
+        v-model="menu"
+        :close-on-content-click="false"
+        :return-value.sync="date"
+        min-width="290px"
+        offset-y
+        transition="scale-transition"
+    >
+      <template #activator="{ on }">
+        <v-text-field
+            ref="field"
+            v-bind="fieldProps"
+            v-on="on"
+            :label="translatedLabel"
+            :rules="computedRules"
+            :value="formattedDate"
+            readonly
+        ></v-text-field>
+      </template>
+      <v-date-picker ref="picker"
+                     :type="type"
+                     v-model="datePickerDate"
+                     no-title
+                     scrollable
+                     @change="$emit('input', $event)">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="menu = false">{{ $t('actions.cancel') }}</v-btn>
+        <v-btn color="primary" text @click="$refs.menu.save(datePickerDate);$refs.field.validate()">
+          {{ $t('actions.continue') }}
+        </v-btn>
+      </v-date-picker>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+import dayjs from '@/plugins/dayjs';
+
+export default {
+  name: 'KDateField',
+  mixins: [Field],
+  data: () => ({
+    menu: false,
+    date: '',
+    datePickerDate: '',
+  }),
+  props: {
+    value: {
+      type: String,
+    },
+    yearFirst: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+    },
+    format: {
+      type: String,
+      default: 'D MMMM YYYY',
+    },
+  },
+  watch: {
+    date() {
+      this.$emit('input', this.date);
+    },
+    value() {
+      this.date = this.value;
+      this.datePickerDate = this.value;
+    },
+    menu(val) {
+      if (!this.yearFirst) return;
+      val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'));
+    },
+  },
+  created() {
+    if (this.type === 'month') {
+      return this.date = this.value || dayjs().format('MMM YYYY');
+    }
+    this.date = this.value || dayjs().format('YYYY-MM-DD');
+  },
+  computed: {
+    formattedDate() {
+      if (!this.date) {
+        return '';
+      }
+      return dayjs(this.date).format(this.format);
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KFieldGroup.vue b/generator/templates/Default/src/components/crud/fields/KFieldGroup.vue
new file mode 100644
index 0000000..ef4f203
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KFieldGroup.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="fieldgroup">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KFieldGroup',
+  props: {
+    languagePrefix: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    fieldProps: {
+      required: false,
+      type: Object,
+      default: () => {
+      },
+    },
+  },
+  provide() {
+    return {
+      fieldGroup: this,
+    };
+  },
+  computed: {
+    computedFieldProps() {
+      return {
+        validateOnBlur: true,
+        ...this.fieldProps,
+      };
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KFileField.vue b/generator/templates/Default/src/components/crud/fields/KFileField.vue
new file mode 100644
index 0000000..5420be1
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KFileField.vue
@@ -0,0 +1,97 @@
+<template>
+  <v-row :class="this.grid" class="k-field-wrapper ma-0">
+    <VFileInput
+        v-bind="fieldProps"
+        v-on="$listeners"
+        :label="translatedLabel"
+        :rules="computedRules"
+        :value="value"
+        class="pr-2"
+    />
+    <div class="file-preview d-flex justify-center mb-2">
+      <v-icon v-if="!preview" :size="40">{{ icon }}</v-icon>
+      <VImg v-else :src="preview"/>
+    </div>
+  </v-row>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  name: 'KFileField',
+  mixins: [Field],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: [Object, File],
+    },
+  },
+  data: () => ({
+    preview: '',
+    previewType: '',
+  }),
+  watch: {
+    value: {
+      immediate: true,
+      handler(value) {
+        this.fetchPreview(value);
+      },
+    },
+  },
+  computed: {
+    icon() {
+      if (!this.previewType) {
+        return 'fa-upload';
+      }
+      return this.getIconByType(this.previewType);
+    },
+  },
+  methods: {
+    fetchPreview(file) {
+      if (!file || !file.type) {
+        this.preview = '';
+        this.previewType = '';
+        return;
+      }
+      if (file.type.match('image.*')) {
+        if (file instanceof Blob) {
+          const reader = new FileReader();
+          reader.addEventListener('load', () => {
+            this.preview = reader.result;
+            this.previewType = '';
+          }, false);
+          reader.readAsDataURL(file);
+          return;
+        }
+        this.preview = file.url;
+        return;
+      }
+      this.preview = '';
+      this.previewType = file.type;
+    },
+    getIconByType(type) {
+      if (type.match('video/*')) {
+        return 'fa-file-video';
+      } else if (type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || type === 'application/msword') {
+        return 'fa-file-word';
+      } else if (type === 'application/pdf') {
+        return 'fa-file-pdf';
+      }
+      return 'fa-file';
+    },
+  },
+};
+</script>
+
+<style scoped>
+.file-preview {
+  border:   1px solid;
+  height:   100px;
+  overflow: hidden;
+  width:    100px;
+}
+</style>
diff --git a/generator/templates/Default/src/components/crud/fields/KPaginatedAutocomplete.vue b/generator/templates/Default/src/components/crud/fields/KPaginatedAutocomplete.vue
new file mode 100644
index 0000000..34a8fe9
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KPaginatedAutocomplete.vue
@@ -0,0 +1,129 @@
+<template>
+  <k-autocomplete v-bind="computedAttributes"
+                  v-on="$listeners"
+                  :field="field"
+                  :items="items"
+                  :loading="isLoading"
+                  :search-input.sync="search"
+                  :value="value"
+                  no-filter
+                  return-object
+  >
+    <template v-if="lastPage > page" #append-item>
+      <v-list-item>
+        <v-btn text @click="loadMore">{{ $t('actions.loadMore') }}</v-btn>
+      </v-list-item>
+    </template>
+    <template #no-data>
+      <v-list-item v-if="isLoading">
+        {{ $vuetify.lang.t('$vuetify.dataIterator.loadingText') }}
+      </v-list-item>
+      <v-list-item v-else>
+        {{ $vuetify.lang.t('$vuetify.dataIterator.noResultsText') }}
+      </v-list-item>
+    </template>
+  </k-autocomplete>
+</template>
+
+<script>
+import KAutocomplete from '@/components/crud/fields/KAutocomplete.vue';
+
+/**
+ * @TODO at this moment filtering is turned off, when this is activated vuetify filteres based on the item text.
+ * But then the result is double filtered and items witch advanced filtering from the API won't appear.
+ * When it is enabled (which can't be done) vuetify doesn't show selected items that don't correspond to the search term.
+ * When we would remove these from the items, they are no longer visible as a value in the autocomplete itself
+ * The only thing we could do is create a custom filter that excludes items that are already selected, but then all
+ * selected items are hidden including the ones which do correspond to the filter.
+ */
+export default {
+  name: 'KPaginatedAutocomplete',
+  components: { KAutocomplete },
+  props: {
+    field: {
+      type: String,
+      required: true,
+    },
+    paginator: {
+      type: Function,
+      required: true,
+    },
+    value: {
+      type: [Array, Object],
+      required: false,
+    },
+  },
+  watch: {
+    search() {
+      this.handleInitialFetch();
+    },
+  },
+  data() {
+    return {
+      items: [],
+      page: 1,
+      lastPage: 1,
+      perPage: 25,
+      search: '', //autocomplete search value
+      searchParameter: '', //the value that will be send to the API
+      timeout: 0,
+      isLoading: false,
+    };
+  },
+  created() {
+    this.handleInitialFetch();
+  },
+  computed: {
+    /**
+     * All attribute that need to be passed to the KAutocomplete.
+     * All the values inside this object are overwriteable so only add props here that may be overwritten!
+     * @returns Object
+     */
+    computedAttributes() {
+      return {
+        itemText: 'name',
+        chips: !!this.$attrs.multiple,
+        deletableChips: !!this.$attrs.multiple,
+        ...this.$attrs,
+      };
+    },
+    valuesAsArray() {
+      if (!this.value) {
+        return [];
+      }
+      return Array.isArray(this.value) ? this.value : [this.value];
+    },
+  },
+  methods: {
+    async getPaginator() {
+      const excludeIds = this.valuesAsArray.map((item) => item.id);
+      this.isLoading = true;
+      const result = await this.paginator(this.page, this.perPage, this.searchParameter, undefined, undefined, { exclude: excludeIds });
+      this.lastPage = result.data.meta.lastPage;
+      this.isLoading = false;
+      return result.data.data;
+    },
+    async loadMore() {
+      this.page++;
+      const result = await this.getPaginator();
+      this.items = [...this.items, ...result];
+    },
+    async handleInitialFetch() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(async () => {
+        if (this.value && this.search === this.value[this.computedAttributes.itemText]) {
+          return;
+        }
+        this.searchParameter = this.search;
+        this.page = 1;
+        this.items = [...this.valuesAsArray];
+        const result = await this.getPaginator();
+        this.items = [...this.items, ...result];
+      }, 200);
+    },
+    refresh() {
+      this.handleInitialFetch();
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KRadioGroup.vue b/generator/templates/Default/src/components/crud/fields/KRadioGroup.vue
new file mode 100644
index 0000000..d1cf11a
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KRadioGroup.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :class="this.grid" class="k-field-wrapper">
+    <v-radio-group v-bind="fieldProps"
+                   v-on="$listeners"
+                   :label="translatedLabel"
+                   :rules="computedRules">
+      <VRadio
+          v-for="(radio, index) in items"
+          :key="index"
+          :label="radio.text"
+          :value="radio.value"
+      />
+    </v-radio-group>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  name: 'KRadioGroup',
+  mixins: [Field],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KSelect.vue b/generator/templates/Default/src/components/crud/fields/KSelect.vue
new file mode 100644
index 0000000..15d3f9b
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KSelect.vue
@@ -0,0 +1,21 @@
+<template>
+  <div :class="this.grid" class="k-field-wrapper">
+    <v-select :label="translatedLabel"
+              :rules="computedRules"
+              v-bind="fieldProps"
+              v-on="$listeners">
+      <template v-for="(_, name) in $slots" v-slot:[name]>
+        <slot :name="name"/>
+      </template>
+    </v-select>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  name: 'KSelect',
+  mixins: [Field],
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KTextField.vue b/generator/templates/Default/src/components/crud/fields/KTextField.vue
new file mode 100644
index 0000000..0302bb8
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KTextField.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="k-field-wrapper" :class="this.grid">
+    <v-text-field :label="translatedLabel"
+                  :rules="computedRules"
+                  v-bind="fieldProps"
+                  v-on="$listeners">
+      <template v-for="(_, name) in $slots" v-slot:[name]>
+        <slot :name="name"/>
+      </template>
+    </v-text-field>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  mixins: [Field],
+  name: 'KTextField',
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KTextarea.vue b/generator/templates/Default/src/components/crud/fields/KTextarea.vue
new file mode 100644
index 0000000..4893ef4
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KTextarea.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="k-field-wrapper" :class="this.grid">
+    <VTextarea :label="translatedLabel"
+               :rules="computedRules"
+               v-bind="fieldProps"
+               v-on="$listeners"/>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+
+export default {
+  mixins: [Field],
+  name: 'KTextarea',
+};
+</script>
diff --git a/generator/templates/Default/src/components/crud/fields/KTimeField.vue b/generator/templates/Default/src/components/crud/fields/KTimeField.vue
new file mode 100644
index 0000000..7b7737e
--- /dev/null
+++ b/generator/templates/Default/src/components/crud/fields/KTimeField.vue
@@ -0,0 +1,87 @@
+<template>
+  <div :class="this.grid" class="k-field-wrapper">
+    <v-menu
+        ref="menu"
+        v-model="menu"
+        :close-on-content-click="false"
+        :return-value.sync="time"
+        max-width="290px"
+        min-width="290px"
+        offset-y
+        transition="scale-transition"
+    >
+      <template #activator="{ on }">
+        <v-text-field
+            ref="field"
+            v-bind="fieldProps"
+            v-on="on"
+            :label="translatedLabel"
+            :rules="computedRules"
+            :value="formattedTime"
+            readonly
+        ></v-text-field>
+      </template>
+      <v-time-picker
+          format="24hr"
+          scrollable
+          no-title
+          v-if="menu"
+          v-model="timePickerTime"
+          @change="$emit('input', $event)"
+          max-width="290px"
+          min-width="290px"
+      >
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="menu = false">{{ $t('actions.cancel') }}</v-btn>
+        <v-btn color="primary" text @click="$refs.menu.save(timePickerTime);$refs.field.validate()">
+          {{ $t('actions.continue') }}
+        </v-btn>
+      </v-time-picker>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+import Field from '@/components/crud/fields/FieldMixin.vue';
+import dayjs from '@/plugins/dayjs';
+
+export default {
+  name: 'KTimeField',
+  mixins: [Field],
+  data: () => ({
+    menu: false,
+    time: '',
+    timePickerTime: '',
+  }),
+  props: {
+    value: {
+      type: String,
+      default: dayjs().format('HH:mm'),
+    },
+    format: {
+      type: String,
+      default: 'HH:MM',
+    },
+  },
+  watch: {
+    time() {
+      this.$emit('input', this.time);
+    },
+    value() {
+      this.time = this.value;
+      this.timePickerTime = this.value;
+    },
+  },
+  created() {
+    this.time = this.value || dayjs().format('HH:mm');
+  },
+  computed: {
+    formattedTime() {
+      if (!this.time) {
+        return '';
+      }
+      return dayjs(`1970-00-00T${this.time}`).format(this.format);
+    },
+  },
+};
+</script>
diff --git a/generator/templates/Default/src/components/menu/Menu.vue b/generator/templates/Default/src/components/menu/Menu.vue
index 74fd5c0..d8ede5a 100644
--- a/generator/templates/Default/src/components/menu/Menu.vue
+++ b/generator/templates/Default/src/components/menu/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list>
+  <v-list nav>
     <div :key="item.title" v-for="item in items">
       <v-list-item-group
           :disabled="item.disabled"
diff --git a/generator/templates/Default/src/components/menu/MainMenu.vue b/generator/templates/Default/src/components/menu/TheMainMenu.vue
similarity index 91%
rename from generator/templates/Default/src/components/menu/MainMenu.vue
rename to generator/templates/Default/src/components/menu/TheMainMenu.vue
index fbddc96..c2073a2 100644
--- a/generator/templates/Default/src/components/menu/MainMenu.vue
+++ b/generator/templates/Default/src/components/menu/TheMainMenu.vue
@@ -2,7 +2,7 @@
 import Menu from './Menu.vue';
 
 export default {
-  name: 'MainMenu',
+  name: 'TheMainMenu',
   extends: Menu,
   computed: {
     items: () => [
diff --git a/generator/templates/Default/src/eventBus.js b/generator/templates/Default/src/eventBus.js
new file mode 100644
index 0000000..1866700
--- /dev/null
+++ b/generator/templates/Default/src/eventBus.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+
+const EventBus = new Vue();
+export default EventBus;
diff --git a/generator/templates/Default/src/locales/nl/actions.json b/generator/templates/Default/src/locales/nl/actions.json
new file mode 100644
index 0000000..003319e
--- /dev/null
+++ b/generator/templates/Default/src/locales/nl/actions.json
@@ -0,0 +1,15 @@
+{
+    "cancel": "annuleren",
+    "continue": "doorgaan",
+    "save": "opslaan",
+    "create": "aanmaken",
+    "remove": "verwijderen",
+    "back": "terug",
+    "loadMore": "Meer laden",
+    "createResource": "{resource} aanmaken",
+    "updateResource": "{resource} bewerken",
+    "deleteConfirmation": {
+        "title": "Weet je het zeker?",
+        "body": "Je staat op het punt om dit {resource} te verwijderen, weet je zeker dat je door wilt gaan?"
+    }
+}
diff --git a/generator/templates/Default/src/locales/nl/errors.json b/generator/templates/Default/src/locales/nl/errors.json
new file mode 100644
index 0000000..b37c163
--- /dev/null
+++ b/generator/templates/Default/src/locales/nl/errors.json
@@ -0,0 +1,4 @@
+{
+    "422": "De ingevulde gegevens kloppen niet.",
+    "429": "Je hebt te veel foutieve pogingen gedaan. Probeer het over {minutes} minuten opnieuw"
+}
diff --git a/generator/templates/Default/src/locales/nl/global.json b/generator/templates/Default/src/locales/nl/global.json
new file mode 100644
index 0000000..83a774c
--- /dev/null
+++ b/generator/templates/Default/src/locales/nl/global.json
@@ -0,0 +1,3 @@
+{
+    "dashboard": "Dashboard"
+}
diff --git a/generator/templates/Default/src/locales/nl/validation.json b/generator/templates/Default/src/locales/nl/validation.json
new file mode 100644
index 0000000..c73a12d
--- /dev/null
+++ b/generator/templates/Default/src/locales/nl/validation.json
@@ -0,0 +1,4 @@
+{
+    "validationError": "Niet alle velden zijn juist ingevuld. Pas de rood gemarkeerde velden aan.",
+    "required": "{field} is verplicht"
+}
diff --git a/generator/templates/Default/src/newmain.js b/generator/templates/Default/src/newmain.js
index 93eb674..24bdd62 100644
--- a/generator/templates/Default/src/newmain.js
+++ b/generator/templates/Default/src/newmain.js
@@ -1,6 +1,6 @@
 import '@babel/polyfill'
 import Vue from 'vue'
-import {vuetify} from './plugins';
+import { i18n, vuetify } from './plugins';
 <%_ if (options.useCrud) { _%>
 import VuetifyResource from '@kingscode/vuetify-resource';
 <%_ } _%>
@@ -22,6 +22,7 @@ Vue.config.productionTip = false;
 new Vue({
     router,
     vuetify,
+    i18n,
 <%_ if (options.useAuthorisation) { _%>
     store,
 <%_ } _%>
diff --git a/generator/templates/Default/src/plugins/i18n.js b/generator/templates/Default/src/plugins/i18n.js
new file mode 100644
index 0000000..d7d2615
--- /dev/null
+++ b/generator/templates/Default/src/plugins/i18n.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+const locales = { nl: require.context('@/locales/nl', true, /[A-Za-z0-9-_,\s]+\.json$/i) };
+Vue.use(VueI18n);
+
+function loadLocaleMessages() {
+  const messages = {};
+  Object.keys(locales).forEach((locale) => {
+    messages[locale] = {};
+    const components = locales[locale];
+
+    components.keys().forEach(component => {
+      const matched = component.match(/([A-Za-z0-9-_]+)\./i);
+      const componentName = matched[1];
+      messages[locale][componentName] = components(component);
+    });
+  });
+  return messages;
+}
+
+export default new VueI18n({
+  locale: 'nl' || navigator.language.split('-')[0],
+  fallbackLocale: 'nl',
+  messages: loadLocaleMessages(),
+});
diff --git a/generator/templates/Default/src/plugins/index.js b/generator/templates/Default/src/plugins/index.js
index 0932732..4d6d2d3 100644
--- a/generator/templates/Default/src/plugins/index.js
+++ b/generator/templates/Default/src/plugins/index.js
@@ -5,8 +5,12 @@ import './analytics';
 <%_ if (options.plugins.includes('sentry')) { _%>
 import './sentry';
 <%_ } _%>
+import i18n from './i18n';
 import vuetify from './vuetify';
 
 cssVars();
 
-export {vuetify};
+export {
+  i18n, vuetify,
+};
+
diff --git a/generator/templates/Default/src/plugins/vuetify.js b/generator/templates/Default/src/plugins/vuetify.js
index d451cb1..c1d7f50 100644
--- a/generator/templates/Default/src/plugins/vuetify.js
+++ b/generator/templates/Default/src/plugins/vuetify.js
@@ -32,15 +32,11 @@ export default new Vuetify({
         },
 <%_ } _%>
     },
-    customProperties: true,
     lang: {
         locales: {nl},
         current: 'nl',
     },
     theme: {
-        options: {
-            customProperties: true,
-        },
         themes: {
             light: {
                 primary: '#002F4E',
diff --git a/generator/templates/Default/src/router/guards/AuthorisationGuard.js b/generator/templates/Default/src/router/guards/AuthorisationGuard.js
new file mode 100644
index 0000000..e4a8746
--- /dev/null
+++ b/generator/templates/Default/src/router/guards/AuthorisationGuard.js
@@ -0,0 +1,4 @@
+export default function (to, from, next) {
+  // @TODO place your guard here
+  next();
+}
diff --git a/generator/templates/Default/src/router/index.js b/generator/templates/Default/src/router/index.js
index 5ec4d1d..64a1553 100644
--- a/generator/templates/Default/src/router/index.js
+++ b/generator/templates/Default/src/router/index.js
@@ -1,91 +1,33 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 <%_ if (options.useAuthorisation) { _%>
-import AuthorisationGuard from '../guards/AuthorisationGuard';
+import authorisation from './routes/authorisation.js';
 <%_ } _%>
+import authorised from './routes/authorised.js';
 
 Vue.use(Router);
 
+const routes = [
+  {
+    path: '',
+    redirect: { name: 'home' },
+  },
+<%_ if (options.useAuthorisation) { _%>
+  authorisation,
+<%_ } _%>
+  authorised,
+];
+
+
+routes.push(
+  {
+    path: '*',
+    redirect: '404',
+  },
+);
+
 export default new Router({
-    mode: 'history',
-    base: process.env.BASE_URL,
-    routes: [
-        {
-            path: '',
-            redirect: {name: 'home'},
-        },
-        <%_ if (options.useAuthorisation) { _%>
-        {
-            path: '',
-            component: () => import('@/templates/Authorisation'),
-            children: [
-                {
-                    path: '/login',
-                    name: 'login',
-                    component: () => import('@/views/Login'),
-                },
-                {
-                    path: '/auth/callback',
-                    name: 'auth.callback',
-                    component: () => import('@/views/AuthorisationCallback'),
-                },
-                {
-                    path: '/password/forgotten',
-                    name: 'password.forgotten',
-                    component: () => import('@/views/PasswordForgotten.vue'),
-                },
-                {
-                    path: '/password/reset/:token',
-                    name: 'password.reset',
-                    component: () => import('@/views/PasswordReset.vue'),
-                },
-                {
-                    path: '/invitation/accept/:token',
-                    name: 'invitation.accept',
-                    component: () => import('@/views/InvitationAccept.vue'),
-                },
-                {
-                    path: '/registration/verify',
-                    name: 'registration.verify',
-                    component: () => import('@/views/Verify.vue'),
-                },
-            ]
-        },
-         <%_ } _%>
-        {
-            path: '',
-            <%_ if (options.useAuthorisation) { _%>
-            beforeEnter: AuthorisationGuard,
-            <%_ } _%>
-            component: () => import('@/templates/Default'),
-            children: [
-                {
-                    path: '/',
-                    name: 'home',
-                    component: () => import('@/views/Home'),
-                },
-                 <%_ if (options.useCrud) { _%>
-                {
-                    path: '/users',
-                    name: 'users',
-                    component: () => import('@/views/UserResource.vue')
-                },
-                  <%_ } _%>
-                {
-                    path: '/404',
-                    name: '404',
-                    component: () => import('@/views/PageNotFound.vue'),
-                },
-                {
-                    path: '/403',
-                    name: '403',
-                    component: () => import('@/views/PageForbidden.vue'),
-                },
-                {
-                    path: '*',
-                    redirect: '/404'
-                },
-            ],
-        },
-    ],
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: routes,
 });
diff --git a/generator/templates/Default/src/router/routes/authorised.js b/generator/templates/Default/src/router/routes/authorised.js
new file mode 100644
index 0000000..a83f8ac
--- /dev/null
+++ b/generator/templates/Default/src/router/routes/authorised.js
@@ -0,0 +1,14 @@
+import AuthorisationGuard from '@/router/guards/AuthorisationGuard.js';
+
+export default {
+  path: '',
+  beforeEnter: AuthorisationGuard,
+  component: () => import('@/templates/Default'),
+  children: [
+    {
+      path: '',
+      name: 'home',
+      component: () => import('@/views/Home'),
+    },
+  ]
+}
diff --git a/generator/templates/Default/src/scss/main.scss b/generator/templates/Default/src/scss/main.scss
new file mode 100644
index 0000000..be80a8b
--- /dev/null
+++ b/generator/templates/Default/src/scss/main.scss
@@ -0,0 +1,30 @@
+@import "~vuetify/src/styles/styles.sass";
+
+@include theme(v-application) using($material) {
+  .text-color-theme {
+    color: map-deep-get($material, "text", "theme")
+  }
+  .text-color-primary {
+    color: map-deep-get($material, "text", "primary")
+  }
+  .text-color-secondary {
+    color: map-deep-get($material, "text", "secondary")
+  }
+  .text-color-disabled {
+    color: map-deep-get($material, "text", "disabled")
+  }
+  .text-color-link {
+    color: map-deep-get($material, "text", "link")
+  }
+  .surface-background {
+    background-color: map-get($material, "surface");
+  }
+}
+
+/**
+ * Hotfix, hope vuetify fixes this one day
+ * https://github.com/vuetifyjs/vuetify/issues/8541
+ */
+.v-icon.fas, .v-icon.fal, .v-icon.far {
+  width: 20px;
+}
diff --git a/generator/templates/Default/src/scss/variables.scss b/generator/templates/Default/src/scss/variables.scss
new file mode 100644
index 0000000..e69de29
diff --git a/generator/templates/Default/src/store/modules/error.js b/generator/templates/Default/src/store/modules/error.js
index d7e8a96..2dec0f9 100644
--- a/generator/templates/Default/src/store/modules/error.js
+++ b/generator/templates/Default/src/store/modules/error.js
@@ -4,28 +4,31 @@ export default {
     errors: [],
   },
   mutations: {
-    remove: (state, key) => state.errors.splice(state.errors.findIndex(x => x.key === key), 1),
-    clear: state => state.errors = [],
+    remove: (state, key) => state.errors.splice(state.errors.findIndex((x) => x.key === key), 1),
+    clear: (state) => {
+      state.errors = [];
+    },
     add: (state, { message, key }) => {
-      const target = state.errors.find(x => x.key === key);
+      const target = state.errors.find((x) => x.key === key);
 
       if (!target) {
         return state.errors.push({
-          key: key,
-          message: message,
+          key,
+          message,
         });
       }
 
       target.message = message;
+      return state.errors;
     },
   },
   getters: {
-    find: state => key => {
-      const error = state.errors.find(x => x.key === key);
+    find: (state) => (key) => {
+      const error = state.errors.find((x) => x.key === key);
 
       return error ? error.message : '';
     },
-    first: state => {
+    first: (state) => {
       if (!state.errors.length) {
         return '';
       }
diff --git a/generator/templates/Default/src/templates/Default.vue b/generator/templates/Default/src/templates/Default.vue
index cf83c88..a0a9fb1 100644
--- a/generator/templates/Default/src/templates/Default.vue
+++ b/generator/templates/Default/src/templates/Default.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="isLoggedIn">
     <v-navigation-drawer
+        v-model="isMenuOpen"
         app
         fixed
-        v-model="isMenuOpen"
     >
       <router-link :to="{name: 'home'}">
         <img :src="require('../assets/logo.png')" class="logo">
       </router-link>
       <v-divider class="mt-10"/>
-      <MainMenu/>
+      <TheMainMenu/>
     </v-navigation-drawer>
     <v-app-bar app color="primary" dark mfixed>
       <v-app-bar-nav-icon @click.stop="isMenuOpen = !isMenuOpen"></v-app-bar-nav-icon>
@@ -18,6 +18,9 @@
       <AppBarMenu/>
     </v-app-bar>
     <v-main>
+      <v-row class="ma-3 mb-0">
+        <Breadcrumbs class="breadcrumbs"/>
+      </v-row>
       <router-view/>
     </v-main>
     <v-footer app color="primary" inset>
@@ -27,15 +30,17 @@
 </template>
 
 <script>
+import AppBarMenu from '@/components/AppBarMenu.vue';
+import TheMainMenu from '@/components/menu/TheMainMenu.vue';
 import { mapGetters } from 'vuex';
-import AppBarMenu from '../components/AppBarMenu.vue';
-import MainMenu from './../components/menu/MainMenu.vue';
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
 
 export default {
   name: 'Default',
   components: {
+    Breadcrumbs,
     AppBarMenu,
-    MainMenu,
+    TheMainMenu,
   },
   data() {
     return {
diff --git a/generator/templates/Default/src/views/Home.vue b/generator/templates/Default/src/views/Home.vue
index 3ab6210..f0807a3 100644
--- a/generator/templates/Default/src/views/Home.vue
+++ b/generator/templates/Default/src/views/Home.vue
@@ -1,12 +1,23 @@
 <template>
-  <div>
+  <v-container>
     You now can remove this and create your own homepage, or in the router.js create a redirect to one of the other
     views, so that becomes the homepage
-  </div>
+  </v-container>
 </template>
 
 <script lang="js">
+import eventBus from '@/eventBus.js';
+
 export default {
   name: 'Home',
+  created() {
+    eventBus.$emit('setBreadcrumbs', [
+      {
+        exact: true,
+        to: { name: 'home' },
+        text: this.$t('global.dashboard'),
+      },
+    ]);
+  },
 };
 </script>
diff --git a/package.json b/package.json
index 4c01e1d..616f9dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-cli-plugin-kingscode-scaffold",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "description": "",
     "main": "index.js",
     "scripts": {
diff --git a/prompts.js b/prompts.js
index c1d8c73..ef21f2c 100644
--- a/prompts.js
+++ b/prompts.js
@@ -2,7 +2,7 @@ module.exports = [
     {
         name: 'useCrud',
         type: 'confirm',
-        message: 'Do you want to use a crud system?',
+        message: 'Do you want to use a crud system? (with the package vuetify-resource)',
         default: true,
     },
     {