diff --git a/src/entities/contactmoment/contactmoment.mock.ts b/src/entities/contactmoment/contactmoment.mock.ts
index 563b9ea..be3c000 100644
--- a/src/entities/contactmoment/contactmoment.mock.ts
+++ b/src/entities/contactmoment/contactmoment.mock.ts
@@ -12,6 +12,7 @@ export const mockContactMomentData = (): TContactMoment[] => [
 		product: 'Product 3',
 		startDate: new Date().toISOString(),
 		status: 'open',
+		contactmoment: 'Contactmoment 3',
 	},
 ]
 
diff --git a/src/entities/contactmoment/contactmoment.ts b/src/entities/contactmoment/contactmoment.ts
index 14aa482..da525bd 100644
--- a/src/entities/contactmoment/contactmoment.ts
+++ b/src/entities/contactmoment/contactmoment.ts
@@ -12,6 +12,7 @@ export class ContactMoment implements TContactMoment {
 	public product: string
 	public startDate: string
 	public status: string
+	public contactmoment: string
 
 	constructor(source: TContactMoment) {
 		this.id = source.id || ''
@@ -23,6 +24,7 @@ export class ContactMoment implements TContactMoment {
 		this.product = source.product || ''
 		this.startDate = source.startDate || ''
 		this.status = source.status || 'open'
+		this.contactmoment = source.contactmoment || ''
 	}
 
 	public validate(): SafeParseReturnType<TContactMoment, unknown> {
@@ -36,6 +38,7 @@ export class ContactMoment implements TContactMoment {
 			product: z.string().min(1),
 			startDate: z.string().min(1),
 			status: z.string().min(1),
+			contactmoment: z.string().min(1),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/contactmoment/contactmoment.types.ts b/src/entities/contactmoment/contactmoment.types.ts
index 89d817e..3d3e0ef 100644
--- a/src/entities/contactmoment/contactmoment.types.ts
+++ b/src/entities/contactmoment/contactmoment.types.ts
@@ -8,4 +8,5 @@ export type TContactMoment = {
     product: string;
     startDate: string;
     status: string;
+    contactmoment: string;
 }
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 6b8d393..7a080a6 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -783,27 +783,16 @@ export default {
 
 			const contactMomentCopy = _.cloneDeep(this.contactMoment)
 
-			delete contactMomentCopy.taken
-			delete contactMomentCopy.zaken
-			delete contactMomentCopy.berichten
-			delete contactMomentCopy.klantContactmomenten
-			delete contactMomentCopy.auditTrails
-			delete contactMomentCopy.addedTaken
-			delete contactMomentCopy.selectedKlantContactMoment
-			delete contactMomentCopy.selectedProduct
-			delete contactMomentCopy.selectedTaak
-			delete contactMomentCopy.selectedZaak
-
 			contactMomentStore.saveContactMoment({
-				...contactMomentCopy,
+				id: contactMomentCopy.id,
 				notitie: contactMomentCopy.notitie,
 				klant: contactMomentCopy.klant?.id ?? '',
 				zaak: contactMomentCopy.selectedZaak ?? '',
 				taak: contactMomentCopy.selectedTaak ?? '',
 				product: contactMomentCopy.selectedProduct ?? '',
-				contactmoment: contactMomentCopy.selectedKlantContactMoment,
-				status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
 				startDate: contactMomentCopy.startDate ?? new Date().toISOString(),
+				status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
+				contactmoment: contactMomentCopy.selectedKlantContactMoment,
 			})
 				.then((response) => {
 					this.contactMoment.addedTaken.forEach(taak => {
@@ -843,25 +832,18 @@ export default {
 					this.success = true
 					this.loading = false
 
-					if (!this.dashboardWidget) {
+					setTimeout(() => {
+						this.closeTab(this.selectedContactMoment)
+						this.success = false
+						this.succesMessage = false
+					}, 2000)
+					if (this.tabs.length === 1) {
+						if (this.dashboardWidget) this.$emit('save-success')
 						setTimeout(() => {
 							this.closeModal()
 						}, 2000)
 					}
 
-					if (this.dashboardWidget === true) {
-						setTimeout(() => {
-							this.closeTab(this.selectedContactMoment)
-							this.success = false
-							this.succesMessage = false
-						}, 2000)
-						if (this.tabs.length === 1) {
-							this.$emit('save-success')
-							setTimeout(() => {
-								this.closeModal()
-							}, 2000)
-						}
-					}
 				})
 				.catch((err) => {
 					console.error(err)
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index a6dcf91..e2c8289 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore, navigationStore, klantStore, medewerkerStore, contactMomentStore } from '../../store/store.js'
+import { taakStore, navigationStore, klantStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -59,7 +59,6 @@ import { taakStore, navigationStore, klantStore, medewerkerStore, contactMomentS
 					<NcSelect v-if="(clientType !== 'medewerker' && (clientType !== 'both' || clientType === 'both' && !useMedewerkerInsteadOfKlant))"
 						v-bind="klanten"
 						v-model="klanten.value"
-						:user-select="true"
 						input-label="Klant*"
 						:loading="klantenLoading"
 						:disabled="loading" />
@@ -67,7 +66,6 @@ import { taakStore, navigationStore, klantStore, medewerkerStore, contactMomentS
 					<NcSelect v-if="(clientType !== 'klant' && (clientType !== 'both' || clientType === 'both' && useMedewerkerInsteadOfKlant))"
 						v-bind="medewerkers"
 						v-model="medewerkers.value"
-						:user-select="true"
 						input-label="Medewerker*"
 						:loading="medewerkersLoading"
 						:disabled="loading" />
@@ -352,6 +350,7 @@ export default {
 	},
 	mounted() {
 		this.fetchData()
+		this.fetchMedewerkers()
 	},
 	methods: {
 		closeModalFromButton() {
@@ -400,7 +399,6 @@ export default {
 			}
 
 			if (this.clientType !== 'medewerker') this.fetchKlanten(taakEntity?.klant) // will either pass a id or undefined
-			if (this.clientType !== 'klant') this.fetchMedewerkers(taakEntity?.medewerker)
 			this.fetchContactMomentItems()
 		},
 		/**
@@ -419,6 +417,7 @@ export default {
 					const selectedKlant = data.find((klant) => klant?.id.toString() === searchId) || null
 
 					this.klanten = {
+						userSelect: true,
 						options: data.map((klant) => ({
 							id: klant.id,
 							displayName: `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}`,
@@ -499,38 +498,42 @@ export default {
 		 *                                If none are provided the default selected medewerker will be `null`.
 		 */
 		fetchMedewerkers(medewerkerId = null) {
-			medewerkerStore.refreshMedewerkersList()
-				.then(({ data }) => {
-
-					const taakMedewerkerId = taakStore.taakItem?.medewerker
-					const searchId = (this.medewerkerId ?? medewerkerId ?? taakMedewerkerId)?.toString()
-
-					const selectedMedewerker = data.find((medewerker) => medewerker?.id.toString() === searchId) || null
+			fetch('/ocs/v1.php/cloud/users/details', {
+				method: 'GET',
+				headers: {
+					Accept: 'application/json',
+					'OCS-APIRequest': 'true',
+				},
+			}).then(response => response.json()).then(data => {
+
+				const userData = data.ocs.data.users
+
+				const taakMedewerkerId = taakStore.taakItem?.medewerker
+				const searchId = (this.medewerkerId ?? medewerkerId ?? taakMedewerkerId)?.toString()
+
+				const selectedMedewerker = Object.values(userData).find((medewerker) => medewerker?.email?.toString() === searchId) || null
+
+				this.medewerkers = {
+					userSelect: true,
+					options: Object.values(userData).map((medewerker) => ({
+						id: medewerker.email,
+						displayName: medewerker.displayname,
+						subname: medewerker.email,
+						user: medewerker.id,
+
+					})),
+					value: selectedMedewerker
+						? {
+							id: selectedMedewerker?.email,
+							displayName: selectedMedewerker.displayname,
+							subname: selectedMedewerker.email,
+							user: selectedMedewerker.id,
+						}
+						: null,
+				}
 
-					this.medewerkers = {
-						options: data.map((medewerker) => ({
-							id: medewerker.id,
-							displayName: `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}`,
-							subName: medewerker.email,
-							icon: medewerker.icon ?? '',
+			})
 
-						})),
-						value: selectedMedewerker
-							? {
-								id: selectedMedewerker?.id,
-								displayName: `${selectedMedewerker.voornaam} ${selectedMedewerker.tussenvoegsel} ${selectedMedewerker.achternaam}`,
-								subName: selectedMedewerker.email,
-								icon: selectedMedewerker.icon ?? '',
-							}
-							: null,
-					}
-				})
-				.catch((err) => {
-					console.error(err)
-				})
-				.finally(() => {
-					this.medewerkersLoading = false
-				})
 		},
 		async editTaak() {
 			this.loading = true
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index da686ab..71b8819 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -37,19 +37,9 @@ import { navigationStore, taakStore, klantStore, medewerkerStore } from '../../s
 						</div>
 						<div v-if="taakStore.taakItem.medewerker">
 							<b>Medewerker:</b>
-							<span v-if="medewerkerLoading">Loading...</span>
-							<div v-if="!medewerkerLoading" class="buttonLinkContainer">
-								<span>{{ getMedewerkerName(medewerker) }}</span>
-								<NcActions>
-									<NcActionLink :aria-label="`ga naar ${getMedewerkerName(medewerker)}`"
-										:name="getMedewerkerName(medewerker)"
-										@click="goToMedewerker()">
-										<template #icon>
-											<OpenInApp :size="20" />
-										</template>
-										{{ getMedewerkerName(medewerker) }}
-									</NcActionLink>
-								</NcActions>
+							<span v-if="medewerkerLoading || !medewerker">Loading...</span>
+							<div v-if="!medewerkerLoading && medewerker" class="buttonLinkContainer">
+								<span>{{ medewerker.displayname }}</span>
 							</div>
 						</div>
 						<div v-if="taakStore.taakItem.klant">
@@ -209,19 +199,22 @@ export default {
 		fetchMedewerker(medewerker) {
 			this.medewerkerLoading = true
 
-			fetch(`/index.php/apps/zaakafhandelapp/api/medewerkers/${medewerker}`, {
+			const host = window.location.host
+
+			fetch(`http://${host}/ocs/v1.php/cloud/users/details`, {
 				method: 'GET',
+				headers: {
+					Accept: 'application/json',
+					'OCS-APIRequest': 'true',
+				},
+			}).then(response => response.json()).then(data => {
+
+				this.medewerker = Object.values(data.ocs.data.users).find(user => user.email === medewerker)
+			}).catch(err => {
+				console.error(err)
+			}).finally(() => {
+				this.medewerkerLoading = false
 			})
-				.then((response) => {
-					response.json().then((data) => {
-						this.medewerker = data
-					})
-					this.medewerkerLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.medewerkerLoading = false
-				})
 
 		},
 	},
diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index f6366e6..41ee6fc 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { klantStore, medewerkerStore, navigationStore, taakStore } from '../../store/store.js'
+import { klantStore, navigationStore, taakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -30,7 +30,7 @@ import { klantStore, medewerkerStore, navigationStore, taakStore } from '../../s
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="taakStore.takenList?.length && !loading">
+			<div v-if="taakStore.takenList?.length && users && !loading">
 				<NcListItem v-for="(taak, i) in taakStore.takenList"
 					:key="`${taak}${i}`"
 					:name="taak?.title"
@@ -108,13 +108,14 @@ export default {
 			search: '',
 			loading: true,
 			takenList: [],
+			users: null,
 		}
 	},
 	mounted() {
 		Promise.all([
+			this.getUsers(),
 			taakStore.refreshTakenList(),
 			klantStore.refreshKlantenList(),
-			medewerkerStore.refreshMedewerkersList(),
 		]).then(() => {
 			this.loading = false
 		})
@@ -123,12 +124,24 @@ export default {
 		clearText() {
 			this.search = ''
 		},
+		getUsers() {
+			fetch('/ocs/v1.php/cloud/users/details', {
+				method: 'GET',
+				headers: {
+					Accept: 'application/json',
+					'OCS-APIRequest': 'true',
+				},
+			}).then(response => response.json()).then(data => {
+
+				this.users = Object.values(data.ocs.data.users)
+			})
+		},
 		getName(taak) {
-			const medewerker = medewerkerStore.medewerkersList.find(medewerker => medewerker.id === taak.medewerker)
+			const medewerker = this.users.find(user => user.email === taak.medewerker)
 			const klant = klantStore.klantenList.find(klant => klant.id === taak.klant)
 
 			if (medewerker) {
-				return `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}` ?? 'onbekend'
+				return medewerker.displayname ?? 'onbekend'
 			}
 			if (klant) {
 				if (klant.type === 'persoon') {
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index e4bcef3..29ded74 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -1,226 +1,228 @@
-<script setup>
-import { taakStore, navigationStore } from '../../store/store.js'
-</script>
-
-<template>
-	<div class="takenContainer">
-		<div class="itemContainer">
-			<NcDashboardWidget :items="items"
-				:loading="loading"
-				:item-menu="itemMenu"
-				@show="onShow"
-				@statusClose="onCloseStatus"
-				@statusHandled="onHandledStatus">
-				<template #empty-content>
-					<NcEmptyContent name="Geen open taken">
-						<template #icon>
-							<Folder />
-						</template>
-					</NcEmptyContent>
-				</template>
-			</NcDashboardWidget>
-		</div>
-
-		<div class="buttonContainer">
-			<NcButton type="primary" @click="openModal">
-				<template #icon>
-					<Plus :size="20" />
-				</template>
-				Taak aanmaken
-			</NcButton>
-			<NcButton type="primary" @click="fetchTaakItems">
-				<template #icon>
-					<Refresh :size="20" />
-				</template>
-				Refresh
-			</NcButton>
-		</div>
-
-		<EditTaakForm v-if="isModalOpen"
-			:dashboard-widget="true"
-			:taak-id="taakId"
-			@save-success="fetchTaakItems"
-			@close-modal="closeModal" />
-	</div>
-</template>
-
-<script>
-// Components
-import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
-import { getTheme } from '../../services/getTheme.js'
-
-// Entities
-import { Taak } from '../../entities/index.js'
-
-// Icons
-import { iconProgressClose, iconCalendarCheckOutline } from '../../services/icons/index.js'
-
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Folder from 'vue-material-design-icons/Folder.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
-import EditTaak from '../../modals/taken/EditTaak.vue'
-
-export default {
-	name: 'TakenWidget',
-
-	components: {
-		NcDashboardWidget,
-		NcEmptyContent,
-		NcButton,
-		Plus,
-		EditTaakForm: EditTaak,
-	},
-
-	data() {
-		return {
-			loading: false,
-			isModalOpen: false,
-			taakItems: [],
-			userId: null,
-			itemMenu: {
-				show: {
-					text: 'Bekijk',
-					icon: 'icon-toggle',
-				},
-				statusClose: {
-					text: 'Sluiten',
-					icon: iconProgressClose,
-				},
-				statusHandled: {
-					text: 'Taak Afhandelen',
-					icon: iconCalendarCheckOutline,
-				},
-			},
-		}
-	},
-
-	computed: {
-		items() {
-			return this.taakItems
-		},
-	},
-
-	mounted() {
-		this.fetchUser()
-	},
-
-	methods: {
-		async fetchUser() {
-			const getUser = await fetch('/index.php/apps/zaakafhandelapp/me')
-			const user = await getUser.json()
-
-			const medewerkerList = await fetch('/index.php/apps/zaakafhandelapp/api/medewerkers')
-			const medewerkers = await medewerkerList.json()
-
-			const medewerker = medewerkers.results.find((medewerker) => medewerker.email === user.user.email)
-
-			this.userId = medewerker.id
-			this.fetchTaakItems()
-		},
-		fetchTaakItems() {
-
-			this.loading = true
-			taakStore.refreshTakenList(null, true, this.userId)
-				.then(() => {
-
-					this.taakItems = taakStore.takenList.map(taak => ({
-						id: taak.id,
-						mainText: taak.title,
-						subText: `${taak.deadline ? new Date(taak.deadline).toLocaleDateString() : ''} ${taak.deadline && taak.type ? '-' : ''}  ${taak.type}`,
-						avatarUrl: this.getItemIcon(),
-					}))
-
-					this.loading = false
-				})
-		},
-		getItemIcon() {
-			const theme = getTheme()
-
-			let appLocation = '/custom_apps'
-
-			if (window.location.hostname === 'nextcloud.local') {
-				appLocation = '/apps-extra'
-			}
-
-			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/calendar-month-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/calendar-month-outline.svg`
-		},
-		openModal() {
-			this.isModalOpen = true
-			this.taakId = null
-			taakStore.setTaakItem(null)
-			navigationStore.setModal('editTaak')
-		},
-		closeModal() {
-			this.isModalOpen = false
-			navigationStore.setModal(null)
-		},
-
-		onShow(event) {
-			this.taakId = event.id
-			this.isModalOpen = true
-		},
-
-		async onCloseStatus(event) {
-			// change status to 'gesloten'
-			const { data } = await taakStore.getTaak(event.id)
-
-			if (data?.status === 'gesloten') {
-				console.info('Taak is already closed')
-				return
-			}
-
-			const newTaak = new Taak({
-				...data,
-				status: 'gesloten',
-			})
-
-			taakStore.saveTaak(newTaak)
-				.then(({ response }) => {
-					if (response.ok) {
-						this.fetchTaakItems(null, true)
-					}
-				})
-		},
-		async onHandledStatus(event) {
-			// change status to 'afgerond'
-			const { data } = await taakStore.getTaak(event.id)
-
-			if (data?.status === 'afgerond') {
-				console.info('Taak is already handled')
-				return
-			}
-
-			const newTaak = new Taak({
-				...data,
-				status: 'afgerond',
-			})
-
-			taakStore.saveTaak(newTaak)
-				.then(({ response }) => {
-					if (response.ok) {
-						this.fetchTaakItems(null, true)
-					}
-				})
-		},
-	},
-
-}
-</script>
-<style scoped>
-.takenContainer {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	height: 100%;
-}
-
-.itemContainer {
-	overflow: auto;
-	margin-block-end: var(--zaa-margin-10);
-}
-
-.buttonContainer {
-	display: flex;
-	gap: 10px;
-}
-</style>
+<script setup>
+import { taakStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<div class="takenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				:item-menu="itemMenu"
+				@show="onShow"
+				@statusClose="onCloseStatus"
+				@statusHandled="onHandledStatus">
+				<template #empty-content>
+					<NcEmptyContent name="Geen open taken">
+						<template #icon>
+							<Folder />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<div class="buttonContainer">
+			<NcButton type="primary" @click="openModal">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				Taak aanmaken
+			</NcButton>
+			<NcButton type="primary" @click="fetchTaakItems">
+				<template #icon>
+					<Refresh :size="20" />
+				</template>
+				Refresh
+			</NcButton>
+		</div>
+
+		<EditTaakForm v-if="isModalOpen"
+			:dashboard-widget="true"
+			:taak-id="taakId"
+			@save-success="fetchTaakItems"
+			@close-modal="closeModal" />
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
+
+// Entities
+import { Taak } from '../../entities/index.js'
+
+// Icons
+import { iconProgressClose, iconCalendarCheckOutline } from '../../services/icons/index.js'
+
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Folder from 'vue-material-design-icons/Folder.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
+
+export default {
+	name: 'TakenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Plus,
+		EditTaakForm: EditTaak,
+	},
+
+	data() {
+		return {
+			loading: false,
+			isModalOpen: false,
+			taakItems: [],
+			userEmail: null,
+			itemMenu: {
+				show: {
+					text: 'Bekijk',
+					icon: 'icon-toggle',
+				},
+				statusClose: {
+					text: 'Sluiten',
+					icon: iconProgressClose,
+				},
+				statusHandled: {
+					text: 'Taak Afhandelen',
+					icon: iconCalendarCheckOutline,
+				},
+			},
+		}
+	},
+
+	computed: {
+		items() {
+			return this.taakItems
+		},
+	},
+
+	mounted() {
+		this.fetchUser()
+	},
+
+	methods: {
+		async fetchUser() {
+			this.loading = true
+
+			const getUser = await fetch('/index.php/apps/zaakafhandelapp/me')
+			const user = await getUser.json()
+
+			const medewerkerList = await fetch('/index.php/apps/zaakafhandelapp/api/medewerkers')
+			const medewerkers = await medewerkerList.json()
+
+			const medewerker = medewerkers.results.find((medewerker) => medewerker.email === user.user.email)
+
+			this.userEmail = medewerker.email
+			this.fetchTaakItems()
+		},
+		fetchTaakItems() {
+
+			this.loading = true
+			taakStore.refreshTakenList(null, true, this.userEmail)
+				.then(() => {
+
+					this.taakItems = taakStore.takenList.map(taak => ({
+						id: taak.id,
+						mainText: taak.title,
+						subText: `${taak.deadline ? new Date(taak.deadline).toLocaleDateString() : ''} ${taak.deadline && taak.type ? '-' : ''}  ${taak.type}`,
+						avatarUrl: this.getItemIcon(),
+					}))
+
+					this.loading = false
+				})
+		},
+		getItemIcon() {
+			const theme = getTheme()
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/calendar-month-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/calendar-month-outline.svg`
+		},
+		openModal() {
+			this.isModalOpen = true
+			this.taakId = null
+			taakStore.setTaakItem(null)
+			navigationStore.setModal('editTaak')
+		},
+		closeModal() {
+			this.isModalOpen = false
+			navigationStore.setModal(null)
+		},
+
+		onShow(event) {
+			this.taakId = event.id
+			this.isModalOpen = true
+		},
+
+		async onCloseStatus(event) {
+			// change status to 'gesloten'
+			const { data } = await taakStore.getTaak(event.id)
+
+			if (data?.status === 'gesloten') {
+				console.info('Taak is already closed')
+				return
+			}
+
+			const newTaak = new Taak({
+				...data,
+				status: 'gesloten',
+			})
+
+			taakStore.saveTaak(newTaak)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.fetchTaakItems(null, true)
+					}
+				})
+		},
+		async onHandledStatus(event) {
+			// change status to 'afgerond'
+			const { data } = await taakStore.getTaak(event.id)
+
+			if (data?.status === 'afgerond') {
+				console.info('Taak is already handled')
+				return
+			}
+
+			const newTaak = new Taak({
+				...data,
+				status: 'afgerond',
+			})
+
+			taakStore.saveTaak(newTaak)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.fetchTaakItems(null, true)
+					}
+				})
+		},
+	},
+
+}
+</script>
+<style scoped>
+.takenContainer {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	height: 100%;
+}
+
+.itemContainer {
+	overflow: auto;
+	margin-block-end: var(--zaa-margin-10);
+}
+
+.buttonContainer {
+	display: flex;
+	gap: 10px;
+}
+</style>