diff --git a/appinfo/routes.php b/appinfo/routes.php
index 34334e4..6f46037 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -25,6 +25,7 @@
 	 	'klanten' => ['url' => 'api/klanten'],
 	 	'berichten' => ['url' => 'api/berichten'],
 		'contactmomenten' => ['url' => 'api/contactmomenten'],
+		'medewerkers' => ['url' => 'api/medewerkers'],
 		
 	 ],
 	'routes' => [
diff --git a/lib/Controller/MedewerkersController.php b/lib/Controller/MedewerkersController.php
new file mode 100644
index 0000000..751d052
--- /dev/null
+++ b/lib/Controller/MedewerkersController.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace OCA\ZaakAfhandelApp\Controller;
+
+use OCA\ZaakAfhandelApp\Service\ObjectService;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\IRequest;
+
+/**
+ * Controller for handling employees (medewerkers) operations
+ */
+class MedewerkersController extends Controller
+{
+    public function __construct(
+		$appName,
+		IRequest $request,
+        private readonly ObjectService $objectService,
+	)
+    {
+        parent::__construct($appName, $request);
+    }
+
+	/**
+	 * Return (and search) all employees
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function index(): JSONResponse
+	{
+		 // Retrieve all request parameters
+		 $requestParams = $this->request->getParams();
+
+		 // Fetch employees based on filters and order
+		 $data = $this->objectService->getResultArrayForRequest('medewerkers', $requestParams);
+ 
+		 // Return JSON response
+		 return new JSONResponse($data);
+	}
+
+	/**
+	 * Read a single employee
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function show(string $id): JSONResponse
+	{
+        // Fetch the employee by its ID
+        $object = $this->objectService->getObject('medewerkers', $id);
+
+        // Return the employee as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Create an employee
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function create(): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+        // Remove the 'id' field if it exists, as we're creating a new employee
+        unset($data['id']);
+
+        // Save the new employee
+        $object = $this->objectService->saveObject('medewerkers', $data);
+        
+        // Return the created employee as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Update an employee
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function update(string $id): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+        // Save the updated employee
+        $object = $this->objectService->saveObject('medewerkers', $data);
+        
+        // Return the updated employee as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Delete an employee
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function destroy(string $id): JSONResponse
+	{
+        // Delete the employee
+        $result = $this->objectService->deleteObject('medewerkers', $id);
+
+        // Return the result as a JSON response
+		return new JSONResponse(['success' => $result], $result === true ? '200' : '404');
+	}
+
+	/**
+     * Get audit trail for a specific employee
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+     */
+    public function getAuditTrail(string $id): JSONResponse
+    {
+        $auditTrail = $this->objectService->getAuditTrail('medewerkers', $id);
+        return new JSONResponse($auditTrail);
+    }
+}
diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php
index 20c8f27..31f7270 100644
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@@ -45,7 +45,7 @@ public function index(): JSONResponse
 	{
 		// Initialize the data array
 		$data = [];
-		$data['objectTypes'] = ['berichten', 'besluiten', 'documenten', 'klanten', 'resultaten', 'taken', 'informatieobjecten', 'organisaties', 'personen', 'zaken', 'rollen', 'statusen', 'zaakeigenschappen', 'zaaktypen','contactmomenten'];
+		$data['objectTypes'] = ['berichten', 'besluiten', 'documenten', 'klanten', 'resultaten', 'taken', 'informatieobjecten', 'organisaties', 'personen', 'zaken', 'rollen', 'statusen', 'zaakeigenschappen', 'zaaktypen','contactmomenten', 'medewerkers'];
 		$data['openRegisters'] = false;
 		$data['availableRegisters'] = [];
 
@@ -102,7 +102,10 @@ public function index(): JSONResponse
 			'zaaktypen_register' => '',
 			'contactmomenten_source' => 'internal',
 			'contactmomenten_schema' => '',
-			'contactmomenten_register' => ''
+			'contactmomenten_register' => '',
+			'medewerkers_source' => 'internal',
+			'medewerkers_schema' => '',
+			'medewerkers_register' => ''
 		];
 
 		// Get the current values for the object types from the configuration
diff --git a/src/entities/index.js b/src/entities/index.js
index 6f68388..0b8f0bc 100644
--- a/src/entities/index.js
+++ b/src/entities/index.js
@@ -5,4 +5,5 @@ export * from './klanten/index.js'
 export * from './taak/index.js'
 export * from './bericht/index.js'
 export * from './rol/index.js'
+export * from './medewerkers/index.js'
 export * from './contactmoment/index.js'
diff --git a/src/entities/klanten/klanten.mock.ts b/src/entities/klanten/klanten.mock.ts
index 842277e..95f3d62 100644
--- a/src/entities/klanten/klanten.mock.ts
+++ b/src/entities/klanten/klanten.mock.ts
@@ -10,7 +10,7 @@ export const mockKlantData = (): TKlant[] => [
 		achternaam: 'Doe',
 		bsn: '1234567890',
 		geboortedatum: '1990-01-01',
-		isMale: true,
+		geslacht: 'man',
 		land: 'Nederland',
 		telefoonnummer: '0612345678',
 		emailadres: 'john.doe@example.com',
diff --git a/src/entities/klanten/klanten.ts b/src/entities/klanten/klanten.ts
index b3f7c4e..aa02342 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 isMale: boolean
+	public geslacht: "man" | "vrouw" | "overige"
 	public land: string
 
 	public telefoonnummer: string
@@ -42,7 +42,7 @@ export class Klant implements TKlant {
 		this.achternaam = source.achternaam || ''
 		this.bsn = source.bsn || ''
 		this.geboortedatum = source.geboortedatum || ''
-		this.isMale = source.isMale || false
+		this.geslacht = source.geslacht || null
 		this.land = source.land || ''
 		this.telefoonnummer = source.telefoonnummer || ''
 		this.emailadres = source.emailadres || ''
@@ -71,7 +71,7 @@ export class Klant implements TKlant {
 			achternaam: z.string(),
 			bsn: z.string(),
 			geboortedatum: z.string(),
-			isMale: z.boolean(),
+			geslacht: z.enum(["man", "vrouw", "overige"]).or(z.null()),
 			land: z.string(),
 			telefoonnummer: z.string(),
 			emailadres: z.string().email(),
diff --git a/src/entities/klanten/klanten.types.ts b/src/entities/klanten/klanten.types.ts
index 83c11bc..7d7c13b 100644
--- a/src/entities/klanten/klanten.types.ts
+++ b/src/entities/klanten/klanten.types.ts
@@ -8,7 +8,7 @@ export type TKlant = {
     achternaam: string;
     bsn: string;
     geboortedatum: string;
-    isMale: boolean;
+    geslacht: 'man' | 'vrouw' | 'overige';
     land: string;
     telefoonnummer: string;
     emailadres: string;
diff --git a/src/entities/medewerkers/index.js b/src/entities/medewerkers/index.js
new file mode 100644
index 0000000..5e496d6
--- /dev/null
+++ b/src/entities/medewerkers/index.js
@@ -0,0 +1,3 @@
+export * from './medewerkers.ts'
+export * from './medewerkers.types.ts'
+export * from './medewerkers.mock.ts'
diff --git a/src/entities/medewerkers/medewerkers.mock.ts b/src/entities/medewerkers/medewerkers.mock.ts
new file mode 100644
index 0000000..5fd76c5
--- /dev/null
+++ b/src/entities/medewerkers/medewerkers.mock.ts
@@ -0,0 +1,14 @@
+import { Medewerker } from './medewerkers'
+import { TMedewerker } from './medewerkers.types'
+
+export const mockMedewerkerData = (): TMedewerker[] => [
+	{
+		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		voornaam: 'John',
+		tussenvoegsel: 'de',
+		achternaam: 'Doe',
+		email: 'john.doe@example.com',
+	},
+]
+
+export const mockMedewerker = (data: TMedewerker[] = mockMedewerkerData()): TMedewerker[] => data.map(item => new Medewerker(item))
diff --git a/src/entities/medewerkers/medewerkers.spec.ts b/src/entities/medewerkers/medewerkers.spec.ts
new file mode 100644
index 0000000..0d77965
--- /dev/null
+++ b/src/entities/medewerkers/medewerkers.spec.ts
@@ -0,0 +1,12 @@
+import { Medewerker } from './medewerkers'
+import { mockMedewerkerData } from './medewerkers.mock'
+
+describe('Medewerker Entity', () => {
+	it('should create a Medewerker entity with full data', () => {
+		const medewerker = new Medewerker(mockMedewerkerData()[0])
+
+		expect(medewerker).toBeInstanceOf(Medewerker)
+		expect(medewerker).toEqual(mockMedewerkerData()[0])
+		expect(medewerker.validate().success).toBe(true)
+	})
+})
diff --git a/src/entities/medewerkers/medewerkers.ts b/src/entities/medewerkers/medewerkers.ts
new file mode 100644
index 0000000..0f5eb9f
--- /dev/null
+++ b/src/entities/medewerkers/medewerkers.ts
@@ -0,0 +1,33 @@
+import { SafeParseReturnType, z } from 'zod'
+import { TMedewerker } from './medewerkers.types'
+
+export class Medewerker implements TMedewerker {
+
+	public id: string
+	public voornaam: string
+	public tussenvoegsel: string
+	public achternaam: string
+	public email: string
+
+	constructor(source: TMedewerker) {
+		this.id = source.id || ''
+		this.voornaam = source.voornaam || ''
+		this.tussenvoegsel = source.tussenvoegsel || ''
+		this.achternaam = source.achternaam || ''
+		this.email = source.email || ''
+
+	}
+
+	public validate(): SafeParseReturnType<TMedewerker, unknown> {
+		const schema = z.object({
+			id: z.string().optional(),
+			voornaam: z.string().min(1),
+			tussenvoegsel: z.string(),
+			achternaam: z.string(),
+			email: z.string().email(),
+		})
+
+		return schema.safeParse(this)
+	}
+
+}
diff --git a/src/entities/medewerkers/medewerkers.types.ts b/src/entities/medewerkers/medewerkers.types.ts
new file mode 100644
index 0000000..7a50331
--- /dev/null
+++ b/src/entities/medewerkers/medewerkers.types.ts
@@ -0,0 +1,7 @@
+export type TMedewerker = {
+    id: string;
+    voornaam: string;
+    tussenvoegsel: string;
+    achternaam: string;
+    email: string;
+}
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 055d875..7cbe23d 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -12,13 +12,14 @@ import { navigationStore } from '../store/store.js'
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
-		<EditTaak />
+		<EditTaak v-if="navigationStore.modal === 'editTaak'" />
 		<WidgetTaakForm v-if="navigationStore.modal === 'widgetTaakForm'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
 		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
 		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
+		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
 	</div>
 </template>
 
@@ -37,6 +38,7 @@ import EditRol from './rollen/EditRol.vue'
 import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 import ViewKlantRegister from './klantRegister/ViewKlantRegister.vue'
 import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
+import EditMedewerker from './medewerkers/EditMedewerker.vue'
 export default {
 	name: 'Modals',
 	components: {
@@ -54,6 +56,7 @@ export default {
 		ViewZaakAuditTrail,
 		ViewKlantRegister,
 		DeleteContactMoment,
+		EditMedewerker,
 	},
 }
 </script>
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 1dfafee..0db7624 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -27,6 +27,14 @@ import { navigationStore } from '../../store/store.js'
 						<div v-else>
 							Geen klant geselecteerd
 						</div>
+						<div class="statusAndStartDateContainer">
+							<div v-if="status">
+								status: {{ status }}
+							</div>
+							<div v-if="startDate">
+								startDate: {{ new Date(startDate).toLocaleDateString() }}
+							</div>
+						</div>
 					</template>
 				</NcNoteCard>
 				<div v-if="!klant" class="buttonsContainer">
@@ -180,13 +188,13 @@ import { navigationStore } from '../../store/store.js'
 				<template #icon>
 					<DotsHorizontal :size="20" />
 				</template>
-				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton @click="openTaakForm">
 					<template #icon>
-						<BriefcaseAccountOutline :size="20" />
+						<CalendarMonthOutline :size="20" />
 					</template>
-					Zaak starten
+					Taak aanmaken
 				</NcActionButton>
-				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton :disabled="true" @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
 					<template #icon>
 						<BriefcaseAccountOutline :size="20" />
 					</template>
@@ -205,6 +213,10 @@ import { navigationStore } from '../../store/store.js'
 				Opslaan
 			</NcButton>
 		</template>
+		<TakenForm v-if="taakFormOpen"
+			:dashboard-widget="true"
+			@close-modal="closeTaakForm"
+			@save-success="closeTaakForm" />
 	</NcDialog>
 </template>
 
@@ -215,6 +227,7 @@ import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, N
 
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
+import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
 
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -248,6 +261,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		contactMomentId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -256,6 +273,8 @@ export default {
 			error: false,
 			titel: '',
 			notitie: '',
+			status: null,
+			startDate: null,
 			klantenLoading: false,
 			zaken: [],
 			taken: [],
@@ -268,9 +287,13 @@ export default {
 			selectedTaak: null,
 			selectedProduct: null,
 			startingType: 'all',
+			taakFormOpen: false,
 		}
 	},
 	mounted() {
+		if (this.contactMomentId) {
+			this.fetchContactMomentData(this.contactMomentId)
+		}
 	},
 	methods: {
 		// Modal functions
@@ -302,6 +325,7 @@ export default {
 						zaak: this.selectedZaak ?? '',
 						taak: this.selectedTaak ?? '',
 						product: this.selectedProduct ?? '',
+						status: this.status === 'gesloten' ? 'gesloten' : 'open',
 						startDate: new Date().toISOString(),
 					}),
 				},
@@ -333,6 +357,30 @@ export default {
 			this.searchKlantModalOpen = false
 		},
 
+		openTaakForm() {
+			this.taakFormOpen = true
+			taakStore.setTaakItem(null)
+		},
+
+		closeTaakForm() {
+			this.taakFormOpen = false
+		},
+
+		fetchContactMomentData(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/contactmomenten/${id}`)
+				.then(response => response.json())
+				.then(data => {
+					this.titel = data.titel
+					this.notitie = data.notitie
+					this.status = data.status
+					this.startDate = data.startDate
+					this.fetchKlantData(data.klant)
+					this.selectedZaak = data.zaak
+					this.selectedTaak = data.taak
+					this.selectedProduct = data.product
+				})
+		},
+
 		fetchKlantData(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
 				.then(response => response.json())
@@ -469,4 +517,9 @@ div[class='modal-container']:has(.ContactMomentenForm) {
     justify-content: flex-end;
     gap: var(--zaa-margin-10);
 }
+
+.statusAndStartDateContainer {
+	display: flex;
+	gap: var(--zaa-margin-10);
+}
 </style>
diff --git a/src/modals/klanten/EditKlant.vue b/src/modals/klanten/EditKlant.vue
index 7f36202..34fb166 100644
--- a/src/modals/klanten/EditKlant.vue
+++ b/src/modals/klanten/EditKlant.vue
@@ -47,13 +47,18 @@ import { klantStore, navigationStore } from '../../store/store.js'
 					:disabled="loading"
 					input-label="Geboortedatum" />
 			</div>
-			<NcCheckboxRadioSwitch :checked.sync="klantItem.isMale">
-				Is een man?
-			</NcCheckboxRadioSwitch>
+
+			<NcSelect v-bind="sexOptions"
+				v-model="klantItem.geslacht"
+				:clearable="false"
+				class="wide-select"
+				:disabled="loading"
+				input-label="Geslacht" />
+
 			<NcSelect
 				v-bind="countryOptions"
 				v-model="klantItem.land"
-				class="country-select"
+				class="wide-select"
 				:disabled="loading"
 				input-label="Land" />
 
@@ -180,7 +185,6 @@ import {
 	NcNoteCard,
 	NcSelect,
 	NcDateTimePicker,
-	NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'
 import { countries } from '../../data/countries.js'
 
@@ -200,7 +204,6 @@ export default {
 		NcNoteCard,
 		NcSelect,
 		NcDateTimePicker,
-		NcCheckboxRadioSwitch,
 		// Icons
 		ContentSaveOutline,
 		Cancel,
@@ -226,7 +229,7 @@ export default {
 				achternaam: '',
 				bsn: '',
 				geboortedatum: '',
-				isMale: false,
+				geslacht: '',
 				land: '',
 				telefoonnummer: '',
 				emailadres: '',
@@ -252,6 +255,13 @@ export default {
 					{ value: 'organisatie', label: 'Organisatie' },
 				],
 			},
+			sexOptions: {
+				options: [
+					{ value: 'man', label: 'Man' },
+					{ value: 'vrouw', label: 'Vrouw' },
+					{ value: 'overige', label: 'Overige' },
+				],
+			},
 		}
 	},
 	computed: {
@@ -261,11 +271,12 @@ export default {
 	},
 	updated() {
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
-
 			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem?.type)
 
 			const country = this.countryOptions.options.find((option) => option.id === klantStore.klantItem?.land)
 
+			const sex = this.sexOptions.options.find((option) => option.value === klantStore.klantItem?.geslacht)
+
 			if (klantStore.klantItem?.id) {
 				this.klantItem = {
 					...klantStore.klantItem,
@@ -275,7 +286,7 @@ export default {
 					achternaam: klantStore.klantItem.achternaam || '',
 					bsn: klantStore.klantItem.bsn || '',
 					geboortedatum: klantStore.klantItem.geboortedatum ? new Date(klantStore.klantItem.geboortedatum) : '',
-					isMale: klantStore.klantItem.isMale || false,
+					geslacht: sex || { value: 'man', label: 'Man' },
 					land: country || '',
 					telefoonnummer: klantStore.klantItem.telefoonnummer || '',
 					emailadres: klantStore.klantItem.emailadres || '',
@@ -313,7 +324,7 @@ export default {
 				achternaam: '',
 				bsn: '',
 				geboortedatum: '',
-				isMale: false,
+				geslacht: { value: 'man', label: 'Man' },
 				land: '',
 				telefoonnummer: '',
 				emailadres: '',
@@ -343,6 +354,7 @@ export default {
 					type: this.klantItem.type.value,
 					geboortedatum: this.klantItem.geboortedatum !== '' && new Date(this.klantItem.geboortedatum).toISOString(),
 					land: this.klantItem.land.id,
+					geslacht: this.klantItem.geslacht.value,
 				})
 				this.success = true
 				this.loading = false
@@ -361,7 +373,7 @@ export default {
 </script>
 
 <style scoped>
-.country-select {
+.wide-select {
 	width: 100%;
 }
 </style>
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
index 2f575f9..f0721b9 100644
--- a/src/modals/klanten/SearchKlantModal.vue
+++ b/src/modals/klanten/SearchKlantModal.vue
@@ -99,7 +99,7 @@ import { klantStore } from '../../store/store.js'
 			<div v-if="klanten?.length && !loading">
 				<NcListItem v-for="(klant, i) in klanten"
 					:key="`${klant}${i}`"
-					:name="`(${klant.isMale ? 'm' : 'v'}) ${getName(klant)} ${getSubname(klant)}`"
+					:name="`${getSex(klant)} ${getName(klant)} ${getSubname(klant)}`"
 					:active="selectedKlant === klant?.id"
 					:force-display-actions="true"
 					:details="_.upperFirst(klant.type)"
@@ -322,6 +322,12 @@ export default {
 			}
 			return 'onbekend'
 		},
+		getSex(klant) {
+			if (klant.type === 'persoon') {
+				return `(${klant?.geslacht})`
+			}
+			return ''
+		},
 		setActive(klant) {
 			if (this.selectedKlant === klant) {
 				this.selectedKlant = null
diff --git a/src/modals/medewerkers/EditMedewerker.vue b/src/modals/medewerkers/EditMedewerker.vue
new file mode 100644
index 0000000..130d194
--- /dev/null
+++ b/src/modals/medewerkers/EditMedewerker.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { medewerkerStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'editMedewerker'"
+		name="Medewerker"
+		size="normal"
+		:can-close="false">
+		<NcNoteCard v-if="success" type="success">
+			<p>Medewerker succesvol aangepast</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<div v-if="!success" class="form-group">
+			<NcTextField :disabled="loading"
+				label="Voornaam"
+				maxlength="255"
+				:value.sync="medewerkerItem.voornaam" />
+
+			<NcTextField :disabled="loading"
+				label="Tussenvoegsel"
+				maxlength="255"
+				:value.sync="medewerkerItem.tussenvoegsel" />
+
+			<NcTextField :disabled="loading"
+				label="Achternaam"
+				maxlength="255"
+				:value.sync="medewerkerItem.achternaam" />
+
+			<NcTextField :disabled="loading"
+				label="Email adres"
+				maxlength="255"
+				:value.sync="medewerkerItem.emailadres" />
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success"
+				:disabled="loading"
+				type="primary"
+				@click="editMedewerker()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading && medewerkerStore.medewerkerItem?.id" :size="20" />
+					<Plus v-if="!loading && !medewerkerStore.medewerkerItem?.id" :size="20" />
+				</template>
+				{{ medewerkerStore.medewerkerItem?.id ? 'Opslaan' : 'Aanmaken' }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+import { countries } from '../../data/countries.js'
+
+// Icons
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
+
+export default {
+	name: 'EditMedewerker',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			countryOptions: {
+				options: countries.map((country) => ({
+					id: country.code,
+					label: country.name,
+				})),
+			},
+			medewerkerItem: {
+				voornaam: '',
+				tussenvoegsel: '',
+				achternaam: '',
+				email: '',
+			},
+		}
+	},
+	computed: {
+		items() {
+			return this.medewerkerItems
+		},
+	},
+	updated() {
+		if (navigationStore.modal === 'editMedewerker' && !this.hasUpdated) {
+
+			if (medewerkerStore.medewerkerItem?.id) {
+				this.medewerkerItem = {
+					...medewerkerStore.medewerkerItem,
+					voornaam: medewerkerStore.medewerkerItem.voornaam || '',
+					tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
+					achternaam: medewerkerStore.medewerkerItem.achternaam || '',
+					email: medewerkerStore.medewerkerItem.email || '',
+				}
+			}
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.medewerkerItem = {
+				voornaam: '',
+				tussenvoegsel: '',
+				achternaam: '',
+				email: '',
+			}
+		},
+		async editMedewerker() {
+			this.loading = true
+
+			try {
+				await medewerkerStore.saveMedewerker({
+					...this.medewerkerItem,
+				})
+				this.success = true
+				this.loading = false
+				setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the medewerker'
+			}
+		},
+		openLink(url, target) {
+			window.open(url, target)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.wide-select {
+	width: 100%;
+}
+</style>
diff --git a/src/modals/medewerkers/SearchKlantModal.vue b/src/modals/medewerkers/SearchKlantModal.vue
new file mode 100644
index 0000000..f0721b9
--- /dev/null
+++ b/src/modals/medewerkers/SearchKlantModal.vue
@@ -0,0 +1,381 @@
+<script setup>
+import { klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog
+		:name="startingType === 'persoon' ? 'Persoon zoeken' : 'Organisatie zoeken'"
+		size="normal"
+		label-id="searchKlantModal"
+		dialog-classes="SearchKlantModal"
+		:close-on-click-outside="false"
+		@closing="closeModalFromButton()">
+		<div class="listContainer">
+			<div class="filtersContainer">
+				<NcCheckboxRadioSwitch v-if="startingType === 'persoon'"
+					:checked.sync="klantenSearchType"
+					value="geboortedatum_achternaam"
+					name="klantenSearchType"
+					type="radio">
+					Geboortedatum + achternaam
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="startingType === 'persoon'"
+					:checked.sync="klantenSearchType"
+					value="bsn"
+					name="klantenSearchType"
+					type="radio">
+					BSN
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie'"
+					:checked.sync="klantenSearchType"
+					value="bedrijfsnaam"
+					name="klantenSearchType"
+					type="radio">
+					Bedrijfsnaam
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie'"
+					:checked.sync="klantenSearchType"
+					value="kvkNummer"
+					name="klantenSearchType"
+					type="radio">
+					KVK nummer
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="klantenSearchType"
+					value="postcode_huisnummer"
+					name="klantenSearchType"
+					type="radio">
+					Postcode + huisnummer
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="klantenSearchType"
+					value="emailadres"
+					name="klantenSearchType"
+					type="radio">
+					Emailadres
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="klantenSearchType"
+					value="telefoonnummer"
+					name="klantenSearchType"
+					type="radio">
+					Telefoonnummer
+				</NcCheckboxRadioSwitch>
+			</div>
+		</div>
+
+		<div class="searchContainer">
+			<div v-if="klantenSearchType === 'geboortedatum_achternaam'" class="flex">
+				<NcDateTimePicker v-model="searchQuery_geboortedatum"
+					:disabled="loading"
+					class="date-picker" />
+
+				<NcTextField :disabled="loading"
+					label="achternaam"
+					maxlength="255"
+					class="searchField"
+					:value.sync="searchQuery" />
+			</div>
+			<div v-else>
+				<NcTextField :disabled="loading"
+					:label="searchLabel"
+					maxlength="255"
+					class="searchField"
+					:value.sync="searchQuery" />
+			</div>
+
+			<NcButton type="primary"
+				:disabled="loading
+					|| !searchQuery
+					// If the search type is geboortedatum_achternaam, the geboortedatum is required
+					|| (klantenSearchType === 'geboortedatum_achternaam' && !searchQuery_geboortedatum)"
+				class="searchButton"
+				@click="search">
+				<template #icon>
+					<Search :size="20" />
+				</template>
+				Zoeken
+			</NcButton>
+		</div>
+
+		<div class="searchResultsContainer">
+			<div v-if="klanten?.length && !loading">
+				<NcListItem v-for="(klant, i) in klanten"
+					:key="`${klant}${i}`"
+					:name="`${getSex(klant)} ${getName(klant)} ${getSubname(klant)}`"
+					:active="selectedKlant === klant?.id"
+					:force-display-actions="true"
+					:details="_.upperFirst(klant.type)"
+					@click="setActive(klant.id)">
+					<template #icon>
+						<OfficeBuildingOutline v-if="klant.type === 'organisatie'"
+							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+						<AccountOutline v-if="klant.type === 'persoon'"
+							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+					</template>
+					<template #subname>
+						{{ getSummary(klant) }}
+					</template>
+				</NcListItem>
+			</div>
+
+			<div v-if="!klanten?.length && !loading">
+				Geen {{ startingType === 'persoon' ? 'personen' : 'organisaties' }} gevonden.
+			</div>
+
+			<NcLoadingIcon v-if="loading"
+				class="loadingIcon"
+				:size="64"
+				appearance="dark"
+				name="Aan het zoeken" />
+		</div>
+
+		<template #actions>
+			<NcButton
+				type="secondary"
+				@click="closeModal()">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Annuleer
+			</NcButton>
+			<NcButton
+				type="primary"
+				:disabled="!selectedKlant"
+				@click="addKlant()">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				Koppelen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+// Components
+import { NcButton, NcTextField, NcDialog, NcListItem, NcLoadingIcon, NcCheckboxRadioSwitch, NcDateTimePicker } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
+import _ from 'lodash'
+
+// Icons
+import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Search from 'vue-material-design-icons/Magnify.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import getValidISOstring from '../../services/getValidISOstring.js'
+export default {
+	name: 'SearchKlantModal',
+	components: {
+		NcDialog,
+		NcButton,
+		NcListItem,
+		OfficeBuildingOutline,
+		AccountOutline,
+		Search,
+		NcCheckboxRadioSwitch,
+		NcDateTimePicker,
+		NcLoadingIcon,
+	},
+	props: {
+		startingType: {
+			type: String,
+			required: false,
+			default: 'all',
+		},
+	},
+	data() {
+		return {
+			succes: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			klanten: [],
+			searchQuery: '',
+			searchQuery_geboortedatum: null,
+			selectedKlant: null,
+			klantenSearchType: 'emailadres',
+		}
+	},
+	computed: {
+		searchLabel() {
+			const baseLabel = 'Zoek naar een '
+			const typeLabels = {
+				persoon: {
+					default: 'persoon',
+					geboortedatum_achternaam: ' met geboortedatum en achternaam',
+					bsn: ' met BSN',
+				},
+				organisatie: {
+					default: 'organisatie',
+					bedrijfsnaam: ' met bedrijfsnaam',
+					kvkNummer: ' met KVK nummer',
+				},
+			}
+			const commonLabels = {
+				postcode_huisnummer: ' met postcode en huisnummer',
+				emailadres: ' met emailadres',
+				telefoonnummer: ' met telefoonnummer',
+			}
+
+			let label = baseLabel + (typeLabels[this.startingType]?.default || '')
+			label += typeLabels[this.startingType]?.[this.klantenSearchType] || ''
+			label += commonLabels[this.klantenSearchType] || ''
+
+			return label
+		},
+	},
+	methods: {
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
+		closeModal() {
+			this.$emit('close-modal')
+
+		},
+		addKlant() {
+			// eslint-disable-next-line no-console
+			console.log('added')
+			this.$emit('selected-klant', this.selectedKlant)
+			this.closeModalFromButton()
+		},
+
+		search() {
+			this.loading = true
+
+			this.selectedKlant = null
+
+			let queryParams = { [this.klantenSearchType]: this.searchQuery }
+			const newQuery = this.searchQuery.trim()
+			const splitQuery = newQuery.split(/ +/g)
+
+			switch (this.klantenSearchType) {
+			case 'postcode_huisnummer':
+				queryParams = { postcode: splitQuery[0], huisnummer: splitQuery[1] }
+				break
+			case 'geboortedatum_achternaam':
+				queryParams = {
+					geboortedatum: this.searchQuery_geboortedatum && this.searchQuery_geboortedatum.toISOString() ? this.searchQuery_geboortedatum.toISOString() : '',
+					achternaam: newQuery,
+				}
+				break
+			case 'kvkNummer':
+				queryParams = { kvkNummer: newQuery }
+				break
+			default:
+				break
+			}
+
+			const searchParams = new URLSearchParams({
+				...(this.searchQuery && queryParams),
+				...(this.startingType && { type: this.startingType }),
+			}).toString()
+
+			klantStore.searchKlanten(searchParams)
+				.then(() => {
+					this.klanten = klantStore.klantenList
+					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/office-building-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/office-building-outline.svg`
+		},
+
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.voornaam ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		getSubname(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return ''
+			}
+			return 'onbekend'
+		},
+		getSummary(klant) {
+			if (klant.type === 'persoon') {
+				const geboortedatum = getValidISOstring(klant.geboortedatum) ? new Date(klant.geboortedatum).toLocaleDateString() : 'onbekend'
+				const geboortestad = klant.plaats ? `${klant.plaats}` : 'onbekend'
+				return `${geboortedatum} - ${geboortestad}`
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.websiteUrl ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		getSex(klant) {
+			if (klant.type === 'persoon') {
+				return `(${klant?.geslacht})`
+			}
+			return ''
+		},
+		setActive(klant) {
+			if (this.selectedKlant === klant) {
+				this.selectedKlant = null
+			} else { this.selectedKlant = klant }
+		},
+	},
+}
+</script>
+
+<style>
+
+</style>
+
+<style scoped>
+.listContainer {
+	margin-bottom: 10px;
+}
+
+.filtersContainer {
+	display: ruby;
+}
+
+.searchContainer {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+.searchField {
+	width: auto;
+}
+.searchButton {
+	margin-block-start: 3px;
+	min-width: min-content !important;
+}
+
+.searchResultsContainer {
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	padding-block: 20px;
+	margin-block: 30px;
+}
+
+.flex {
+	display: flex;
+	gap: 10px;
+}
+
+.date-picker {
+	margin-block-start: 3px;
+}
+</style>
diff --git a/src/modals/medewerkers/ViewKlantAuditTrail.vue b/src/modals/medewerkers/ViewKlantAuditTrail.vue
new file mode 100644
index 0000000..f76ab55
--- /dev/null
+++ b/src/modals/medewerkers/ViewKlantAuditTrail.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { klantStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Klant Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewKlantAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming klantStore.auditTrailItem is a single audit trail object
+		this.auditTrail = klantStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			klantStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 8e11757..e561a53 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -3,7 +3,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editTaak'"
+	<NcDialog
 		name="Taak"
 		size="normal"
 		@closing="closeModalFromButton()">
@@ -148,16 +148,12 @@ export default {
 			statusOptions: {
 				options: [
 					{
-						id: 'status1',
-						label: 'Status 1',
+						id: 'open',
+						label: 'Open',
 					},
 					{
-						id: 'status2',
-						label: 'Status 2',
-					},
-					{
-						id: 'status3',
-						label: 'Status 3',
+						id: 'gesloten',
+						label: 'Gesloten',
 					},
 				],
 			},
@@ -242,7 +238,7 @@ export default {
 				await taakStore.saveTaak({
 					...this.taakItem,
 					klant: this.klanten.value?.id ?? '',
-					status: this.taakItem.status?.id ?? null,
+					status: this.status === 'gesloten' ? 'gesloten' : 'open',
 					deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
 				}, this.dashboardWidget)
 				this.success = true
diff --git a/src/modals/taken/WidgetTaakForm.vue b/src/modals/taken/WidgetTaakForm.vue
index bb852ff..b72c9d0 100644
--- a/src/modals/taken/WidgetTaakForm.vue
+++ b/src/modals/taken/WidgetTaakForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore, navigationStore, klantStore } from '../../store/store.js'
+import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -28,12 +28,20 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				label="Type"
 				maxlength="255" />
 
-			<NcSelect
+			<!-- <NcSelect
 				v-bind="statusOptions"
 				v-model="taakItem.status"
 				:disabled="loading"
 				input-label="Status"
-				required />
+				required /> -->
+
+			<div>
+				<p>Deadline</p>
+				<NcDateTimePicker
+					v-model="taakItem.deadline"
+					:disabled="loading"
+					required />
+			</div>
 
 			<NcTextField
 				:disabled="loading"
@@ -46,14 +54,14 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				:value.sync="taakItem.toelichting"
 				label="Toelichting" />
 
-			<NcSelect
+			<!-- <NcSelect
 				v-bind="klanten"
 				v-model="klanten.value"
 				input-label="Klant"
 				:loading="klantenLoading"
-				:disabled="loading" />
+				:disabled="loading" /> -->
 
-			<!-- <NcSelect
+			<!-- <<NcSelect
 				v-bind="executorOptions"
 				v-model="executorOptions.value"
 				input-label="Klant of Medewerker"
@@ -66,16 +74,16 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 					input-label="Klant"
 					:loading="klantenLoading"
 					:disabled="loading" />
-			</div>
-			<div v-if="executorOptions.value.id === 'medewerker'">
+			</div> -->
+			<div>
 				<NcSelect
-					v-bind="mederwerkerOptions"
-					v-model="mederwerkerOptions.value"
+					v-bind="medewerkers"
+					v-model="medewerkers.value"
 					:user-select="true"
 					input-label="Medewerker"
 					:loading="medewerkersLoading"
 					:disabled="loading" />
-			</div> -->
+			</div>
 		</div>
 
 		<template #actions>
@@ -92,7 +100,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading || klantenLoading || !taakItem.title"
+				:disabled="loading || klantenLoading || !taakItem.title || !taakItem.deadline"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -112,6 +120,7 @@ import {
 	NcDialog,
 	NcTextField,
 	NcTextArea,
+	NcDateTimePicker,
 	NcSelect,
 	NcLoadingIcon,
 	NcNoteCard,
@@ -127,6 +136,7 @@ export default {
 		NcDialog,
 		NcTextField,
 		NcTextArea,
+		NcDateTimePicker,
 		NcButton,
 		NcSelect,
 		NcLoadingIcon,
@@ -147,6 +157,10 @@ export default {
 			default: null,
 			required: false,
 		},
+		taakId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -162,6 +176,7 @@ export default {
 				title: '',
 				type: '',
 				status: '',
+				deadline: new Date(),
 				onderwerp: '',
 				toelichting: '',
 			},
@@ -197,71 +212,14 @@ export default {
 					},
 				],
 			},
-			mederwerkerOptions: {
-				options: [
-					{
-						id: '0-john',
-						displayName: 'John',
-						isNoUser: false,
-						subname: 'john@example.org',
-						icon: '',
-						// Example of how to show the user status within the option
-						user: '0-john',
-						preloadedUserStatus: {
-							icon: '',
-							status: 'online',
-							message: 'I am online',
-						},
-					},
-					{
-						id: '0-emma',
-						displayName: 'Emma',
-						isNoUser: false,
-						subname: 'emma@example.org',
-						icon: '',
-					},
-					{
-						id: '0-olivia',
-						displayName: 'Olivia',
-						isNoUser: false,
-						subname: 'olivia@example.org',
-						icon: '',
-					},
-					{
-						id: '0-noah',
-						displayName: 'Noah',
-						isNoUser: false,
-						subname: 'noah@example.org',
-						icon: '',
-					},
-					{
-						id: '0-oliver',
-						displayName: 'Oliver',
-						isNoUser: false,
-						subname: 'oliver@example.org',
-						icon: '',
-					},
-					{
-						id: '1-admin',
-						displayName: 'Admin',
-						isNoUser: true,
-						subname: null,
-						iconName: 'Group icon',
-					},
-					{
-						id: '2-org@example.org',
-						displayName: 'Organization',
-						isNoUser: true,
-						subname: 'org@example.org',
-						iconName: 'Email icon',
-					},
-				],
-			},
 		}
 	},
 	mounted() {
 		this.fetchKlanten()
-		// this.fetchMedewerkers()
+		this.fetchMedewerkers()
+		if (this.taakId) {
+			this.fetchTaakData(this.taakId)
+		}
 	},
 	updated() {
 		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
@@ -270,7 +228,8 @@ export default {
 					...taakStore.taakItem,
 					title: taakStore.taakItem.title || '',
 					type: taakStore.taakItem.type || '',
-					status: taakStore.taakItem.status || '',
+					status: 'open',
+					deadline: new Date(taakStore.taakItem.deadline),
 					onderwerp: taakStore.taakItem.onderwerp || '',
 					toelichting: taakStore.taakItem.toelichting || '',
 					klant: klantStore.klantItem?.id || '',
@@ -298,6 +257,7 @@ export default {
 				title: '',
 				type: '',
 				status: '',
+				deadline: new Date(),
 				onderwerp: '',
 				toelichting: '',
 				klant: '',
@@ -305,10 +265,19 @@ export default {
 			if (this.dashboardWidget === true) {
 				this.$emit('save-success')
 			} else {
-				navigationStore.setModal(false)
+				navigationStore.setModal(null)
 				this.$emit('close-modal')
 			}
 		},
+
+		fetchTaakData(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/taken/${id}`)
+				.then(response => response.json())
+				.then(data => {
+					this.taakItem = data
+					this.fetchMedewerkers()
+				})
+		},
 		fetchKlanten() {
 			this.klantenLoading = true
 
@@ -342,13 +311,35 @@ export default {
 				})
 		},
 		fetchMedewerkers() {
-			this.medewerkersLoading = true
-			fetch('/index.php/apps/zaakafhandelapp/api/taken/medewerkers')
-				.then(response => response.json())
-				.then(data => {
-					console.log(data)
-					// this.medewerkers = data
-					// this.medewerkersLoading = false
+			medewerkerStore.refreshMedewerkersList()
+				.then(({ response, data }) => {
+
+					let selectedMedewerker = data.filter((medewerker) => medewerker?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
+
+					if (this.taakId) {
+						selectedMedewerker = data.filter((medewerker) => medewerker?.id.toString() === this.taakItem.klant?.toString())[0] || 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,
+					}
+
+					this.medewerkersLoading = false
 				})
 				.catch((err) => {
 					console.error(err)
@@ -357,10 +348,13 @@ export default {
 		},
 		async editTaak() {
 			this.loading = true
+
 			try {
 				await taakStore.saveTaak({
 					...this.taakItem,
-					klant: this.klanten.value?.id ?? '',
+					klant: this.medewerkers.value?.id ?? '',
+					status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
+					deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
 				}, this.dashboardWidget)
 				this.success = true
 				this.loading = false
diff --git a/src/navigation/MainMenu.vue b/src/navigation/MainMenu.vue
index 9ad9dea..5e7f75d 100644
--- a/src/navigation/MainMenu.vue
+++ b/src/navigation/MainMenu.vue
@@ -44,6 +44,14 @@ import { navigationStore } from '../store/store.js'
 					<AccountGroupOutline :size="20" />
 				</template>
 			</NcAppNavigationItem>
+			<NcAppNavigationItem
+				:active="navigationStore.selected === 'medewerkers'"
+				name="Medewerkers"
+				@click="navigationStore.setSelected('medewerkers')">
+				<template #icon>
+					<AccountGroupOutline :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<NcAppNavigationItem
 				:active="navigationStore.selected === 'contactMomenten'"
 				name="Contact momenten"
diff --git a/src/store/modules/contactmoment.ts b/src/store/modules/contactmoment.ts
index 458a1f4..6f20257 100644
--- a/src/store/modules/contactmoment.ts
+++ b/src/store/modules/contactmoment.ts
@@ -34,7 +34,7 @@ export const useContactMomentStore = defineStore('contactmomenten', {
 		 * Refresh the list of contact moments.
 		 *
 		 * @param search - Optional search query to filter the contact moments list. (default: `null`)
-		 * @param notClosed
+		 * @param notClosed - Optional boolean to filter out closed contact moments from the contact moments list. (default: `false`)
 		 * @throws If the HTTP request fails.
 		 * @return {Promise<{ response: Response, data: TContactMoment[], entities: ContactMoment[] }>} The response, raw data, and entities.
 		 */
diff --git a/src/store/modules/medewerkers.js b/src/store/modules/medewerkers.js
new file mode 100644
index 0000000..28f7940
--- /dev/null
+++ b/src/store/modules/medewerkers.js
@@ -0,0 +1,211 @@
+/* eslint-disable no-console */
+import { defineStore } from 'pinia'
+import { Medewerker } from '../../entities/index.js'
+
+const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/medewerkers'
+
+export const useMedewerkerStore = defineStore('medewerkers', {
+	state: () => ({
+		medewerkerItem: false,
+		medewerkersList: [],
+		widgetMedewerkerId: null,
+		auditTrailItem: null,
+	}),
+	actions: {
+		setMedewerkerItem(medewerkerItem) {
+			this.medewerkerItem = medewerkerItem && new Medewerker(medewerkerItem)
+			console.log('Active medewerker item set to ' + medewerkerItem)
+		},
+		setWidgetMedewerkerId(widgetMedewerkerId) {
+			this.widgetMedewerkerId = widgetMedewerkerId
+			console.log('Widget medewerker id set to ' + widgetMedewerkerId)
+		},
+		setMedewerkersList(medewerkersList) {
+			this.medewerkersList = medewerkersList.map(
+			    (medewerkerItem) => new Medewerker(medewerkerItem),
+			)
+			console.log('Medewerkers list set to ' + medewerkersList.length + ' items')
+		},
+		setAuditTrailItem(auditTrailItem) {
+			this.auditTrailItem = auditTrailItem
+		},
+		/* istanbul ignore next */ // ignore this for Jest until moved into a service
+		async refreshMedewerkersList(search = null) {
+			let endpoint = apiEndpoint
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '?_search=' + search
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((medewerkerItem) => new Medewerker(medewerkerItem))
+
+			this.setMedewerkersList(data)
+
+			return { response, data, entities }
+		},
+
+		async searchMedewerkers(queryParams = null) {
+			let endpoint = apiEndpoint
+
+			if (queryParams !== null && queryParams !== '') {
+				endpoint = endpoint + '?' + queryParams
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((medewerkerItem) => new Medewerker(medewerkerItem))
+
+			this.setMedewerkersList(data)
+
+			return { response, data, entities }
+		},
+
+		async searchPersons(search = null) {
+			let endpoint = apiEndpoint
+
+			endpoint = endpoint + '?type=persoon'
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '&voornaam=' + search
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((medewerkerItem) => new Medewerker(medewerkerItem))
+
+			this.setMedewerkersList(data)
+
+			return { response, data, entities }
+		},
+
+		async searchOrganisations(search = null) {
+			let endpoint = apiEndpoint
+
+			endpoint = endpoint + '?type=organisatie'
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '&bedrijfsnaam=' + search
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((medewerkerItem) => new Medewerker(medewerkerItem))
+
+			this.setMedewerkersList(data)
+
+			return { response, data, entities }
+		},
+
+		// New function to get a single medewerker
+		async getMedewerker(id) {
+			const endpoint = `${apiEndpoint}/${id}`
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = await response.json()
+			const entity = new Medewerker(data)
+
+			this.setMedewerkerItem(data)
+
+			return { response, data, entity }
+		},
+		// Delete a medewerker
+		async deleteMedewerker(medewerkerItem) {
+			if (!medewerkerItem.id) {
+				throw new Error('No medewerker item to delete')
+			}
+
+			const endpoint = `${apiEndpoint}/${medewerkerItem.id}`
+
+			const response = await fetch(endpoint, {
+				method: 'DELETE',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			this.refreshMedewerkersList()
+
+			return { response }
+		},
+		// Create or save a medewerker from store
+		async saveMedewerker(medewerkerItem) {
+			if (!medewerkerItem) {
+				throw new Error('No medewerker item to save')
+			}
+
+			const isNewMedewerker = !medewerkerItem.id
+			const endpoint = isNewMedewerker
+				? `${apiEndpoint}`
+				: `${apiEndpoint}/${medewerkerItem.id}`
+			const method = isNewMedewerker ? 'POST' : 'PUT'
+
+			const response = await fetch(
+				endpoint,
+				{
+					method,
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify(medewerkerItem),
+				},
+			)
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = await response.json()
+			const entity = new Medewerker(data)
+
+			this.setMedewerkerItem(data)
+			this.refreshMedewerkersList()
+
+			return { response, data, entity }
+		},
+	},
+})
diff --git a/src/store/modules/medewerkers.specs.js b/src/store/modules/medewerkers.specs.js
new file mode 100644
index 0000000..89148a2
--- /dev/null
+++ b/src/store/modules/medewerkers.specs.js
@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+import { setActivePinia, createPinia } from 'pinia'
+
+import { useMedewerkerStore } from './medewerkers.js'
+import { Medewerker, mockMedewerker } from '../../entities/index.js'
+
+describe('Medewerker Store', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia())
+	})
+
+	it('sets medewerker item correctly', () => {
+		const store = useMedewerkerStore()
+
+		store.setMedewerkerItem(mockMedewerker()[0])
+
+		expect(store.medewerkerItem).toBeInstanceOf(Medewerker)
+		expect(store.medewerkerItem).toEqual(mockMedewerker()[0])
+
+		expect(store.medewerkerItem.validate().success).toBe(true)
+	})
+
+	it('sets medewerkers list correctly', () => {
+		const store = useMedewerkerStore()
+
+		store.setMedewerkersList(mockMedewerker())
+
+		expect(store.medewerkersList).toHaveLength(mockMedewerker().length)
+
+		store.medewerkersList.forEach((item, index) => {
+			expect(item).toBeInstanceOf(Medewerker)
+			expect(item).toEqual(mockMedewerker()[index])
+			expect(item.validate().success).toBe(true)
+		})
+	})
+})
diff --git a/src/store/modules/navigation.ts b/src/store/modules/navigation.ts
index 74ad48f..3afe94d 100644
--- a/src/store/modules/navigation.ts
+++ b/src/store/modules/navigation.ts
@@ -2,7 +2,7 @@
 import { defineStore } from 'pinia'
 
 interface NavigationStoreState {
-    selected: 'dashboard' | 'berichten' | 'klanten' | 'rollen' | 'taken' | 'zaken' | 'zaakTypen' | 'search' | 'auditTrail' | 'contactMomenten';
+    selected: 'dashboard' | 'berichten' | 'klanten' | 'rollen' | 'taken' | 'zaken' | 'zaakTypen' | 'search' | 'auditTrail' | 'contactMomenten' | 'medewerkers';
     modal: string;
     dialog: string;
     transferData: string;
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index e4c44a2..118c8ad 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -10,6 +10,7 @@ export const useTaakStore = defineStore('taken', {
 		takenList: [],
 		taakZaakId: null,
 		auditTrailItem: null,
+		widgetTaakId: null,
 	}),
 	actions: {
 		setTaakItem(taakItem) {
@@ -29,14 +30,26 @@ export const useTaakStore = defineStore('taken', {
 		setAuditTrailItem(auditTrailItem) {
 			this.auditTrailItem = auditTrailItem
 		},
+		setWidgetTaakId(widgetTaakId) {
+			this.widgetTaakId = widgetTaakId
+			console.log('Active widget taak Id set to ' + widgetTaakId)
+		},
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
-		async refreshTakenList(search = null) {
+		async refreshTakenList(search = null, notClosed = false) {
 			let endpoint = apiEndpoint
 
 			if (search !== null && search !== '') {
 				endpoint = endpoint + '?_search=' + search
 			}
 
+			if (notClosed) {
+				if (search !== null && search !== '') {
+					endpoint = endpoint + '&status=open'
+				} else {
+					endpoint = endpoint + '?status=open'
+				}
+			}
+
 			const response = await fetch(endpoint, {
 				method: 'GET',
 			})
diff --git a/src/store/store.js b/src/store/store.js
index 9e2a38a..8734fa1 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -9,6 +9,8 @@ import { useRolStore } from './modules/rol.ts'
 import { useTaakStore } from './modules/taak.js'
 import { useSearchStore } from './modules/search.ts'
 import { useContactMomentStore } from './modules/contactmoment.ts'
+import { useMedewerkerStore } from './modules/medewerkers.js'
+
 const berichtStore = useBerichtStore(pinia)
 const klantStore = useKlantStore(pinia)
 const navigationStore = useNavigationStore(pinia)
@@ -18,6 +20,7 @@ const zaakStore = useZaakStore(pinia)
 const zaakTypeStore = useZaakTypeStore(pinia)
 const searchStore = useSearchStore(pinia)
 const contactMomentStore = useContactMomentStore(pinia)
+const medewerkerStore = useMedewerkerStore(pinia)
 export {
 	berichtStore,
 	klantStore,
@@ -28,4 +31,5 @@ export {
 	zaakTypeStore,
 	searchStore,
 	contactMomentStore,
+	medewerkerStore,
 }
diff --git a/src/views/Views.vue b/src/views/Views.vue
index b370582..235e237 100644
--- a/src/views/Views.vue
+++ b/src/views/Views.vue
@@ -11,6 +11,7 @@ import { navigationStore } from '../store/store.js'
 			<DashboardIndex v-if="navigationStore.selected === 'dashboard'" />
 			<DocumentenIndex v-if="navigationStore.selected === 'documenten'" />
 			<KlantenIndex v-if="navigationStore.selected === 'klanten'" />
+			<MedewerkerIndex v-if="navigationStore.selected === 'medewerkers'" />
 			<ResultatenIndex v-if="navigationStore.selected === 'resultaten'" />
 			<RollenIndex v-if="navigationStore.selected === 'rollen'" />
 			<StatusssenIndex v-if="navigationStore.selected === 'statusssen'" />
@@ -30,6 +31,7 @@ import DashboardIndex from './dashboard/DashboardIndex.vue'
 import SearchIndex from './search/SearchIndex.vue'
 import DocumentenIndex from './documenten/DocumentenIndex.vue'
 import KlantenIndex from './klanten/KlantenIndex.vue'
+import MedewerkerIndex from './medewerkers/MedewerkerIndex.vue'
 import ResultatenIndex from './resultaten/ResultatenIndex.vue'
 import RollenIndex from './rollen/RollenIndex.vue'
 import StatusssenIndex from './statussen/StatussenIndex.vue'
@@ -47,6 +49,7 @@ export default {
 		ContactMomentenIndex,
 		DocumentenIndex,
 		KlantenIndex,
+		MedewerkerIndex,
 		ResultatenIndex,
 		RollenIndex,
 		StatusssenIndex,
diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
new file mode 100644
index 0000000..76bf8f5
--- /dev/null
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -0,0 +1,158 @@
+<script setup>
+import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore } from '../../store/store.js'
+</script>
+
+<template>
+	<div class="detailContainer">
+		<div id="app-content">
+			<!-- app-content-wrapper is optional, only use if app-content-list  -->
+			<div>
+				<div class="head">
+					<h1 class="h1">
+						{{ getName(medewerkerStore.medewerkerItem) }}
+					</h1>
+
+					<NcActions :primary="true" menu-name="Acties">
+						<template #icon>
+							<DotsHorizontal :size="20" />
+						</template>
+						<NcActionButton @click="navigationStore.setModal('editKlant')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
+						</NcActionButton>
+						<NcActionButton @click="taakStore.setTaakItem(); navigationStore.setModal('editTaak')">
+							<template #icon>
+								<CalendarMonthOutline :size="20" />
+							</template>
+							Taak geven
+						</NcActionButton>
+						<NcActionButton @click="berichtStore.setBerichtItem(); navigationStore.setModal('editBericht')">
+							<template #icon>
+								<ChatOutline :size="20" />
+							</template>
+							Bericht versturen
+						</NcActionButton>
+						<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+							<template #icon>
+								<BriefcaseAccountOutline :size="20" />
+							</template>
+							Zaak starten
+						</NcActionButton>
+						<NcActionButton @click="navigationStore.setDialog('deleteKlant')">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+							Verwijderen
+						</NcActionButton>
+					</NcActions>
+				</div>
+				<span> {{ medewerkerStore.medewerkerItem.subject }} </span>
+
+				<div class="gridContent">
+					<b>Email adres:</b>
+					<p>{{ medewerkerStore.medewerkerItem.emailadres }}</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { countries } from '../../data/countries.js'
+
+// Icons
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
+import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
+import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+export default {
+	name: 'MedewerkerDetails',
+	components: {
+		NcActions,
+		NcActionButton,
+		// Icons
+		DotsHorizontal,
+		Pencil,
+		ChatOutline,
+		CalendarMonthOutline,
+		BriefcaseAccountOutline,
+		TrashCanOutline,
+	},
+	data() {
+		return {
+			currentActiveKlant: undefined, // whole klant object
+			zaken: [],
+			taken: [],
+			berichten: [],
+			contactMomenten: [],
+			auditTrails: [],
+		}
+	},
+	mounted() {
+		if (medewerkerStore.medewerkerItem?.id) {
+			this.currentActiveMedewerker = medewerkerStore.medewerkerItem
+		}
+	},
+	updated() {
+		if (medewerkerStore.medewerkerItem?.id && JSON.stringify(this.currentActiveMedewerker) !== JSON.stringify(medewerkerStore.medewerkerItem)) {
+			this.currentActiveMedewerker = medewerkerStore.medewerkerItem
+		}
+	},
+	methods: {
+
+		getName(medewerker) {
+			return `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}` ?? 'onbekend'
+		},
+
+		getLandName(landId) {
+			return countries.find(country => country.code === landId)?.name ?? 'onbekend'
+		},
+	},
+}
+</script>
+
+<style>
+.detailContainer {
+    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;
+}
+
+.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);
+}
+
+.gridContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px !important;
+}
+.gridContent > h5 {
+    margin-top: 12px !important;
+}
+
+.gridFullWidth {
+    grid-column: 1 / -1;
+}
+
+</style>
diff --git a/src/views/medewerkers/MedewerkerIndex.vue b/src/views/medewerkers/MedewerkerIndex.vue
new file mode 100644
index 0000000..7009b0b
--- /dev/null
+++ b/src/views/medewerkers/MedewerkerIndex.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { navigationStore, medewerkerStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcAppContent>
+		<template #list>
+			<MedewerkerList />
+		</template>
+		<template #default>
+			<NcEmptyContent v-if="!medewerkerStore.medewerkerItem?.id || navigationStore.selected != 'medewerkers' "
+				class="detailContainer"
+				name="Geen medewerker"
+				description="Nog geen medewerker geselecteerd">
+				<template #icon>
+					<AccountOutline />
+				</template>
+				<template #action>
+					<NcButton type="primary" @click="navigationStore.setModal('editMedewerker')">
+						Medewerker toevoegen
+					</NcButton>
+				</template>
+			</NcEmptyContent>
+			<MedewerkerDetails v-if="medewerkerStore.medewerkerItem?.id && navigationStore.selected === 'medewerkers'" :medewerker-id="medewerkerStore.medewerkerItem.id" />
+		</template>
+	</NcAppContent>
+</template>
+
+<script>
+import { NcAppContent, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import MedewerkerList from './MedewerkerList.vue'
+import MedewerkerDetails from './MedewerkerDetails.vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+
+export default {
+	name: 'MedewerkerIndex',
+	components: {
+		NcAppContent,
+		NcEmptyContent,
+		NcButton,
+		MedewerkerList,
+		MedewerkerDetails,
+		AccountOutline,
+	},
+	data() {
+		return {
+			activeMetaData: false,
+			medewerkerId: undefined,
+		}
+	},
+}
+</script>
diff --git a/src/views/medewerkers/MedewerkerList.vue b/src/views/medewerkers/MedewerkerList.vue
new file mode 100644
index 0000000..f6c5bde
--- /dev/null
+++ b/src/views/medewerkers/MedewerkerList.vue
@@ -0,0 +1,194 @@
+<script setup>
+import { navigationStore, medewerkerStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcAppContentList>
+		<ul>
+			<div class="listHeader">
+				<NcTextField
+					:value.sync="search"
+					:show-trailing-button="search !== ''"
+					label="Search"
+					class="searchField"
+					trailing-button-icon="close"
+					@trailing-button-click="clearText">
+					<Magnify :size="20" />
+				</NcTextField>
+				<NcActions>
+					<NcActionButton @click="medewerkerStore.refreshMedewerkersList()">
+						<template #icon>
+							<Refresh :size="20" />
+						</template>
+						Ververs
+					</NcActionButton>
+					<NcActionButton @click="medewerkerStore.setMedewerkerItem(null); navigationStore.setModal('editMedewerker')">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						Medewerker toevoegen
+					</NcActionButton>
+				</NcActions>
+			</div>
+			<div v-if="medewerkerStore.medewerkersList?.length && !loading">
+				<NcListItem v-for="(medewerker, i) in medewerkerStore.medewerkersList"
+					:key="`${medewerker}${i}`"
+					:name="getName(medewerker)"
+					:active="medewerkerStore.medewerkerItem?.id === medewerker?.id"
+					:force-display-actions="true"
+					:details="_.upperFirst(medewerker.type)"
+					@click="medewerkerStore.setMedewerkerItem(medewerker)">
+					<template #icon>
+						<AccountOutline :class="medewerkerStore.medewerkerItem === medewerker.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+					</template>
+					<template #subname>
+						{{ getSubname(medewerker) }}
+					</template>
+					<template #actions>
+						<NcActionButton @click="medewerkerStore.setMedewerkerItem(medewerker); navigationStore.setModal('editMedewerker')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
+						</NcActionButton>
+					</template>
+				</NcListItem>
+			</div>
+		</ul>
+
+		<div v-if="!medewerkerStore.medewerkersList?.length && !loading">
+			Geen medewerkers gedefinieerd.
+		</div>
+
+		<NcLoadingIcon v-if="loading"
+			class="loadingIcon"
+			:size="64"
+			appearance="dark"
+			name="Medewerkers aan het laden" />
+	</NcAppContentList>
+</template>
+<script>
+// Components
+import { NcListItem, NcActionButton, NcAppContentList, NcTextField, NcLoadingIcon, NcActions } from '@nextcloud/vue'
+import _ from 'lodash'
+
+// Icons
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+
+export default {
+	name: 'MedewerkerList',
+	components: {
+		// Components
+		NcListItem,
+		NcActionButton,
+		NcAppContentList,
+		NcTextField,
+		NcLoadingIcon,
+		// Icons
+		AccountOutline,
+		Magnify,
+		Pencil,
+	},
+	data() {
+		return {
+			search: '',
+			loading: true,
+			medewerkersList: [],
+		}
+	},
+	mounted() {
+		medewerkerStore.refreshMedewerkersList().then(() => {
+			this.loading = false
+		})
+	},
+	methods: {
+		fullName(medewerker) {
+			let name = medewerker.achternaam
+			if (medewerker.tussenvoegsel) {
+				name = `${medewerker.tussenvoegsel} ${name}`
+			}
+			if (medewerker.voornaam) {
+				name = `${name}, ${medewerker.voornaam}`
+			}
+			return name
+		},
+		getName(medewerker) {
+			return medewerker?.voornaam ?? 'onbekend'
+
+		},
+		getSubname(medewerker) {
+			return medewerker?.tussenvoegsel ? `${medewerker.tussenvoegsel} ${medewerker.achternaam}` : medewerker?.achternaam ? `${medewerker.achternaam}` : 'onbekend'
+
+		},
+		deleteKlant() {
+			fetch(
+				`/index.php/apps/zaakafhandelapp/api/medewerkers/${medewerkerStore.medewerkerItem.id}`,
+				{
+					method: 'DELETE',
+				},
+			)
+				.then((response) => {
+					response.json().then((data) => {
+						this.medewerkersList = data
+					})
+					this.loading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.loading = false
+				})
+		},
+		fetchData(newPage) {
+			this.loading = true
+			fetch(
+				'/index.php/apps/zaakafhandelapp/api/medewerkers',
+				{
+					method: 'GET',
+				},
+			)
+				.then((response) => {
+					response.json().then((data) => {
+						this.medewerkersList = data
+					})
+					this.loading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.loading = false
+				})
+		},
+		clearText() {
+			this.search = ''
+		},
+	},
+}
+</script>
+<style>
+.listHeader {
+    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;
+}
+
+.selectedZaakIcon>svg {
+    fill: white;
+}
+
+.loadingIcon {
+    margin-block-start: var(--zaa-margin-20);
+}
+</style>
diff --git a/src/views/settings/Settings.vue b/src/views/settings/Settings.vue
index cbe8a6a..a460495 100644
--- a/src/views/settings/Settings.vue
+++ b/src/views/settings/Settings.vue
@@ -19,7 +19,7 @@
 					</NcButton>
 				</div>
 
-				<div v-if="!openRegisterInstalled && (settingsData.berichten_source === 'openregister' || settingsData.besluiten_source === 'openregister' || settingsData.documenten_source === 'openregister' || settingsData.klanten_source === 'openregister' || settingsData.resultaten_source === 'openregister' || settingsData.taken_source === 'openregister' || settingsData.informatieobjecten_source === 'openregister' || settingsData.organisaties_source === 'openregister' || settingsData.personen_source === 'openregister' || settingsData.zaken_source === 'openregister' || settingsData.contactmomenten_source === 'openregister')">
+				<div v-if="!openRegisterInstalled && (settingsData.berichten_source === 'openregister' || settingsData.besluiten_source === 'openregister' || settingsData.documenten_source === 'openregister' || settingsData.klanten_source === 'openregister' || settingsData.resultaten_source === 'openregister' || settingsData.taken_source === 'openregister' || settingsData.informatieobjecten_source === 'openregister' || settingsData.organisaties_source === 'openregister' || settingsData.personen_source === 'openregister' || settingsData.zaken_source === 'openregister' || settingsData.contactmomenten_source === 'openregister' || settingsData.medewerkers_source === 'openregister')">
 					<NcNoteCard type="warning">
 						Het lijkt erop dat je een open register hebt geselecteerd maar dat deze nog niet geïnstalleerd is. Dit kan problemen geven. Wil je de instelling resetten?
 					</NcNoteCard>
@@ -205,6 +205,13 @@ export default {
 				availableSchemas: [],
 				loading: false,
 			},
+			medewerkers: {
+				selectedSource: '',
+				selectedRegister: '',
+				selectedSchema: '',
+				availableSchemas: [],
+				loading: false,
+			},
 			labelOptions: {
 				options: [
 					{ label: 'Internal', value: 'internal' },
@@ -224,6 +231,7 @@ export default {
 				{ id: 'zaken', title: 'Zaken', description: 'Configureer de opslag voor zaken', helpLink: 'https://example.com/help/zaken' },
 				{ id: 'zaaktypen', title: 'Zaaktypen', description: 'Configureer de opslag voor zaaktypen', helpLink: 'https://example.com/help/zaaktypen' },
 				{ id: 'contactmomenten', title: 'Contactmomenten', description: 'Configureer de opslag voor contactmomenten', helpLink: 'https://example.com/help/contactmomenten' },
+				{ id: 'medewerkers', title: 'Medewerkers', description: 'Configureer de opslag voor medewerkers', helpLink: 'https://example.com/help/medewerkers' },
 			],
 		}
 	},
@@ -482,6 +490,27 @@ export default {
 			},
 			deep: true,
 		},
+		'medewerkers.selectedSource': {
+			handler(newValue) {
+				if (newValue?.value === 'internal') {
+
+					this.medewerkers.selectedRegister = ''
+					this.medewerkers.selectedSchema = ''
+				}
+			},
+			deep: true,
+		},
+		'medewerkers.selectedRegister': {
+			handler(newValue, oldValue) {
+
+				if (this.initialization === true && oldValue === '') return
+				if (newValue) {
+					this.setRegisterSchemaOptions(newValue?.value, 'medewerkers')
+					oldValue !== '' && newValue?.value !== oldValue.value && (this.medewerkers.selectedSchema = '')
+				}
+			},
+			deep: true,
+		},
 
 	},
 	mounted() {
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index f55f21f..b737895 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -29,6 +29,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 
 		<ContactMomentenForm v-if="isModalOpen"
 			:dashboard-widget="true"
+			:contact-moment-id="contactMomentId"
 			@save-success="fetchContactMomentItems"
 			@close-modal="closeModal" />
 	</div>
@@ -66,11 +67,12 @@ export default {
 			isModalOpen: false,
 			searchKlantModalOpen: false,
 			contactMomentItems: [],
+			contactMomentId: null,
 			itemMenu: {
-				// show: {
-				// 	text: 'Bekijk',
-				// 	icon: 'icon-toggle',
-				// },
+				show: {
+					text: 'Bekijk',
+					icon: 'icon-toggle',
+				},
 				sluiten: {
 					text: 'Sluit',
 					icon: this.getSluitenIcon(),
@@ -134,6 +136,7 @@ export default {
 		},
 		openModal() {
 			this.isModalOpen = true
+			contactMomentStore.setWidgetContactMomentId(null)
 			contactMomentStore.setContactMomentItem(null)
 			navigationStore.setModal('contactMomentenForm')
 		},
@@ -142,8 +145,10 @@ export default {
 			navigationStore.setModal(null)
 		},
 
-		onShow() {
-			window.open('/apps/opencatalogi/catalogi', '_self')
+		onShow(event) {
+			this.contactMomentId = event.id
+			this.isModalOpen = true
+			navigationStore.setModal('contactMomentenForm')
 		},
 		async onSluiten(event) {
 			// change status to 'gesloten'
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index cc44b49..2155df6 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -7,7 +7,9 @@ import { taakStore, navigationStore } from '../../store/store.js'
 		<div class="itemContainer">
 			<NcDashboardWidget :items="items"
 				:loading="loading"
-				@show="onShow">
+				:item-menu="itemMenu"
+				@show="onShow"
+				@sluiten="onSluiten">
 				<template #empty-content>
 					<NcEmptyContent name="Geen open taken">
 						<template #icon>
@@ -18,16 +20,25 @@ import { taakStore, navigationStore } from '../../store/store.js'
 			</NcDashboardWidget>
 		</div>
 
-		<NcButton type="primary" @click="openModal">
-			<template #icon>
-				<Plus :size="20" />
-			</template>
-			Taak aanmaken
-		</NcButton>
+		<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>
 
 		<TakenForm v-if="isModalOpen"
 			:dashboard-widget="true"
-			@save-success="fetchTaakItems"
+			:taak-id="taakId"
+			@save-success="closeModal"
 			@close-modal="closeModal" />
 	</div>
 </template>
@@ -36,9 +47,14 @@ import { taakStore, navigationStore } from '../../store/store.js'
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import { getTheme } from '../../services/getTheme.js'
+
+// Entities
+import { Taak } from '../../entities/index.js'
+
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
-import TakenForm from '../../modals/taken/EditTaak.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
 
 export default {
 	name: 'TakenWidget',
@@ -55,6 +71,16 @@ export default {
 			loading: false,
 			isModalOpen: false,
 			taakItems: [],
+			itemMenu: {
+				show: {
+					text: 'Bekijk',
+					icon: 'icon-toggle',
+				},
+				sluiten: {
+					text: 'Sluiten',
+					icon: this.getSluitenIcon(),
+				},
+			},
 		}
 	},
 
@@ -71,8 +97,9 @@ export default {
 	methods: {
 		fetchTaakItems() {
 			this.loading = true
-			taakStore.refreshTakenList()
+			taakStore.refreshTakenList(null, true)
 				.then(() => {
+
 					this.taakItems = taakStore.takenList.map(taak => ({
 						id: taak.id,
 						mainText: taak.title,
@@ -102,9 +129,41 @@ export default {
 		closeModal() {
 			this.isModalOpen = false
 			navigationStore.setModal(null)
+			this.fetchTaakItems()
 		},
-		onShow() {
-			window.open('/apps/opencatalogi/catalogi', '_self')
+
+		onShow(event) {
+			this.taakId = event.id
+			this.isModalOpen = true
+			navigationStore.setModal('widgetTaakForm')
+		},
+
+		getSluitenIcon() {
+			const theme = getTheme()
+
+			return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
+		},
+
+		async onSluiten(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)
+					}
+				})
 		},
 	},
 
@@ -121,4 +180,9 @@ export default {
 	overflow: auto;
 	margin-block-end: var(--zaa-margin-10);
  }
+
+ .buttonContainer{
+	display: flex;
+	gap: 10px;
+ }
 </style>