diff --git a/src/entities/klanten/klanten.ts b/src/entities/klanten/klanten.ts
index aa02342..382005c 100644
--- a/src/entities/klanten/klanten.ts
+++ b/src/entities/klanten/klanten.ts
@@ -11,7 +11,7 @@ export class Klant implements TKlant {
 	public achternaam: string
 	public bsn: string
 	public geboortedatum: string
-	public geslacht: "man" | "vrouw" | "overige"
+	public geslacht: 'man' | 'vrouw' | 'overige'
 	public land: string
 
 	public telefoonnummer: string
@@ -71,7 +71,7 @@ export class Klant implements TKlant {
 			achternaam: z.string(),
 			bsn: z.string(),
 			geboortedatum: z.string(),
-			geslacht: z.enum(["man", "vrouw", "overige"]).or(z.null()),
+			geslacht: z.enum(['man', 'vrouw', 'overige']).or(z.null()),
 			land: z.string(),
 			telefoonnummer: z.string(),
 			emailadres: z.string().email(),
diff --git a/src/entities/medewerkers/medewerkers.mock.ts b/src/entities/medewerkers/medewerkers.mock.ts
index c1f4d55..324455f 100644
--- a/src/entities/medewerkers/medewerkers.mock.ts
+++ b/src/entities/medewerkers/medewerkers.mock.ts
@@ -12,4 +12,5 @@ export const mockMedewerkerData = (): TMedewerker[] => [
 	},
 ]
 
-export const mockMedewerker = (data: TMedewerker[] = mockMedewerkerData()): TMedewerker[] => data.map(item => new Medewerker(item))
+export const mockMedewerker = (data: TMedewerker[] = mockMedewerkerData()): TMedewerker[] =>
+	data.map((item) => new Medewerker(item))
diff --git a/src/entities/medewerkers/medewerkers.types.ts b/src/entities/medewerkers/medewerkers.types.ts
index df6ec55..c3045e7 100644
--- a/src/entities/medewerkers/medewerkers.types.ts
+++ b/src/entities/medewerkers/medewerkers.types.ts
@@ -1,8 +1,8 @@
 export type TMedewerker = {
-    id: string;
-    voornaam: string;
-    tussenvoegsel: string;
-    achternaam: string;
-    email: string;
-    telefoonnummer: string;
-}
+  id: string;
+  voornaam: string;
+  tussenvoegsel: string;
+  achternaam: string;
+  email: string;
+  telefoonnummer: string;
+};
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 422209a..a9ce29b 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -29,21 +29,28 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 								<NcNoteCard type="info" class="noteCard">
 									<template #default>
 										<div v-if="contactMomenten[i].klant">
-											{{ `${getSex(contactMomenten[i].klant)} ${getName(contactMomenten[i].klant)}` }}
-											<div v-if="contactMomenten[i].klant?.type === 'persoon'" class="flexContainer">
+											{{ `${getSex(contactMomenten[i].klant)}
+											${getName(contactMomenten[i].klant)}` }}
+											<div v-if="contactMomenten[i].klant?.type === 'persoon'"
+												class="flexContainer">
 												<div>
-													Geboortedatum: {{ getValidISOstring(contactMomenten[i].klant?.geboortedatum) ? new Date(contactMomenten[i].klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+													Geboortedatum: {{
+														getValidISOstring(contactMomenten[i].klant?.geboortedatum) ? new
+															Date(contactMomenten[i].klant?.geboortedatum).toLocaleDateString() :
+														'N/A' }}
 												</div>
 												<div>
 													Geboorteplaats: {{ contactMomenten[i].klant?.plaats ?? 'N/A' }}
 												</div>
 											</div>
-											<div v-if="contactMomenten[i].klant?.type === 'organisatie'" class="flexContainer">
+											<div v-if="contactMomenten[i].klant?.type === 'organisatie'"
+												class="flexContainer">
 												<div>
 													KVK: {{ contactMomenten[i].klant?.kvkNummer ?? 'N/A' }}
 												</div>
 												<div>
-													Locatie: {{ contactMomenten[i].klant?.postcode ?? 'N/A' }} {{ contactMomenten[i].klant?.straatnaam ?? 'N/A' }}
+													Locatie: {{ contactMomenten[i].klant?.postcode ?? 'N/A' }} {{
+														contactMomenten[i].klant?.straatnaam ?? 'N/A' }}
 												</div>
 											</div>
 										</div>
@@ -55,8 +62,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 							</div>
 							<div v-if="!contactMomenten[i].klant" class="buttonsContainer">
 								<div>
-									<NcButton
-										:disabled="loading"
+									<NcButton :disabled="loading"
 										:loading="fetchLoading"
 										type="primary"
 										@click="openSearchKlantModal('persoon')">
@@ -70,8 +76,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									of
 								</div>
 								<div>
-									<NcButton
-										:disabled="loading"
+									<NcButton :disabled="loading"
 										:loading="fetchLoading"
 										type="primary"
 										@click="openSearchKlantModal('organisatie')">
@@ -85,8 +90,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 							<div v-if="contactMomenten[i].klant && !isView" class="buttonsContainer">
 								<div>
-									<NcButton
-										:disabled="loading"
+									<NcButton :disabled="loading"
 										:loading="fetchLoading"
 										type="primary"
 										@click="contactMomenten[i].klant = null">
@@ -116,9 +120,11 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 						</div>
 						<div class="tabContainer">
 							<BTabs content-class="mt-3" justified>
-								<BTab :title="`Contactmomenten ${contactMomenten[i].klant ? (contactMomenten[i].klantContactmomenten?.length ? `(${contactMomenten[i].klantContactmomenten.length})` : '(0)') : ''}`">
+								<BTab
+									:title="`Contactmomenten ${contactMomenten[i].klant ? (contactMomenten[i].klantContactmomenten?.length ? `(${contactMomenten[i].klantContactmomenten.length})` : '(0)') : ''}`">
 									<div v-if="contactMomenten[i].klantContactmomenten?.length">
-										<NcListItem v-for="(klantContactmoment, key) in contactMomenten[i].klantContactmomenten"
+										<NcListItem
+											v-for="(klantContactmoment, key) in contactMomenten[i].klantContactmomenten"
 											:key="key"
 											:name="getName(contactMomenten[i].klant)"
 											:bold="false"
@@ -139,7 +145,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 										</template>
 									</NcEmptyContent>
 								</BTab>
-								<BTab :title="`Zaken ${contactMomenten[i].klant ? (contactMomenten[i].zaken?.length ? `(${contactMomenten[i].zaken.length})` : '(0)') : ''}`">
+								<BTab
+									:title="`Zaken ${contactMomenten[i].klant ? (contactMomenten[i].zaken?.length ? `(${contactMomenten[i].zaken.length})` : '(0)') : ''}`">
 									<div v-if="contactMomenten[i].zaken?.length">
 										<NcListItem v-for="(zaak, key) in contactMomenten[i].zaken"
 											:key="key"
@@ -165,7 +172,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 										</template>
 									</NcEmptyContent>
 								</BTab>
-								<BTab :title="`Taken ${contactMomenten[i].klant ? (contactMomenten[i].taken?.length ? `(${contactMomenten[i].taken.length})` : '(0)') : ''}`">
+								<BTab
+									:title="`Taken ${contactMomenten[i].klant ? (contactMomenten[i].taken?.length ? `(${contactMomenten[i].taken.length})` : '(0)') : ''}`">
 									<div v-if="contactMomenten[i].taken?.length">
 										<NcListItem v-for="(taak, key) in contactMomenten[i].taken"
 											:key="key"
@@ -192,9 +200,11 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 										</template>
 									</NcEmptyContent>
 								</BTab>
-								<BTab :title="`Producten ${contactMomenten[selectedContactMoment].klant ? (contactMomenten[selectedContactMoment].klant?.producten?.length ? `(${contactMomenten[selectedContactMoment].klant?.producten?.length})` : '(0)') : ''}`">
+								<BTab
+									:title="`Producten ${contactMomenten[selectedContactMoment].klant ? (contactMomenten[selectedContactMoment].klant?.producten?.length ? `(${contactMomenten[selectedContactMoment].klant?.producten?.length})` : '(0)') : ''}`">
 									<div v-if="contactMomenten[selectedContactMoment].klant?.producten?.length">
-										<NcListItem v-for="(product, key) in contactMomenten[selectedContactMoment].klant.producten"
+										<NcListItem
+											v-for="(product, key) in contactMomenten[selectedContactMoment].klant.producten"
 											:key="key"
 											:name="product.naam ?? 'N/A'"
 											:bold="false"
@@ -224,9 +234,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 							@selected-klant="fetchKlantData($event)"
 							@close-modal="closeSearchKlantModal" />
 					</div>
-					<NcButton
-						v-if="tabs.length > 1 && !success"
-						@click="closeTab(i)">
+					<NcButton v-if="tabs.length > 1 && !success" @click="closeTab(i)">
 						Close tab
 					</NcButton>
 				</BTab>
@@ -257,7 +265,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									{{ `${getSex(klant)} ${getName(klant)}` }}
 									<div v-if="klant?.type === 'persoon'" class="flexContainer">
 										<div>
-											Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+											Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new
+												Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
 										</div>
 										<div>
 											Geboorteplaats: {{ klant?.plaats ?? 'N/A' }}
@@ -280,8 +289,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</div>
 					<div v-if="!klant" class="buttonsContainer">
 						<div>
-							<NcButton
-								:disabled="loading"
+							<NcButton :disabled="loading"
 								:loading="fetchLoading"
 								type="primary"
 								@click="openSearchKlantModal('persoon')">
@@ -295,8 +303,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 							of
 						</div>
 						<div>
-							<NcButton
-								:disabled="loading"
+							<NcButton :disabled="loading"
 								:loading="fetchLoading"
 								type="primary"
 								@click="openSearchKlantModal('organisatie')">
@@ -310,8 +317,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 					<div v-if="klant && !isView" class="buttonsContainer">
 						<div>
-							<NcButton
-								:disabled="loading"
+							<NcButton :disabled="loading"
 								:loading="fetchLoading"
 								type="primary"
 								@click="klant = null">
@@ -341,7 +347,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				</div>
 				<div class="tabContainer">
 					<BTabs content-class="mt-3" justified>
-						<BTab :title="`Contactmomenten ${klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
+						<BTab
+							:title="`Contactmomenten ${klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
 							<div v-if="klantContactmomenten.length">
 								<NcListItem v-for="(klantContactmoment, key) in klantContactmomenten"
 									:key="key"
@@ -415,7 +422,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 								</template>
 							</NcEmptyContent>
 						</BTab>
-						<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
+						<BTab
+							:title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
 							<div v-if="klant?.producten?.length">
 								<NcListItem v-for="(product, key) in klant.producten"
 									:key="key"
@@ -448,10 +456,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			</div>
 		</div>
 		<template #actions>
-			<NcButton
-				:disabled="loading || success"
-				type="secondary"
-				@click="closeModal()">
+			<NcButton :disabled="loading || success" type="secondary" @click="closeModal()">
 				<template #icon>
 					<Cancel :size="20" />
 				</template>
@@ -482,15 +487,16 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</template>
 					Zaak starten
 				</NcActionButton>
-				<NcActionButton v-if="isView" :disabled="contactMoment.status === 'gesloten'" @click="closeContactMoment(contactMoment.id)">
+				<NcActionButton v-if="isView"
+					:disabled="contactMoment.status === 'gesloten'"
+					@click="closeContactMoment(contactMoment.id)">
 					<template #icon>
 						<ProgressClose :size="20" />
 					</template>
 					Sluit Contactmoment
 				</NcActionButton>
 			</NcActions>
-			<NcButton
-				v-if="!isView"
+			<NcButton v-if="!isView"
 				type="primary"
 				:disabled="!contactMomenten[selectedContactMoment].klant || loading || success || fetchLoading"
 				:loading="loading"
@@ -974,54 +980,55 @@ div[class='modal-container']:has(.ContactMomentenForm) {
 
 <style scoped>
 .rolDetailsContainer {
-    margin-block-start: var(--zaa-margin-20);
-    margin-inline-start: var(--zaa-margin-20);
-    margin-inline-end: var(--zaa-margin-20);
+	margin-block-start: var(--zaa-margin-20);
+	margin-inline-start: var(--zaa-margin-20);
+	margin-inline-end: var(--zaa-margin-20);
 }
 
 .success {
-    color: green;
+	color: green;
 }
 
 .headerContainer {
-    display: flex;
-    gap: 200px;
+	display: flex;
+	gap: 200px;
 }
 
 .noteCard {
-    min-width: 350px;
+	min-width: 350px;
 }
 
 .orContainer {
-    margin-inline: var(--zaa-margin-10);
+	margin-inline: var(--zaa-margin-10);
 }
 
 .buttonsContainer {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .form-group {
-    margin-block-end: 100px;
+	margin-block-end: 100px;
 }
 
 .tabContainer {
-    margin-block-end: var(--zaa-margin-20);
+	margin-block-end: var(--zaa-margin-20);
 }
 
-.newTabButton > a {
+.newTabButton>a {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
 .modalButtonsContainer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--zaa-margin-10);
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--zaa-margin-10);
 }
 
-.flexContainer, .statusContainer {
+.flexContainer,
+.statusContainer {
 	display: flex;
 	gap: var(--zaa-margin-10);
 }
diff --git a/src/modals/klantRegister/ViewKlantRegister.vue b/src/modals/klantRegister/ViewKlantRegister.vue
index 5d75e4d..416abdb 100644
--- a/src/modals/klantRegister/ViewKlantRegister.vue
+++ b/src/modals/klantRegister/ViewKlantRegister.vue
@@ -117,7 +117,8 @@ import { taakStore, navigationStore, zaakStore, klantStore, contactMomentStore }
 								<ChatOutline :size="44" />
 							</template>
 							<template #actions>
-								<NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('viewBericht')">
+								<NcActionButton
+									@click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('viewBericht')">
 									<template #icon>
 										<Eye :size="20" />
 									</template>
@@ -379,59 +380,59 @@ export default {
 </script>
 <style>
 .detailContainer {
-  margin-block-start: var(--zaa-margin-20);
-  margin-inline-start: var(--zaa-margin-20);
-  margin-inline-end: var(--zaa-margin-20);
+	margin-block-start: var(--zaa-margin-20);
+	margin-inline-start: var(--zaa-margin-20);
+	margin-inline-end: var(--zaa-margin-20);
 }
 
-.tabContainer > * ul > li {
-  display: flex;
-  flex: 1;
+.tabContainer>* ul>li {
+	display: flex;
+	flex: 1;
 }
 
-.tabContainer > * ul > li:hover {
-  background-color: var(--color-background-hover);
+.tabContainer>* ul>li:hover {
+	background-color: var(--color-background-hover);
 }
 
-.tabContainer > * ul > li > a {
-  flex: 1;
-  text-align: center;
+.tabContainer>* ul>li>a {
+	flex: 1;
+	text-align: center;
 }
 
-.tabContainer > * ul > li > .active {
-  background: transparent !important;
-  color: var(--color-main-text) !important;
-  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+.tabContainer>* ul>li>.active {
+	background: transparent !important;
+	color: var(--color-main-text) !important;
+	border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
 }
 
-.tabContainer > * ul[role="tablist"] {
-  display: flex;
-  margin: 10px 8px 0 8px;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--color-border);
+.tabContainer>* ul[role="tablist"] {
+	display: flex;
+	margin: 10px 8px 0 8px;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--color-border);
 }
 
-.tabContainer > * ul[role="tablist"] > * a[role="tab"] {
-  padding-inline-start: 10px;
-  padding-inline-end: 10px;
-  padding-block-start: 10px;
-  padding-block-end: 10px;
+.tabContainer>* ul[role="tablist"]>* a[role="tab"] {
+	padding-inline-start: 10px;
+	padding-inline-end: 10px;
+	padding-block-start: 10px;
+	padding-block-end: 10px;
 }
 
-.tabContainer > * div[role="tabpanel"] {
-  margin-block-start: var(--zaa-margin-10);
+.tabContainer>* div[role="tabpanel"] {
+	margin-block-start: var(--zaa-margin-10);
 }
 
 .tabPanel {
-  padding: 20px 10px;
-  min-height: 100%;
-  max-height: 100%;
-  height: 100%;
-  overflow: auto;
+	padding: 20px 10px;
+	min-height: 100%;
+	max-height: 100%;
+	height: 100%;
+	overflow: auto;
 }
 
 .detailGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 }
 </style>
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
index 6b2d802..3fbc5b7 100644
--- a/src/modals/klanten/SearchKlantModal.vue
+++ b/src/modals/klanten/SearchKlantModal.vue
@@ -3,8 +3,7 @@ import { klantStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog
-		:name="startingType === 'persoon' ? 'Persoon zoeken' : 'Organisatie zoeken'"
+	<NcDialog :name="startingType === 'persoon' ? 'Persoon zoeken' : 'Organisatie zoeken'"
 		size="normal"
 		label-id="searchKlantModal"
 		dialog-classes="SearchKlantModal"
@@ -65,9 +64,7 @@ import { klantStore } from '../../store/store.js'
 			<div class="searchInputContainer">
 				<p>{{ searchLabel }}</p>
 				<div v-if="klantenSearchType === 'geboortedatum_achternaam'" class="flex">
-					<NcDateTimePicker v-model="searchQuery[0]"
-						:disabled="loading"
-						class="date-picker" />
+					<NcDateTimePicker v-model="searchQuery[0]" :disabled="loading" class="date-picker" />
 
 					<NcTextField :disabled="loading"
 						label="achternaam"
@@ -145,18 +142,13 @@ import { klantStore } from '../../store/store.js'
 		</div>
 
 		<template #actions>
-			<NcButton
-				type="secondary"
-				@click="closeModal()">
+			<NcButton type="secondary" @click="closeModal()">
 				<template #icon>
 					<Cancel :size="20" />
 				</template>
 				Annuleer
 			</NcButton>
-			<NcButton
-				type="primary"
-				:disabled="!selectedKlant"
-				@click="addKlant()">
+			<NcButton type="primary" :disabled="!selectedKlant" @click="addKlant()">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -354,9 +346,7 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
+<style></style>
 
 <style scoped>
 .listContainer {
@@ -372,12 +362,15 @@ export default {
 	align-items: end;
 	gap: 10px;
 }
+
 .searchInputContainer :deep(.input-field) {
 	margin-block-end: 3px;
 }
+
 .searchField {
 	width: auto;
 }
+
 .searchButton {
 	margin-block-start: 3px;
 	margin-block-end: 3px;
diff --git a/src/modals/medewerkers/EditMedewerker.vue b/src/modals/medewerkers/EditMedewerker.vue
index 0d0f98b..27ebf0c 100644
--- a/src/modals/medewerkers/EditMedewerker.vue
+++ b/src/modals/medewerkers/EditMedewerker.vue
@@ -3,9 +3,7 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog name="Medewerker"
-		size="normal"
-		:can-close="false">
+	<NcDialog name="Medewerker" size="normal" :can-close="false">
 		<NcNoteCard v-if="success" type="success">
 			<p>Medewerker succesvol aangepast</p>
 		</NcNoteCard>
@@ -49,7 +47,8 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 				</template>
 				{{ success ? 'Sluiten' : 'Annuleer' }}
 			</NcButton>
-			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+			<NcButton
+				@click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
 				<template #icon>
 					<Help :size="20" />
 				</template>
diff --git a/src/modals/zaakTypen/DeleteZaaktype.vue b/src/modals/zaakTypen/DeleteZaaktype.vue
index fe1edff..ebee5f6 100644
--- a/src/modals/zaakTypen/DeleteZaaktype.vue
+++ b/src/modals/zaakTypen/DeleteZaaktype.vue
@@ -3,11 +3,10 @@ import { zaakTypeStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog name="Zaaktype verwijderen"
-		size="normal"
-		:can-close="false">
+	<NcDialog name="Zaaktype verwijderen" size="normal" :can-close="false">
 		<p v-if="success === null">
-			Weet u zeker dat u <b>{{ zaakTypeStore.zaakTypeItem?.identificatie }}</b> permanent wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+			Weet u zeker dat u <b>{{ zaakTypeStore.zaakTypeItem?.identificatie }}</b> permanent wilt verwijderen? Deze
+			actie kan niet ongedaan worden gemaakt.
 		</p>
 
 		<div v-if="success !== null">
diff --git a/src/modals/zaakTypen/ZaaktypeForm.vue b/src/modals/zaakTypen/ZaaktypeForm.vue
index 088181d..650f9f9 100644
--- a/src/modals/zaakTypen/ZaaktypeForm.vue
+++ b/src/modals/zaakTypen/ZaaktypeForm.vue
@@ -17,151 +17,96 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 			</div>
 
 			<div v-if="success === null" class="form-group">
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.identificatie"
 					label="Identificatie"
 					maxlength="255"
 					required />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.omschrijving"
 					label="Omschrijving"
 					maxlength="255" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.omschrijvingGeneriek"
 					label="omschrijvingGeneriek"
 					maxlength="9"
 					required />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.vertrouwelijkheidaanduiding"
 					label="vertrouwelijkheidaanduiding"
 					maxlength="9"
 					required />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.doel"
 					label="doel"
 					maxlength="9"
 					required />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.aanleiding"
 					label="aanleiding"
 					required />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.toelichting"
 					label="toelichting"
 					maxlength="255" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.indicatieInternOfExtern"
 					label="indicatieInternOfExtern" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.handelingInitiator"
-					label="handelingInitiator" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.handelingInitiator" label="handelingInitiator" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.onderwerp"
-					label="onderwerp" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.onderwerp" label="onderwerp" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.handelingBehandelaar"
 					label="handelingBehandelaar" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.doorlooptijd"
-					label="doorlooptijd" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.doorlooptijd" label="doorlooptijd" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.servicenorm"
-					label="servicenorm" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.servicenorm" label="servicenorm" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.opschortingEnAanhoudingMogelijk"
 					label="opschortingEnAanhoudingMogelijk" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.verlengingMogelijk"
-					label="verlengingMogelijk" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.verlengingMogelijk" label="verlengingMogelijk" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.verlengingstermijn"
-					label="trefwoorden" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.verlengingstermijn" label="trefwoorden" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.publicatieIndicatie"
 					label="publicatieIndicatie" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.publicatietekst"
-					label="publicatietekst" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.publicatietekst" label="publicatietekst" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.productenOfDiensten"
 					label="productenOfDiensten" />
 
-				<NcTextField
-					:disabled="loading"
+				<NcTextField :disabled="loading"
 					:value.sync="zaaktype.selectielijstProcestype"
 					label="selectielijstProcestype" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.referentieproces"
-					label="Referentieprocesnaam" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.catalogus"
-					label="catalogus" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.beginGeldigheid"
-					label="beginGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.eindeGeldigheid"
-					label="eindeGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.beginObject"
-					label="beginObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.eindeObject"
-					label="eindeObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaaktype.versiedatum"
-					label="versiedatum" />
+				<NcTextField :disabled="loading" :value.sync="zaaktype.referentieproces" label="Referentieprocesnaam" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.catalogus" label="catalogus" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.beginGeldigheid" label="beginGeldigheid" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.eindeGeldigheid" label="eindeGeldigheid" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.beginObject" label="beginObject" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.eindeObject" label="eindeObject" />
+
+				<NcTextField :disabled="loading" :value.sync="zaaktype.versiedatum" label="versiedatum" />
 			</div>
 
 			<NcButton v-if="success === null"
diff --git a/src/modals/zaken/AddBerichtToZaak.vue b/src/modals/zaken/AddBerichtToZaak.vue
index 4a7849e..7ddf64c 100644
--- a/src/modals/zaken/AddBerichtToZaak.vue
+++ b/src/modals/zaken/AddBerichtToZaak.vue
@@ -3,9 +3,7 @@ import { zaakStore, navigationStore, berichtStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal ref="modalRef"
-		label-id="addBerichtToZaak"
-		@close="closeModal">
+	<NcModal ref="modalRef" label-id="addBerichtToZaak" @close="closeModal">
 		<div class="modalContent">
 			<h2>Bericht toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
 
@@ -140,7 +138,7 @@ export default {
 
 <style scoped>
 .modalContent {
-    margin: var(--zaa-margin-50, 12px);
-    text-align: center;
+	margin: var(--zaa-margin-50, 12px);
+	text-align: center;
 }
 </style>
diff --git a/src/modals/zaken/AddRolToZaak.vue b/src/modals/zaken/AddRolToZaak.vue
index 433a6e4..7e213ea 100644
--- a/src/modals/zaken/AddRolToZaak.vue
+++ b/src/modals/zaken/AddRolToZaak.vue
@@ -3,9 +3,7 @@ import { zaakStore, navigationStore, rolStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal ref="modalRef"
-		label-id="addRolToZaak"
-		@close="closeModal">
+	<NcModal ref="modalRef" label-id="addRolToZaak" @close="closeModal">
 		<div class="modalContent">
 			<h2>Rol toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
 
@@ -143,7 +141,7 @@ export default {
 
 <style scoped>
 .modalContent {
-    margin: var(--zaa-margin-50, 12px);
-    text-align: center;
+	margin: var(--zaa-margin-50, 12px);
+	text-align: center;
 }
 </style>
diff --git a/src/modals/zaken/AddTaakToZaak.vue b/src/modals/zaken/AddTaakToZaak.vue
index ec919b5..f9787ab 100644
--- a/src/modals/zaken/AddTaakToZaak.vue
+++ b/src/modals/zaken/AddTaakToZaak.vue
@@ -3,9 +3,7 @@ import { zaakStore, navigationStore, taakStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal ref="modalRef"
-		label-id="addTaakToZaak"
-		@close="closeModal">
+	<NcModal ref="modalRef" label-id="addTaakToZaak" @close="closeModal">
 		<div class="modalContent">
 			<h2>Taak toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
 
@@ -144,7 +142,7 @@ export default {
 
 <style scoped>
 .modalContent {
-    margin: var(--zaa-margin-50, 12px);
-    text-align: center;
+	margin: var(--zaa-margin-50, 12px);
+	text-align: center;
 }
 </style>
diff --git a/src/services/icons/icons.css b/src/services/icons/icons.css
index 98d9e3f..46f847e 100644
--- a/src/services/icons/icons.css
+++ b/src/services/icons/icons.css
@@ -1,23 +1,26 @@
 /* progress close */
 .icon-progress-close-dark {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLW9wYWNpdHk6LjU7ZmlsbC1ydWxlOm5vbnplcm8iIGZpbGw9IiMwMDAwMDAiIC8+DQo8L3N2Zz4=);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLW9wYWNpdHk6LjU7ZmlsbC1ydWxlOm5vbnplcm8iIGZpbGw9IiMwMDAwMDAiIC8+DQo8L3N2Zz4=);
 }
+
 .icon-progress-close-light {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgLz4NCjwvc3ZnPg==);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgLz4NCjwvc3ZnPg==);
 }
 
 /* pencil */
 .icon-pencil-dark {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiAvPjwvc3ZnPg==);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiAvPjwvc3ZnPg==);
 }
+
 .icon-pencil-light {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiBmaWxsPSIjZmZmZmZmIiAvPjwvc3ZnPg==);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiBmaWxsPSIjZmZmZmZmIiAvPjwvc3ZnPg==);
 }
 
 /* CalendarCheckOutline */
 .icon-calendar-check-outline-dark {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIC8+PC9zdmc+);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIC8+PC9zdmc+);
 }
+
 .icon-calendar-check-outline-light {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+);
-}
\ No newline at end of file
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+);
+}
diff --git a/src/views/contactMomenten/ContactMomentDetails.vue b/src/views/contactMomenten/ContactMomentDetails.vue
index d29f2ce..d1df84d 100644
--- a/src/views/contactMomenten/ContactMomentDetails.vue
+++ b/src/views/contactMomenten/ContactMomentDetails.vue
@@ -79,14 +79,14 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 									:counter-number="Object.keys(auditTrail.changed).length"
 									:force-display-actions="true">
 									<template #icon>
-										<TimelineQuestionOutline disable-menu
-											:size="44" />
+										<TimelineQuestionOutline disable-menu :size="44" />
 									</template>
 									<template #subname>
 										{{ auditTrail.userName }}
 									</template>
 									<template #actions>
-										<NcActionButton @click="contactMomentStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewContactMomentAuditTrail')">
+										<NcActionButton
+											@click="contactMomentStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewContactMomentAuditTrail')">
 											<template #icon>
 												<Eye :size="20" />
 											</template>
@@ -187,38 +187,38 @@ export default {
 
 <style>
 h4 {
-  font-weight: bold
+	font-weight: bold
 }
 
 .h1 {
-  display: block !important;
-  font-size: 2em !important;
-  margin-block-start: 0.67em !important;
-  margin-block-end: 0.67em !important;
-  margin-inline-start: 0px !important;
-  margin-inline-end: 0px !important;
-  font-weight: bold !important;
-  unicode-bidi: isolate !important;
+	display: block !important;
+	font-size: 2em !important;
+	margin-block-start: 0.67em !important;
+	margin-block-end: 0.67em !important;
+	margin-inline-start: 0px !important;
+	margin-inline-end: 0px !important;
+	font-weight: bold !important;
+	unicode-bidi: isolate !important;
 }
 
 .grid {
-  display: grid;
-  grid-gap: 24px;
-  grid-template-columns: 1fr 1fr;
-  margin-block-start: var(--zaa-margin-50);
-  margin-block-end: var(--zaa-margin-50);
+	display: grid;
+	grid-gap: 24px;
+	grid-template-columns: 1fr 1fr;
+	margin-block-start: var(--zaa-margin-50);
+	margin-block-end: var(--zaa-margin-50);
 }
 
 .gridContent {
-  display: flex;
-  gap: 25px;
+	display: flex;
+	gap: 25px;
 }
 
 .tabPanel {
-  padding: 20px 10px;
-  min-height: 100%;
-  max-height: 100%;
-  height: 100%;
-  overflow: auto;
+	padding: 20px 10px;
+	min-height: 100%;
+	max-height: 100%;
+	height: 100%;
+	overflow: auto;
 }
 </style>
diff --git a/src/views/contactMomenten/ContactMomentenIndex.vue b/src/views/contactMomenten/ContactMomentenIndex.vue
index 9955d9a..a5fd398 100644
--- a/src/views/contactMomenten/ContactMomentenIndex.vue
+++ b/src/views/contactMomenten/ContactMomentenIndex.vue
@@ -8,7 +8,8 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 			<ContactMomentenList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!contactMomentStore.contactMomentItem?.id || navigationStore.selected !== 'contactMomenten'"
+			<NcEmptyContent
+				v-if="!contactMomentStore.contactMomentItem?.id || navigationStore.selected !== 'contactMomenten'"
 				class="detailContainer"
 				name="Geen contact moment"
 				description="Nog geen contact moment geselecteerd">
@@ -16,12 +17,15 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 					<CardAccountPhoneOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
+					<NcButton type="primary"
+						@click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						Contact moment aanmaken
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<ContactMomentDetails v-if="contactMomentStore.contactMomentItem?.id && navigationStore.selected === 'contactMomenten'" :contact-moment-id="contactMomentStore.contactMomentItem?.id" />
+			<ContactMomentDetails
+				v-if="contactMomentStore.contactMomentItem?.id && navigationStore.selected === 'contactMomenten'"
+				:contact-moment-id="contactMomentStore.contactMomentItem?.id" />
 		</template>
 	</NcAppContent>
 </template>
diff --git a/src/views/contactMomenten/ContactMomentenList.vue b/src/views/contactMomenten/ContactMomentenList.vue
index 3f067b7..4e09e5d 100644
--- a/src/views/contactMomenten/ContactMomentenList.vue
+++ b/src/views/contactMomenten/ContactMomentenList.vue
@@ -22,7 +22,8 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
+					<NcActionButton
+						@click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
@@ -38,7 +39,8 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 					:force-display-actions="true"
 					@click="contactMomentStore.setContactMomentItem(contactMoment)">
 					<template #icon>
-						<CardAccountPhoneOutline :class="contactMomentStore.contactMomentItem?.id === contactMoment.id && 'selectedZaakIcon'"
+						<CardAccountPhoneOutline
+							:class="contactMomentStore.contactMomentItem?.id === contactMoment.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 					</template>
@@ -46,13 +48,15 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						{{ new Date(contactMoment.startDate).toLocaleString() }}
 					</template>
 					<template #actions>
-						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('contactMomentenForm')">
+						<NcActionButton
+							@click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('contactMomentenForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
 							Bewerken
 						</NcActionButton>
-						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('deleteContactMoment')">
+						<NcActionButton
+							@click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('deleteContactMoment')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
 							</template>
@@ -165,26 +169,25 @@ export default {
 }
 </script>
 <style>
-
 .listHeader {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background-color: var(--color-main-background);
-    border-bottom: 1px solid var(--color-border);
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	background-color: var(--color-main-background);
+	border-bottom: 1px solid var(--color-border);
 }
 
 .searchField {
-    padding-inline-start: 65px;
-    padding-inline-end: 20px;
-    margin-block-end: 6px;
+	padding-inline-start: 65px;
+	padding-inline-end: 20px;
+	margin-block-end: 6px;
 }
 
 .selectedZaakIcon>svg {
-    fill: white;
+	fill: white;
 }
 
 .loadingIcon {
-    margin-block-start: var(--zaa-margin-20);
+	margin-block-start: var(--zaa-margin-20);
 }
 </style>
diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
index c73873e..12f42c5 100644
--- a/src/views/medewerkers/MedewerkerDetails.vue
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -126,39 +126,39 @@ export default {
 
 <style>
 .detailContainer {
-    padding: 0.5rem;
+	padding: 0.5rem;
 }
 
 .h1 {
-  display: block !important;
-  font-size: 2em !important;
-  margin-block-start: 0.67em !important;
-  margin-block-end: 0.67em !important;
-  margin-inline-start: 0px !important;
-  margin-inline-end: 0px !important;
-  font-weight: bold !important;
-  unicode-bidi: isolate !important;
+	display: block !important;
+	font-size: 2em !important;
+	margin-block-start: 0.67em !important;
+	margin-block-end: 0.67em !important;
+	margin-inline-start: 0px !important;
+	margin-inline-end: 0px !important;
+	font-weight: bold !important;
+	unicode-bidi: isolate !important;
 }
 
 .grid {
-  display: grid;
-  grid-gap: 1rem 24px !important;
-  grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ) !important;
-  margin-block-start: var(--zaa-margin-50);
-  margin-block-end: var(--zaa-margin-50);
+	display: grid;
+	grid-gap: 1rem 24px !important;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+	margin-block-start: var(--zaa-margin-50);
+	margin-block-end: var(--zaa-margin-50);
 }
 
 .gridContent {
-  display: flex;
-  flex-direction: column;
-  gap: 2px !important;
+	display: flex;
+	flex-direction: column;
+	gap: 2px !important;
 }
-.gridContent > h5 {
-    margin-top: 12px !important;
+
+.gridContent>h5 {
+	margin-top: 12px !important;
 }
 
 .gridFullWidth {
-    grid-column: 1 / -1;
+	grid-column: 1 / -1;
 }
-
 </style>
diff --git a/src/views/medewerkers/MedewerkerList.vue b/src/views/medewerkers/MedewerkerList.vue
index f556bf8..e6d5c9f 100644
--- a/src/views/medewerkers/MedewerkerList.vue
+++ b/src/views/medewerkers/MedewerkerList.vue
@@ -6,8 +6,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 	<NcAppContentList>
 		<ul>
 			<div class="listHeader">
-				<NcTextField
-					:value.sync="search"
+				<NcTextField :value.sync="search"
 					:show-trailing-button="search !== ''"
 					label="Search"
 					class="searchField"
@@ -22,7 +21,8 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="medewerkerStore.setMedewerkerItem(null); navigationStore.setModal('editMedewerker')">
+					<NcActionButton
+						@click="medewerkerStore.setMedewerkerItem(null); navigationStore.setModal('editMedewerker')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
@@ -47,7 +47,8 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 						{{ medewerker.email }}
 					</template>
 					<template #actions>
-						<NcActionButton @click="medewerkerStore.setMedewerkerItem(medewerker); navigationStore.setModal('editMedewerker')">
+						<NcActionButton
+							@click="medewerkerStore.setMedewerkerItem(medewerker); navigationStore.setModal('editMedewerker')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -166,24 +167,24 @@ export default {
 </script>
 <style>
 .listHeader {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background-color: var(--color-main-background);
-    border-bottom: 1px solid var(--color-border);
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	background-color: var(--color-main-background);
+	border-bottom: 1px solid var(--color-border);
 }
 
 .searchField {
-    padding-inline-start: 65px;
-    padding-inline-end: 20px;
-    margin-block-end: 6px;
+	padding-inline-start: 65px;
+	padding-inline-end: 20px;
+	margin-block-end: 6px;
 }
 
 .selectedZaakIcon>svg {
-    fill: white;
+	fill: white;
 }
 
 .loadingIcon {
-    margin-block-start: var(--zaa-margin-20);
+	margin-block-start: var(--zaa-margin-20);
 }
 </style>
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index 6db5d9b..30f44da 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -198,14 +198,15 @@ export default {
 }
 </script>
 <style scoped>
-.contactmomentenContainer{
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    height: 100%;
+.contactmomentenContainer {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	height: 100%;
 }
-.itemContainer{
+
+.itemContainer {
 	overflow: auto;
 	margin-block-end: var(--zaa-margin-10);
- }
+}
 </style>
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index e5e1a16..e4bcef3 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -207,19 +207,20 @@ export default {
 }
 </script>
 <style scoped>
-.takenContainer{
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    height: 100%;
+.takenContainer {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	height: 100%;
 }
-.itemContainer{
+
+.itemContainer {
 	overflow: auto;
 	margin-block-end: var(--zaa-margin-10);
- }
+}
 
- .buttonContainer{
+.buttonContainer {
 	display: flex;
 	gap: 10px;
- }
+}
 </style>