diff --git a/appinfo/routes.php b/appinfo/routes.php
index 6f46037..cf4db34 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -1,46 +1,46 @@
 <?php
 
 return [
-	 'resources' => [
+	'resources' => [
 		// Conform https://vng-realisatie.github.io/gemma-zaken/standaard/zaken/redoc-1.5.1
-	 	'zaken' => ['url' => 'api/zrc/zaken'],
-	 	'resultaten' => ['url' => 'api/zrc/resultaten'],
-	 	'rollen' => ['url' => 'api/zrc/rollen'],
-	 	'statussen' => ['url' => 'api/zrc/statussen'],
-	 	'zaakinformatieobjecten' => ['url' => 'api/zrc/zaakinformatieobjecten'],
-	 	'zaakobjecten' => ['url' => 'api/zrc/zaakobjecten'],
-	 	'zaakbesluiten' => ['url' => 'api/zrc/zaken/{zaak_uuid}/besluiten'],
-	 	'zaakeigenschappen' => ['url' => 'api/zrc/zaken/{zaak_uuid}/eigenschappen'],
-	 	'zaakaudittrail' => ['url' => 'api/zrc/zaken/{zaak_uuid}/audit_trail'],
+		'zaken' => ['url' => 'api/zrc/zaken'],
+		'resultaten' => ['url' => 'api/zrc/resultaten'],
+		'rollen' => ['url' => 'api/zrc/rollen'],
+		'statussen' => ['url' => 'api/zrc/statussen'],
+		'zaakinformatieobjecten' => ['url' => 'api/zrc/zaakinformatieobjecten'],
+		'zaakobjecten' => ['url' => 'api/zrc/zaakobjecten'],
+		'zaakbesluiten' => ['url' => 'api/zrc/zaken/{zaak_uuid}/besluiten'],
+		'zaakeigenschappen' => ['url' => 'api/zrc/zaken/{zaak_uuid}/eigenschappen'],
+		'zaakaudittrail' => ['url' => 'api/zrc/zaken/{zaak_uuid}/audit_trail'],
 		// Conform https://vng-realisatie.github.io/gemma-zaken/standaard/catalogi/redoc-1.3.1
-	 	'zaakTypen' => ['url' => 'api/ztc'],
+		'zaakTypen' => ['url' => 'api/ztc'],
 		// Conform https://vng-realisatie.github.io/gemma-zaken/standaard/documenten/redoc-1.5.0
-	 	'documenten' => ['url' => 'api/drc'],
+		'documenten' => ['url' => 'api/drc'],
 		// Conform https://vng-realisatie.github.io/gemma-zaken/standaard/besluiten/redoc-1.0.2
-	 	'besluiten' => ['url' => 'api/brc'],
+		'besluiten' => ['url' => 'api/brc'],
 		// Conform ???
-	 	'zaakTypen' => ['url' => 'api/ztc/zaaktypen'],
-		 // Conform ???
-	 	'taken' => ['url' => 'api/taken'],
-	 	'klanten' => ['url' => 'api/klanten'],
-	 	'berichten' => ['url' => 'api/berichten'],
+		'zaakTypen' => ['url' => 'api/ztc/zaaktypen'],
+		// Conform ???
+		'taken' => ['url' => 'api/taken'],
+		'klanten' => ['url' => 'api/klanten'],
+		'berichten' => ['url' => 'api/berichten'],
 		'contactmomenten' => ['url' => 'api/contactmomenten'],
 		'medewerkers' => ['url' => 'api/medewerkers'],
-		
-	 ],
+
+	],
 	'routes' => [
 		// Audit trail routes
 		['name' => 'zaken#getAuditTrail', 'url' => '/api/zaken/{id}/audit_trail', 'verb' => 'GET'],
 		['name' => 'klanten#getAuditTrail', 'url' => '/api/klanten/{id}/audit_trail', 'verb' => 'GET'],
 		['name' => 'berichten#getAuditTrail', 'url' => '/api/berichten/{id}/audit_trail', 'verb' => 'GET'],
 		['name' => 'taken#getAuditTrail', 'url' => '/api/taken/{id}/audit_trail', 'verb' => 'GET'],
-		
+
 		// Overige klant routes
 		['name' => 'klanten#getContactmomenten', 'url' => '/api/klanten/{id}/contactmomenten', 'verb' => 'GET'],
 		['name' => 'klanten#getTaken', 'url' => '/api/klanten/{id}/taken', 'verb' => 'GET'],
 		['name' => 'klanten#getBerichten', 'url' => '/api/klanten/{id}/berichten', 'verb' => 'GET'],
-		['name' => 'klanten#getZaken', 'url' => '/api/klanten/{id}/zaken', 'verb' => 'GET'],	
-			
+		['name' => 'klanten#getZaken', 'url' => '/api/klanten/{id}/zaken', 'verb' => 'GET'],
+
 		// Page routes
 		['name' => 'dashboard#page', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'configuration#index', 'url' => '/api/configuration', 'verb' => 'GET'],
@@ -48,7 +48,7 @@
 		['name' => 'zaken#page', 'url' => '/zaken', 'verb' => 'GET'],
 		['name' => 'rollen#page', 'url' => '/rollen', 'verb' => 'GET'],
 		['name' => 'statussen#page', 'url' => '/statussen', 'verb' => 'GET'],
-		['name' => 'zaakinformatieobjecten#page', 'url' => '/zaakinformatieobjecten', 'verb' => 'GET'],		
+		['name' => 'zaakinformatieobjecten#page', 'url' => '/zaakinformatieobjecten', 'verb' => 'GET'],
 		['name' => 'zaakTypen#page','url' => '/zaak_typen', 'verb' => 'GET'],
 		['name' => 'taken#page','url' => '/taken', 'verb' => 'GET'],
 		['name' => 'klanten#page','url' => '/klanten', 'verb' => 'GET'],
@@ -56,5 +56,7 @@
 		// user Settings
 		['name' => 'settings#index','url' => '/settings', 'verb' => 'GET'],
 		['name' => 'settings#create', 'url' => '/settings', 'verb' => 'POST'],
+		// User
+		['name' => 'users#me', 'url' => '/me', 'verb' => 'GET'],
 	]
 ];
diff --git a/css/dashboardWidgets.css b/css/dashboardWidgets.css
index 8e75b49..c68e871 100644
--- a/css/dashboardWidgets.css
+++ b/css/dashboardWidgets.css
@@ -1,9 +1,11 @@
+/* import icons css file */
+@import "../src/services/icons/icons.css";
+
 .icon-zaken-widget {
-    background-image: url("../img/app-dark.svg");
-    filter: var(--background-invert-if-dark);
-  }
-  
-  body.theme--dark .icon-zaken-widget {
-    background-image: url("../img/app.svg");
-  }
-  
\ No newline at end of file
+  background-image: url("../img/app-dark.svg");
+  filter: var(--background-invert-if-dark);
+}
+
+body.theme--dark .icon-zaken-widget {
+  background-image: url("../img/app.svg");
+}
diff --git a/lib/Controller/UsersController.php b/lib/Controller/UsersController.php
new file mode 100644
index 0000000..79b99a7
--- /dev/null
+++ b/lib/Controller/UsersController.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace OCA\ZaakAfhandelApp\Controller;
+
+use OCP\IAppConfig;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\IRequest;
+use OCP\IUserSession;
+
+/**
+ * Class SettingsController
+ *
+ * Controller for handling settings-related operations in the OpenCatalogi app.
+ */
+class UsersController extends Controller
+{
+
+	/**
+	 * SettingsController constructor.
+	 *
+	 * @param string $appName The name of the app
+	 * @param IAppConfig $config The app configuration
+	 * @param IRequest $request The request object
+	 */
+	public function __construct(
+		$appName,
+		IRequest $request,
+		private readonly IAppConfig $config,
+		private readonly IUserSession $userSession,
+	) {
+		parent::__construct($appName, $request);
+	}
+
+	/**
+	 * Gets info about the currently active/logged-in user.
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse Info about the current user.
+	 */
+	public function me(): JSONResponse
+	{
+		// Get the current user
+		$currentUser = $this->userSession->getUser();
+
+		try {
+			$data = [
+				'user' => [
+					'id' => $currentUser->getUID(),
+					'displayName' => $currentUser->getDisplayName(),
+					'email' => $currentUser->getEMailAddress(),
+					'systemEmail' => $currentUser->getSystemEMailAddress(),
+					'primaryEmail' => $currentUser->getPrimaryEMailAddress(),
+					'lastLogin' => $currentUser->getLastLogin(),
+					'quota' => $currentUser->getQuota(),
+					'home' => $currentUser->getHome(),
+					'backendClassName' => $currentUser->getBackendClassName(),
+					'avatarImage' => $currentUser->getAvatarImage(64),
+					'cloudId' => $currentUser->getCloudId(),
+					'isEnabled' => $currentUser->isEnabled(),
+					'canChangeDisplayName' => $currentUser->canChangeDisplayName(),
+					'canChangePassword' => $currentUser->canChangePassword(),
+					'canChangeAvatar' => $currentUser->canChangeAvatar(),
+					'managerUids' => $currentUser->getManagerUids(),
+				],
+				'medewerker' => 'placeholder-todo'
+			];
+			return new JSONResponse($data);
+		} catch (\Exception $e) {
+			return new JSONResponse(['error' => $e->getMessage()], 500);
+		}
+	}
+}
diff --git a/lib/Controller/ZaakTypenController.php b/lib/Controller/ZaakTypenController.php
index 41451f2..ffed1e1 100644
--- a/lib/Controller/ZaakTypenController.php
+++ b/lib/Controller/ZaakTypenController.php
@@ -96,9 +96,11 @@ public function update(string $id): JSONResponse
         // Remove the 'id' field if it exists, as we're creating a new object
         unset($data['id']);
 
+		$data['id'] = $id;
+
         // Save the new catalog object
         $object = $this->objectService->saveObject('zaaktypen', $data);
-        
+
         // Return the created object as a JSON response
         return new JSONResponse($object);
 	}
diff --git a/package-lock.json b/package-lock.json
index 91c1b3d..7ac9a80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15265,8 +15265,7 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "license": "MIT"
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
diff --git a/src/entities/medewerkers/medewerkers.mock.ts b/src/entities/medewerkers/medewerkers.mock.ts
index 5fd76c5..6c45360 100644
--- a/src/entities/medewerkers/medewerkers.mock.ts
+++ b/src/entities/medewerkers/medewerkers.mock.ts
@@ -8,6 +8,7 @@ export const mockMedewerkerData = (): TMedewerker[] => [
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
 		email: 'john.doe@example.com',
+		telefoonnummer: '0612345678',
 	},
 ]
 
diff --git a/src/entities/medewerkers/medewerkers.ts b/src/entities/medewerkers/medewerkers.ts
index 0f5eb9f..302c6aa 100644
--- a/src/entities/medewerkers/medewerkers.ts
+++ b/src/entities/medewerkers/medewerkers.ts
@@ -8,6 +8,7 @@ export class Medewerker implements TMedewerker {
 	public tussenvoegsel: string
 	public achternaam: string
 	public email: string
+	public telefoonnummer: string
 
 	constructor(source: TMedewerker) {
 		this.id = source.id || ''
@@ -15,7 +16,7 @@ export class Medewerker implements TMedewerker {
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''
 		this.email = source.email || ''
-
+		this.telefoonnummer = source.telefoonnummer || ''
 	}
 
 	public validate(): SafeParseReturnType<TMedewerker, unknown> {
@@ -25,6 +26,7 @@ export class Medewerker implements TMedewerker {
 			tussenvoegsel: z.string(),
 			achternaam: z.string(),
 			email: z.string().email(),
+			telefoonnummer: z.string().min(1),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/medewerkers/medewerkers.types.ts b/src/entities/medewerkers/medewerkers.types.ts
index 7a50331..3face2b 100644
--- a/src/entities/medewerkers/medewerkers.types.ts
+++ b/src/entities/medewerkers/medewerkers.types.ts
@@ -4,4 +4,5 @@ export type TMedewerker = {
     tussenvoegsel: string;
     achternaam: string;
     email: string;
+    telefoonnummer: string;
 }
diff --git a/src/entities/rol/rol.types.ts b/src/entities/rol/rol.types.ts
index e0fbff9..c1b7920 100644
--- a/src/entities/rol/rol.types.ts
+++ b/src/entities/rol/rol.types.ts
@@ -4,7 +4,7 @@ export type TRol = {
     omschrijving: string;
     omschrijvingGeneriek: string;
     url: string;
-    zaak: string;
+    zaak: string; // zaak id
     betrokkene: string;
     betrokkeneType: string;
     afwijkendeNaamBetrokkene: string;
diff --git a/src/entities/taak/taak.mock.ts b/src/entities/taak/taak.mock.ts
index 979f181..c938903 100644
--- a/src/entities/taak/taak.mock.ts
+++ b/src/entities/taak/taak.mock.ts
@@ -13,6 +13,7 @@ export const mockTaakData = (): TTaak[] => [
 		toelichting: 'Deze taak omvat het uitvoeren van een gedetailleerde interne audit van de bedrijfsprocessen om te controleren of alle afdelingen voldoen aan de vastgestelde kwaliteitsnormen. De bevindingen worden gedocumenteerd en er worden aanbevelingen gedaan voor verbeteringen.',
 		actie: 'Voorbereiden van auditchecklist, uitvoeren van audits, rapporteren van bevindingen, aanbevelen van verbeteringen.',
 		klant: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
+		medewerker: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
 	},
 ]
 
diff --git a/src/entities/taak/taak.ts b/src/entities/taak/taak.ts
index 8f75c80..9e34c14 100644
--- a/src/entities/taak/taak.ts
+++ b/src/entities/taak/taak.ts
@@ -14,7 +14,7 @@ export class Taak implements TTaak {
 	public toelichting: string
 	public actie: string
 	public klant: string
-
+	public medewerker: string
 	constructor(source: TTaak) {
 		this.id = source.id || ''
 		this.title = source.title || ''
@@ -26,6 +26,7 @@ export class Taak implements TTaak {
 		this.toelichting = source.toelichting || ''
 		this.actie = source.actie || ''
 		this.klant = source.klant || ''
+		this.medewerker = source.medewerker || ''
 	}
 
 	public validate(): SafeParseReturnType<TTaak, unknown> {
@@ -40,6 +41,7 @@ export class Taak implements TTaak {
 			toelichting: z.string(),
 			actie: z.string(),
 			klant: z.string(),
+			medewerker: z.string(),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/taak/taak.types.ts b/src/entities/taak/taak.types.ts
index 141bd6f..f1dc534 100644
--- a/src/entities/taak/taak.types.ts
+++ b/src/entities/taak/taak.types.ts
@@ -10,5 +10,6 @@ export type TTaak = {
     onderwerp: string;
     toelichting: string;
     actie: string;
-    klant: string;
+	klant: string
+	medewerker: string
 }
diff --git a/src/entities/zaak/zaak.mock.ts b/src/entities/zaak/zaak.mock.ts
index 8e5197d..9f21229 100644
--- a/src/entities/zaak/zaak.mock.ts
+++ b/src/entities/zaak/zaak.mock.ts
@@ -26,6 +26,7 @@ export const mockZaakData = (): TZaak[] => [
 		selectielijstklasse: 'http://example.com',
 		hoofdzaak: 'http://example.com',
 		klant: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		berichten: [],
 	},
 ]
 
diff --git a/src/entities/zaak/zaak.ts b/src/entities/zaak/zaak.ts
index 57a1515..9bb02e5 100644
--- a/src/entities/zaak/zaak.ts
+++ b/src/entities/zaak/zaak.ts
@@ -26,6 +26,7 @@ export class Zaak implements TZaak {
 	public selectielijstklasse: string
 	public hoofdzaak: string
 	public klant: string
+	public berichten: string[]
 
 	constructor(source: TZaak) {
 		this.id = source.id || ''
@@ -51,6 +52,7 @@ export class Zaak implements TZaak {
 		this.selectielijstklasse = source.selectielijstklasse || ''
 		this.hoofdzaak = source.hoofdzaak || ''
 		this.klant = source.klant || ''
+		this.berichten = source.berichten || []
 	}
 
 	public validate(): SafeParseReturnType<TZaak, unknown> {
@@ -78,6 +80,7 @@ export class Zaak implements TZaak {
 			selectielijstklasse: z.string(),
 			hoofdzaak: z.string(),
 			klant: z.string(),
+			berichten: z.array(z.string()),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/zaak/zaak.types.ts b/src/entities/zaak/zaak.types.ts
index 791fd4a..98e27f3 100644
--- a/src/entities/zaak/zaak.types.ts
+++ b/src/entities/zaak/zaak.types.ts
@@ -24,4 +24,5 @@ export type TZaak = {
     selectielijstklasse: string;
     hoofdzaak: string;
     klant: string;
+    berichten: string[];
 }
diff --git a/src/entities/zaakTypen/zaakTypen.mock.ts b/src/entities/zaakTypen/zaakTypen.mock.ts
index 8d19021..fc804dc 100644
--- a/src/entities/zaakTypen/zaakTypen.mock.ts
+++ b/src/entities/zaakTypen/zaakTypen.mock.ts
@@ -4,8 +4,33 @@ import { TZaakType } from './zaakTypen.types'
 export const mockZaakTypeData = (): TZaakType[] => [
 	{
 		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
-		name: 'Zaak 3',
-		summary: 'fsdfshgfhgf',
+		identificatie: 'Zaak 3',
+		omschrijving: 'fsdfshgfhgf',
+		omschrijvingGeneriek: 'fsdfshgfhgf',
+		vertrouwelijkheidaanduiding: 'fsdfshgfhgf',
+		doel: 'fsdfshgfhgf',
+		aanleiding: 'fsdfshgfhgf',
+		toelichting: 'fsdfshgfhgf',
+		indicatieInternOfExtern: 'fsdfshgfhgf',
+		handelingInitiator: 'fsdfshgfhgf',
+		onderwerp: 'fsdfshgfhgf',
+		handelingBehandelaar: 'fsdfshgfhgf',
+		doorlooptijd: 'fsdfshgfhgf',
+		servicenorm: 'fsdfshgfhgf',
+		opschortingEnAanhoudingMogelijk: 'fsdfshgfhgf',
+		verlengingMogelijk: 'fsdfshgfhgf',
+		verlengingstermijn: 'fsdfshgfhgf',
+		publicatieIndicatie: 'fsdfshgfhgf',
+		publicatietekst: 'fsdfshgfhgf',
+		productenOfDiensten: 'fsdfshgfhgf',
+		selectielijstProcestype: 'fsdfshgfhgf',
+		referentieproces: 'fsdfshgfhgf',
+		catalogus: 'fsdfshgfhgf',
+		beginGeldigheid: 'fsdfshgfhgf',
+		eindeGeldigheid: 'fsdfshgfhgf',
+		beginObject: 'fsdfshgfhgf',
+		eindeObject: 'fsdfshgfhgf',
+		versiedatum: 'fsdfshgfhgf',
 	},
 ]
 
diff --git a/src/entities/zaakTypen/zaakTypen.ts b/src/entities/zaakTypen/zaakTypen.ts
index 4bed929..bfa0b1b 100644
--- a/src/entities/zaakTypen/zaakTypen.ts
+++ b/src/entities/zaakTypen/zaakTypen.ts
@@ -4,20 +4,95 @@ import { TZaakType } from './zaakTypen.types'
 export class ZaakType implements TZaakType {
 
 	public id: string
-	public name: string
-	public summary: string
+	public identificatie: string
+	public omschrijving: string
+	public omschrijvingGeneriek: string
+	public vertrouwelijkheidaanduiding: string
+	public doel: string
+	public aanleiding: string
+	public toelichting: string
+	public indicatieInternOfExtern: string
+	public handelingInitiator: string
+	public onderwerp: string
+	public handelingBehandelaar: string
+	public doorlooptijd: string
+	public servicenorm: string
+	public opschortingEnAanhoudingMogelijk: string
+	public verlengingMogelijk: string
+	public verlengingstermijn: string
+	public publicatieIndicatie: string
+	public publicatietekst: string
+	public productenOfDiensten: string
+	public selectielijstProcestype: string
+	public referentieproces: string
+	public catalogus: string
+	public beginGeldigheid: string
+	public eindeGeldigheid: string
+	public beginObject: string
+	public eindeObject: string
+	public versiedatum: string
 
 	constructor(source: TZaakType) {
 		this.id = source.id || ''
-		this.name = source.name || ''
-		this.summary = source.summary || ''
+		this.identificatie = source.identificatie || ''
+		this.omschrijving = source.omschrijving || ''
+		this.omschrijvingGeneriek = source.omschrijvingGeneriek || ''
+		this.vertrouwelijkheidaanduiding = source.vertrouwelijkheidaanduiding || ''
+		this.doel = source.doel || ''
+		this.aanleiding = source.aanleiding || ''
+		this.toelichting = source.toelichting || ''
+		this.indicatieInternOfExtern = source.indicatieInternOfExtern || ''
+		this.handelingInitiator = source.handelingInitiator || ''
+		this.onderwerp = source.onderwerp || ''
+		this.handelingBehandelaar = source.handelingBehandelaar || ''
+		this.doorlooptijd = source.doorlooptijd || ''
+		this.servicenorm = source.servicenorm || ''
+		this.opschortingEnAanhoudingMogelijk = source.opschortingEnAanhoudingMogelijk || ''
+		this.verlengingMogelijk = source.verlengingMogelijk || ''
+		this.verlengingstermijn = source.verlengingstermijn || ''
+		this.publicatieIndicatie = source.publicatieIndicatie || ''
+		this.publicatietekst = source.publicatietekst || ''
+		this.productenOfDiensten = source.productenOfDiensten || ''
+		this.selectielijstProcestype = source.selectielijstProcestype || ''
+		this.referentieproces = source.referentieproces || ''
+		this.catalogus = source.catalogus || ''
+		this.beginGeldigheid = source.beginGeldigheid || ''
+		this.eindeGeldigheid = source.eindeGeldigheid || ''
+		this.beginObject = source.beginObject || ''
+		this.eindeObject = source.eindeObject || ''
+		this.versiedatum = source.versiedatum || ''
 	}
 
 	public validate(): SafeParseReturnType<TZaakType, unknown> {
 		const schema = z.object({
 			id: z.string().optional(),
-			name: z.string().min(1),
-			summary: z.string().min(1),
+			identificatie: z.string().min(1),
+			omschrijving: z.string().min(1),
+			omschrijvingGeneriek: z.string().min(1),
+			vertrouwelijkheidaanduiding: z.string().min(1),
+			doel: z.string().min(1),
+			aanleiding: z.string().min(1),
+			toelichting: z.string().min(1),
+			indicatieInternOfExtern: z.string().min(1),
+			handelingInitiator: z.string().min(1),
+			onderwerp: z.string().min(1),
+			handelingBehandelaar: z.string().min(1),
+			doorlooptijd: z.string().min(1),
+			servicenorm: z.string().min(1),
+			opschortingEnAanhoudingMogelijk: z.string().min(1),
+			verlengingMogelijk: z.string().min(1),
+			verlengingstermijn: z.string().min(1),
+			publicatieIndicatie: z.string().min(1),
+			publicatietekst: z.string().min(1),
+			productenOfDiensten: z.string().min(1),
+			selectielijstProcestype: z.string().min(1),
+			referentieproces: z.string().min(1),
+			catalogus: z.string().min(1),
+			beginGeldigheid: z.string().min(1),
+			eindeGeldigheid: z.string().min(1),
+			beginObject: z.string().min(1),
+			eindeObject: z.string().min(1),
+			versiedatum: z.string().min(1),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/zaakTypen/zaakTypen.types.ts b/src/entities/zaakTypen/zaakTypen.types.ts
index e793ae4..5147835 100644
--- a/src/entities/zaakTypen/zaakTypen.types.ts
+++ b/src/entities/zaakTypen/zaakTypen.types.ts
@@ -1,5 +1,30 @@
 export type TZaakType = {
     id: string;
-    name: string;
-    summary: string;
+    identificatie: string;
+    omschrijving: string;
+    omschrijvingGeneriek: string;
+    vertrouwelijkheidaanduiding: string;
+    doel: string;
+    aanleiding: string;
+    toelichting: string;
+    indicatieInternOfExtern: string;
+    handelingInitiator: string;
+    onderwerp: string;
+    handelingBehandelaar: string;
+    doorlooptijd: string;
+    servicenorm: string;
+    opschortingEnAanhoudingMogelijk: string;
+    verlengingMogelijk: string;
+    verlengingstermijn: string;
+    publicatieIndicatie: string;
+    publicatietekst: string;
+    productenOfDiensten: string;
+    selectielijstProcestype: string;
+    referentieproces: string;
+    catalogus: string;
+    beginGeldigheid: string;
+    eindeGeldigheid: string;
+    beginObject: string;
+    eindeObject: string;
+    versiedatum: string;
 }
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 7cbe23d..75895c0 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -5,20 +5,32 @@ import { navigationStore } from '../store/store.js'
 <template>
 	<!-- Placeholder -->
 	<div>
+		<!-- zaak -->
 		<ZaakForm v-if="navigationStore.modal === 'zaakForm'" />
+		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
-		<EditZaakType />
+		<AddBerichtToZaak v-if="navigationStore.modal === 'addBerichtToZaak'" />
+		<AddTaakToZaak v-if="navigationStore.modal === 'addTaakToZaak'" />
+		<AddRolToZaak v-if="navigationStore.modal === 'addRolToZaak'" />
+		<!-- contactmomenten -->
+		<ContactMomentenForm v-if="navigationStore.modal === 'contactMomentenForm'" />
+		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
+		<!-- zaaktypen -->
+		<ZaaktypeForm v-if="navigationStore.modal === 'zaaktypeForm'" />
+		<DeleteZaaktype v-if="navigationStore.modal === 'deleteZaaktype'" />
+		<!-- klanten -->
 		<EditKlant />
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
+		<!-- berichten -->
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
+		<!-- taken -->
 		<EditTaak v-if="navigationStore.modal === 'editTaak'" />
-		<WidgetTaakForm v-if="navigationStore.modal === 'widgetTaakForm'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
+		<!-- rollen -->
 		<EditRol />
-		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
+		<!-- klant register -->
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
-		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
 		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
 	</div>
 </template>
@@ -26,37 +38,46 @@ import { navigationStore } from '../store/store.js'
 <script>
 import ZaakForm from './zaken/ZaakForm.vue'
 import WidgetZaakForm from './zaken/WidgetZaakForm.vue'
-import EditZaakType from './zaakTypen/EditZaakType.vue'
+import ZaaktypeForm from './zaakTypen/ZaaktypeForm.vue'
+import DeleteZaaktype from './zaakTypen/DeleteZaaktype.vue'
 import EditKlant from './klanten/EditKlant.vue'
 import ViewKlantAuditTrail from './klanten/ViewKlantAuditTrail.vue'
 import EditBericht from './berichten/EditBericht.vue'
 import ViewBerichtAuditTrail from './berichten/ViewBerichtAuditTrail.vue'
 import EditTaak from './taken/EditTaak.vue'
 import ViewTaakAuditTrail from './taken/ViewTaakAuditTrail.vue'
-import WidgetTaakForm from './taken/WidgetTaakForm.vue'
 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'
+import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
+import AddTaakToZaak from './zaken/AddTaakToZaak.vue'
+import ContactMomentenForm from './contactMomenten/ContactMomentenForm.vue'
+import AddRolToZaak from './zaken/AddRolToZaak.vue'
+
 export default {
 	name: 'Modals',
 	components: {
 		ZaakForm,
 		WidgetZaakForm,
-		EditZaakType,
+		ZaaktypeForm,
+		DeleteZaaktype,
 		EditKlant,
 		ViewKlantAuditTrail,
 		EditBericht,
 		ViewBerichtAuditTrail,
 		EditTaak,
-		WidgetTaakForm,
 		ViewTaakAuditTrail,
 		EditRol,
 		ViewZaakAuditTrail,
 		ViewKlantRegister,
 		DeleteContactMoment,
 		EditMedewerker,
+		AddBerichtToZaak,
+		AddTaakToZaak,
+		ContactMomentenForm,
+		AddRolToZaak,
 	},
 }
 </script>
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 497d767..d296226 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -1,174 +1,451 @@
 <script setup>
-import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
+import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog
-		name="Contactmoment"
+	<NcDialog name="Contactmoment"
 		size="large"
 		label-id="contactMomentenForm"
 		dialog-classes="ContactMomentenForm"
 		:close-on-click-outside="false"
 		@closing="closeModalFromButton()">
-		<NcNoteCard v-if="success" type="success">
-			<p>Contact moment succesvol opgeslagen</p>
-		</NcNoteCard>
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div v-if="!success">
-			<div class="headerContainer">
-				<NcNoteCard type="info" class="noteCard">
-					<template #default>
-						<div v-if="klant">
-							{{ getName(klant) }}
-						</div>
-						<div v-else>
-							Geen klant geselecteerd
-						</div>
-						<div class="statusAndStartDateContainer">
-							<div v-if="status">
-								status: {{ status }}
+		<div v-if="!isView" class="tabContainer">
+			<BTabs card>
+				<BTab v-for="i in tabs"
+					:key="'dyn-tab-' + i"
+					:title="'Contactmoment ' + `${contactMomenten[i].klant ? getName(contactMomenten[i].klant) : i}`"
+					:active="selectedContactMoment === i"
+					@click="selectedContactMoment = i">
+					<NcNoteCard v-if="success" type="success">
+						<p>Contactmoment succesvol opgeslagen</p>
+					</NcNoteCard>
+					<NcNoteCard v-if="error" type="error">
+						<p>{{ error }}</p>
+					</NcNoteCard>
+
+					<div v-if="!success">
+						<div class="headerContainer">
+							<div class="personInfoContainer">
+								<NcNoteCard type="info" class="noteCard">
+									<template #default>
+										<div v-if="contactMomenten[i].klant">
+											{{ `${getSex(contactMomenten[i].klant)} ${getName(contactMomenten[i].klant)}` }}
+											<div v-if="contactMomenten[i].klant?.type === 'persoon'" class="flexContainer">
+												<div>
+													Geboortedatum: {{ getValidISOstring(contactMomenten[i].klant?.geboortedatum) ? new Date(contactMomenten[i].klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+												</div>
+												<div>
+													Geboorteplaats: {{ contactMomenten[i].klant?.plaats ?? 'N/A' }}
+												</div>
+											</div>
+											<div v-if="contactMomenten[i].klant?.type === 'organisatie'" class="flexContainer">
+												<div>
+													KVK: {{ contactMomenten[i].klant?.kvkNummer ?? 'N/A' }}
+												</div>
+												<div>
+													Locatie: {{ contactMomenten[i].klant?.postcode ?? 'N/A' }} {{ contactMomenten[i].klant?.straatnaam ?? 'N/A' }}
+												</div>
+											</div>
+										</div>
+										<div v-else>
+											Geen klant geselecteerd
+										</div>
+									</template>
+								</NcNoteCard>
 							</div>
-							<div v-if="startDate">
-								startDate: {{ new Date(startDate).toLocaleDateString() }}
+							<div v-if="!contactMomenten[i].klant" class="buttonsContainer">
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="openSearchKlantModal('persoon')">
+										<template #icon>
+											<Plus :size="20" />
+										</template>
+										Persoon zoeken
+									</NcButton>
+								</div>
+								<div class="orContainer">
+									of
+								</div>
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="openSearchKlantModal('organisatie')">
+										<template #icon>
+											<Plus :size="20" />
+										</template>
+										Organisatie zoeken
+									</NcButton>
+								</div>
+							</div>
+
+							<div v-if="contactMomenten[i].klant && !isView" class="buttonsContainer">
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="contactMomenten[i].klant = null">
+										<template #icon>
+											<Minus :size="20" />
+										</template>
+										Klant ontkoppelen
+									</NcButton>
+								</div>
+							</div>
+							<div v-if="isView" class="statusContainer">
+								<div v-if="contactMomenten[i].status">
+									Status: {{ contactMomenten[i].status }}
+								</div>
+								<div v-if="contactMomenten[i].startDate">
+									Start datum: {{ new Date(contactMomenten[i].startDate).toLocaleDateString() }}
+								</div>
 							</div>
 						</div>
-					</template>
-				</NcNoteCard>
-				<div v-if="!klant" class="buttonsContainer">
-					<div>
-						<NcButton
-							:disabled="loading"
-							type="primary"
-							@click="openSearchKlantModal('persoon')">
-							<template #icon>
-								<Plus :size="20" />
-							</template>
-							Persoon zoeken
-						</NcButton>
-					</div>
-					<div class="orContainer">
-						of
-					</div>
-					<div>
-						<NcButton
-							:disabled="loading"
-							type="primary"
-							@click="openSearchKlantModal('organisatie')">
-							<template #icon>
-								<Plus :size="20" />
-							</template>
-							Organisatie zoeken
-						</NcButton>
+
+						<div v-if="!success" class="form-group">
+							<NcTextArea :value.sync="contactMomenten[i].notitie"
+								label="Notitie"
+								:disabled="loading"
+								:loading="fetchLoading"
+								placeholder="Notitie" />
+						</div>
+						<div class="tabContainer">
+							<BTabs content-class="mt-3" justified>
+								<BTab :title="`Contactmomenten ${contactMomenten[i].klant ? (contactMomenten[i].klantContactmomenten?.length ? `(${contactMomenten[i].klantContactmomenten.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].klantContactmomenten?.length">
+										<NcListItem v-for="(klantContactmoment, key) in contactMomenten[i].klantContactmomenten"
+											:key="key"
+											:name="getName(contactMomenten[i].klant)"
+											:bold="false"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:force-display-actions="true">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+											<template #subname>
+												{{ new Date(klantContactmoment.startDate).toLocaleString() }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen contactmomenten gevonden">
+										<template #description>
+											Er zijn geen contactmomenten gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Zaken ${contactMomenten[i].klant ? (contactMomenten[i].zaken?.length ? `(${contactMomenten[i].zaken.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].zaken?.length">
+										<NcListItem v-for="(zaak, key) in contactMomenten[i].zaken"
+											:key="key"
+											:name="zaak.identificatie"
+											:bold="false"
+											:details="zaak.startdatum"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="contactMomenten[i].selectedZaak === zaak.id"
+											:force-display-actions="true"
+											@click="setSelectedZaak(i, zaak.id)">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+											<template #subname>
+												{{ zaak.omschrijving }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
+										<template #description>
+											Er zijn geen zaken gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Taken ${contactMomenten[i].klant ? (contactMomenten[i].taken?.length ? `(${contactMomenten[i].taken.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].taken?.length">
+										<NcListItem v-for="(taak, key) in contactMomenten[i].taken"
+											:key="key"
+											:name="taak.title"
+											:bold="false"
+											:details="taak.status"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="contactMomenten[i].selectedTaak === taak.id"
+											:force-display-actions="true"
+											@click="setSelectedTaak(i, taak.id)">
+											<template #icon>
+												<CalendarMonthOutline :size="44" />
+											</template>
+
+											<template #subname>
+												{{ taak.omschrijving }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
+										<template #description>
+											Er zijn geen taken gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Producten ${contactMomenten[selectedContactMoment].klant ? (contactMomenten[selectedContactMoment].klant?.producten?.length ? `(${contactMomenten[selectedContactMoment].klant?.producten?.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[selectedContactMoment].klant?.producten?.length">
+										<NcListItem v-for="(product, key) in contactMomenten[selectedContactMoment].klant.producten"
+											:key="key"
+											:name="product.naam ?? 'N/A'"
+											:bold="false"
+											:details="product.omschrijving ?? 'N/A'"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="contactMomenten[i].selectedProduct === product.id"
+											:force-display-actions="true"
+											@click="setSelectedProduct(product.id)">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
+										<template #description>
+											Er zijn geen producten gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+							</BTabs>
+						</div>
+
+						<SearchKlantModal v-if="searchKlantModalOpen"
+							:dashboard-widget="true"
+							:starting-type="startingType"
+							@selected-klant="fetchKlantData($event)"
+							@close-modal="closeSearchKlantModal" />
 					</div>
-				</div>
+					<NcButton
+						v-if="tabs.length > 1 && !success"
+						@click="closeTab(i)">
+						Close tab
+					</NcButton>
+				</BTab>
+				<template #tabs-end>
+					<BNavItem class="newTabButton"
+						role="presentation"
+						href="#"
+						@click.prevent="newTab">
+						<Plus :size="20" /> Nieuw contactmoment
+					</BNavItem>
+				</template>
+			</BTabs>
+		</div>
+		<div v-if="isView">
+			<NcNoteCard v-if="success" type="success">
+				<p>Contactmoment succesvol opgeslagen</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
 
-				<div v-if="klant && !contactMomentId" class="buttonsContainer">
-					<div>
-						<NcButton
-							:disabled="loading"
-							type="primary"
-							@click="klant = null">
-							<template #icon>
-								<Minus :size="20" />
+			<div v-if="!success">
+				<div class="headerContainer">
+					<div class="personInfoContainer">
+						<NcNoteCard type="info" class="noteCard">
+							<template #default>
+								<div v-if="klant">
+									{{ `${getSex(klant)} ${getName(klant)}` }}
+									<div v-if="klant?.type === 'persoon'" class="flexContainer">
+										<div>
+											Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+										</div>
+										<div>
+											Geboorteplaats: {{ klant?.plaats ?? 'N/A' }}
+										</div>
+									</div>
+									<div v-if="klant?.type === 'organisatie'" class="flexContainer">
+										<div>
+											KVK: {{ klant?.kvkNummer ?? 'N/A' }}
+										</div>
+										<div>
+											Locatie: {{ klant?.postcode ?? 'N/A' }} {{ klant?.straatnaam ?? 'N/A' }}
+										</div>
+									</div>
+								</div>
+								<div v-else>
+									Geen klant geselecteerd
+								</div>
 							</template>
-							Klant ontkoppelen
-						</NcButton>
+						</NcNoteCard>
 					</div>
-				</div>
-			</div>
-
-			<div v-if="!success" class="form-group">
-				<NcTextArea v-model="notitie"
-					label="Notitie"
-					:disabled="loading"
-					placeholder="Notitie" />
-			</div>
-			<div class="tabContainer">
-				<BTabs content-class="mt-3" justified>
-					<BTab :title="`Zaken ${klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
-						<div v-if="zaken.length">
-							<NcListItem v-for="(zaak, key) in zaken"
-								:key="key"
-								:name="zaak.identificatie"
-								:bold="false"
-								:details="zaak.startdatum"
+					<div v-if="!klant" class="buttonsContainer">
+						<div>
+							<NcButton
 								:disabled="loading"
-								:active="selectedZaak === zaak.id"
-								:force-display-actions="true"
-								@click="setSelectedZaak(zaak.id)">
+								:loading="fetchLoading"
+								type="primary"
+								@click="openSearchKlantModal('persoon')">
 								<template #icon>
-									<BriefcaseAccountOutline :size="44" />
+									<Plus :size="20" />
 								</template>
-								<template #subname>
-									{{ zaak.omschrijving }}
-								</template>
-							</NcListItem>
+								Persoon zoeken
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
-							<template #description>
-								Er zijn geen zaken gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-					<BTab :title="`Taken ${klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
-						<div v-if="taken.length">
-							<NcListItem v-for="(taak, key) in taken"
-								:key="key"
-								:name="taak.title"
-								:bold="false"
-								:details="taak.status"
+						<div class="orContainer">
+							of
+						</div>
+						<div>
+							<NcButton
 								:disabled="loading"
-								:active="selectedTaak === taak.id"
-								:force-display-actions="true"
-								@click="setSelectedTaak(taak.id)">
+								:loading="fetchLoading"
+								type="primary"
+								@click="openSearchKlantModal('organisatie')">
 								<template #icon>
-									<CalendarMonthOutline :size="44" />
-								</template>
-
-								<template #subname>
-									{{ taak.omschrijving }}
+									<Plus :size="20" />
 								</template>
-							</NcListItem>
+								Organisatie zoeken
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
-							<template #description>
-								Er zijn geen taken gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-					<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
-						<div v-if="klant?.producten?.length">
-							<NcListItem v-for="(product, key) in klant.producten"
-								:key="key"
-								:name="product.naam ?? 'N/A'"
-								:bold="false"
-								:details="product.omschrijving ?? 'N/A'"
+					</div>
+
+					<div v-if="klant && !isView" class="buttonsContainer">
+						<div>
+							<NcButton
 								:disabled="loading"
-								:active="selectedProduct === product.id"
-								:force-display-actions="true"
-								@click="setSelectedProduct(product.id)">
+								:loading="fetchLoading"
+								type="primary"
+								@click="klant = null">
 								<template #icon>
-									<BriefcaseAccountOutline :size="44" />
+									<Minus :size="20" />
 								</template>
-							</NcListItem>
+								Klant ontkoppelen
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
-							<template #description>
-								Er zijn geen producten gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-				</BTabs>
-			</div>
+					</div>
+					<div v-if="isView" class="statusContainer">
+						<div v-if="contactMoment.status">
+							Status: {{ contactMoment.status }}
+						</div>
+						<div v-if="contactMoment.startDate">
+							Start datum: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
+						</div>
+					</div>
+				</div>
+
+				<div v-if="!success" class="form-group">
+					<NcTextArea :value.sync="contactMoment.notitie"
+						label="Notitie"
+						:disabled="loading"
+						:loading="fetchLoading"
+						placeholder="Notitie" />
+				</div>
+				<div class="tabContainer">
+					<BTabs content-class="mt-3" justified>
+						<BTab :title="`Contactmomenten ${klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
+							<div v-if="klantContactmomenten.length">
+								<NcListItem v-for="(klantContactmoment, key) in klantContactmomenten"
+									:key="key"
+									:name="getName(klant)"
+									:bold="false"
+									:details="klantContactmoment.startDate"
+									:disabled="loading"
+									:force-display-actions="true">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ new Date(klantContactmoment.startDate).toLocaleString() }}
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen contactmomenten gevonden">
+								<template #description>
+									Er zijn geen contactmomenten gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Zaken ${klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
+							<div v-if="zaken.length">
+								<NcListItem v-for="(zaak, key) in zaken"
+									:key="key"
+									:name="zaak.identificatie"
+									:bold="false"
+									:details="zaak.startdatum"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedZaak === zaak.id"
+									:force-display-actions="true">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ zaak.omschrijving }}
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
+								<template #description>
+									Er zijn geen zaken gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Taken ${klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
+							<div v-if="taken.length">
+								<NcListItem v-for="(taak, key) in taken"
+									:key="key"
+									:name="taak.title"
+									:bold="false"
+									:details="taak.status"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedTaak === taak.id"
+									:force-display-actions="true">
+									<template #icon>
+										<CalendarMonthOutline :size="44" />
+									</template>
+
+									<template #subname>
+										{{ taak.omschrijving }}
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
+								<template #description>
+									Er zijn geen taken gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
+							<div v-if="klant?.producten?.length">
+								<NcListItem v-for="(product, key) in klant.producten"
+									:key="key"
+									:name="product.naam ?? 'N/A'"
+									:bold="false"
+									:details="product.omschrijving ?? 'N/A'"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedProduct === product.id"
+									:force-display-actions="true">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
+								<template #description>
+									Er zijn geen producten gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+					</BTabs>
+				</div>
 
-			<SearchKlantModal v-if="searchKlantModalOpen"
-				:dashboard-widget="true"
-				:starting-type="startingType"
-				@selected-klant="fetchKlantData($event)"
-				@close-modal="closeSearchKlantModal" />
+				<SearchKlantModal v-if="searchKlantModalOpen"
+					:dashboard-widget="true"
+					:starting-type="startingType"
+					@selected-klant="fetchKlantData($event)"
+					@close-modal="closeSearchKlantModal" />
+			</div>
 		</div>
 		<template #actions>
 			<NcButton
@@ -180,54 +457,81 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 				</template>
 				Annuleer
 			</NcButton>
-			<NcActions v-if="!contactMomentId"
-				:disabled="loading || success"
+			<NcActions :disabled="loading || success || fetchLoading"
 				:primary="true"
+				:force-name="true"
 				menu-name="Acties">
 				<template #icon>
 					<DotsHorizontal :size="20" />
 				</template>
-				<NcActionButton @click="openTaakForm">
+				<NcActionButton v-if="!isView" @click="openTaakForm('medewerker')">
 					<template #icon>
 						<CalendarMonthOutline :size="20" />
 					</template>
-					Taak aanmaken
+					Medewerker taak aanmaken
 				</NcActionButton>
-				<NcActionButton :disabled="true" @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton v-if="!isView" @click="openTaakForm('klant')">
+					<template #icon>
+						<CalendarMonthOutline :size="20" />
+					</template>
+					Klant taak aanmaken
+				</NcActionButton>
+				<NcActionButton v-if="!isView" :disabled="!klant?.id" @click="openZaakForm()">
 					<template #icon>
 						<BriefcaseAccountOutline :size="20" />
 					</template>
 					Zaak starten
 				</NcActionButton>
+				<NcActionButton v-if="isView" :disabled="contactMoment.status === 'gesloten'" @click="closeContactMoment(contactMoment.id)">
+					<template #icon>
+						<ProgressClose :size="20" />
+					</template>
+					Sluit Contactmoment
+				</NcActionButton>
 			</NcActions>
 			<NcButton
-				v-if="!contactMomentId"
+				v-if="!isView"
 				type="primary"
-				:disabled="!klant || loading || success"
+				:disabled="!contactMomenten[selectedContactMoment].klant || loading || success || fetchLoading"
 				:loading="loading"
-				@click="addContactMoment()">
+				@click="addContactMoment(selectedContactMoment)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
+					<ContentSaveOutline v-else :size="20" />
 				</template>
-				Opslaan
+				{{ isEdit ? 'Opslaan' : 'Aanmaken' }}
 			</NcButton>
 		</template>
-		<TakenForm v-if="taakFormOpen"
+
+		<EditTaakForm v-if="taakFormOpen"
 			:dashboard-widget="true"
+			:client-type="taakClientType"
+			:klant-id="klant?.id"
 			@close-modal="closeTaakForm"
 			@save-success="closeTaakForm" />
+
+		<ZaakForm v-if="zaakFormOpen"
+			:dashboard-widget="true"
+			:klant-id="klant?.id"
+			@close-modal="() => (zaakFormOpen = false)"
+			@save-success="zaakFormSaveSuccess" />
 	</NcDialog>
 </template>
 
 <script>
 // Components
-import { BTabs, BTab } from 'bootstrap-vue'
+import { BTabs, BTab, BNavItem } from 'bootstrap-vue'
 import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, NcListItem, NcActionButton, NcEmptyContent } from '@nextcloud/vue'
+import _ from 'lodash'
 
+import getValidISOstring from '../../services/getValidISOstring.js'
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
-import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
+import ZaakForm from '../../modals/zaken/ZaakForm.vue'
+
+// Entities
+import { ContactMoment } from '../../entities/index.js'
 
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -237,6 +541,7 @@ import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
+import ProgressClose from 'vue-material-design-icons/ProgressClose.vue'
 
 export default {
 	name: 'ContactMomentenForm',
@@ -249,6 +554,10 @@ export default {
 		NcListItem,
 		NcActionButton,
 		NcEmptyContent,
+		EditTaakForm: EditTaak,
+		BTabs,
+		BTab,
+		BNavItem,
 		// Icons
 		Plus,
 		BriefcaseAccountOutline,
@@ -264,37 +573,140 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * The ID of the klant to fetch data for
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * If true, the form is in view mode and no actions are shown
+		 */
+		isView: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			/**
+			 * determines if this modal is an edit modal or a create modal. Is unrelated to the isView property.
+			 */
+			isEdit: null,
+			fetchLoading: false, // used as the loading state when editing
 			success: false,
 			loading: false,
 			error: false,
-			titel: '',
-			notitie: '',
-			status: null,
-			startDate: null,
+			contactMoment: {
+				titel: '',
+				notitie: '',
+				status: 'open',
+				startDate: null,
+				klant: null,
+				selectedZaak: null,
+				selectedTaak: null,
+				selectedProduct: null,
+			},
 			klantenLoading: false,
 			zaken: [],
 			taken: [],
 			berichten: [],
-			contactMomenten: [],
+			klantContactmomenten: [],
+			contactMomenten: {
+				1: {
+					notitie: '',
+					status: 'open',
+					startDate: null,
+					klant: null,
+					selectedZaak: null,
+					selectedTaak: null,
+					selectedProduct: null,
+					selectedKlantContactMoment: null,
+					zaken: [],
+					taken: [],
+					berichten: [],
+					klantContactmomenten: [],
+				},
+			},
+			selectedContactMoment: 1,
 			auditTrails: [],
 			klant: null,
 			searchKlantModalOpen: false,
 			selectedZaak: null,
 			selectedTaak: null,
 			selectedProduct: null,
+			selectedKlantContactMoment: null,
 			startingType: 'all',
 			taakFormOpen: false,
+			taakClientType: 'both',
+			zaakFormOpen: false,
+
+			tabs: [1],
+			tabCounter: 1,
 		}
 	},
 	mounted() {
-		if (this.contactMomentId) {
-			this.fetchContactMomentData(this.contactMomentId)
+		const contactMomentId = this.contactMomentId ?? contactMomentStore.contactMomentItem?.id ?? null
+		this.isEdit = !!contactMomentId
+
+		if (this.isEdit) {
+			this.fetchData(contactMomentId)
+		} else if (this.klantId) {
+			// if it is not an edit modal but a klantId is provided, fetch the klant data
+			this.fetchKlantData(this.klantId)
 		}
 	},
 	methods: {
+
+		closeTab(x) {
+			for (let i = 0; i < this.tabs.length; i++) {
+				if (this.tabs[i] === x) {
+					this.tabs.splice(i, 1)
+				}
+			}
+		},
+		newTab() {
+			const index = this.tabCounter + 1
+			this.contactMomenten = {
+				...this.contactMomenten,
+				[index]: {
+					notitie: '',
+					status: 'open',
+					startDate: null,
+					klant: null,
+					selectedZaak: null,
+					selectedTaak: null,
+					selectedProduct: null,
+					selectedKlantContactMoment: null,
+				},
+			}
+			this.tabs.push(index)
+			this.tabCounter = this.tabCounter + 1
+		},
+
+		async fetchData(id) {
+			this.fetchLoading = true
+
+			const { data } = await contactMomentStore.getContactMoment(id)
+
+			this.contactMoment = {
+				...data,
+				titel: data.titel ?? '',
+				notitie: data.notitie ?? '',
+				status: data.status ?? null,
+				startDate: data.startDate ?? null,
+			}
+
+			this.selectedZaak = data.zaak
+			this.selectedTaak = data.taak
+			this.selectedProduct = data.product
+
+			await this.fetchKlantData(data.klant)
+
+			this.fetchLoading = false
+		},
+
 		// Modal functions
 		closeModalFromButton() {
 			setTimeout(() => {
@@ -303,41 +715,86 @@ export default {
 		},
 		closeModal() {
 			navigationStore.setModal(false)
-			
+
 			this.$emit('close-modal')
 		},
 
-		// Contact moment functions
-		addContactMoment() {
+		// Contactmoment functions
+		addContactMoment(i) {
+
+			this.selectedContactMoment = i
+			this.contactMoment = this.contactMomenten[i]
+
 			this.loading = true
 
+			const endpoint = this.contactMomentId ? `contactmomenten/${this.contactMomentId}` : 'contactmomenten'
+			const method = this.contactMomentId ? 'PUT' : 'POST'
+
+			const contactMomentCopy = _.cloneDeep(this.contactMoment)
+
+			delete contactMomentCopy.taken
+			delete contactMomentCopy.zaken
+			delete contactMomentCopy.berichten
+			delete contactMomentCopy.klantContactmomenten
+			delete contactMomentCopy.auditTrails
+
 			fetch(
-				'/index.php/apps/zaakafhandelapp/api/contactmomenten',
+				`/index.php/apps/zaakafhandelapp/api/${endpoint}`,
 				{
-					method: 'POST',
+					method,
 					headers: {
 						'Content-Type': 'application/json',
 					},
 					body: JSON.stringify({
-						notitie: this.notitie,
-						klant: this.klant?.id ?? '',
-						zaak: this.selectedZaak ?? '',
-						taak: this.selectedTaak ?? '',
-						product: this.selectedProduct ?? '',
-						status: this.status === 'gesloten' ? 'gesloten' : 'open',
-						startDate: new Date().toISOString(),
+						...contactMomentCopy,
+						notitie: contactMomentCopy.notitie,
+						klant: contactMomentCopy.klant?.id ?? '',
+						zaak: contactMomentCopy.selectedZaak ?? '',
+						taak: contactMomentCopy.selectedTaak ?? '',
+						product: contactMomentCopy.selectedProduct ?? '',
+						status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
+						startDate: contactMomentCopy.startDate ?? new Date().toISOString(),
 					}),
 				},
 			)
 				.then((response) => {
+					if (this.isView) {
+						response.json().then(data => {
+							this.contactMoment = data
+						})
+
+						if (this.dashboardWidget === true) {
+							this.$emit('save-success')
+						}
+
+						this.loading = false
+						return
+					}
+
 					this.succesMessage = true
 					// Get the modal to self close
 					this.success = true
 					this.loading = false
 
-					setTimeout(this.closeModal, 2000)
+					if (!this.dashboardWidget) {
+						setTimeout(() => {
+							this.closeModal()
+						}, 2000)
+					}
+
 					if (this.dashboardWidget === true) {
-						this.$emit('save-success')
+						setTimeout(() => {
+							this.closeTab(this.selectedContactMoment)
+							this.selectedContactMoment = 1
+							this.success = false
+							this.succesMessage = false
+						}, 2000)
+						if (this.tabs.length === 1) {
+							this.$emit('save-success')
+							setTimeout(() => {
+								this.closeModal()
+							}, 2000)
+						}
 					}
 				})
 				.catch((err) => {
@@ -356,8 +813,9 @@ export default {
 			this.searchKlantModalOpen = false
 		},
 
-		openTaakForm() {
+		openTaakForm(clientType = 'both') {
 			this.taakFormOpen = true
+			this.taakClientType = clientType
 			taakStore.setTaakItem(null)
 		},
 
@@ -365,77 +823,112 @@ export default {
 			this.taakFormOpen = false
 		},
 
-		fetchContactMomentData(id) {
-			fetch(`/index.php/apps/zaakafhandelapp/api/contactmomenten/${id}`)
-				.then(response => response.json())
-				.then(data => {
-					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
-				})
+		// zaak functions
+		openZaakForm() {
+			zaakStore.setZaakItem(null)
+			this.zaakFormOpen = true
 		},
 
-		fetchKlantData(id) {
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
-				.then(response => response.json())
-				.then(data => {
-					this.klant = data
-				})
-				.catch(error => {
-					console.error('Error fetching klant:', error)
-					throw error // if this one fails, fetching the rest is pointless
-				})
+		zaakFormSaveSuccess() {
+			this.zaakFormOpen = false
+			this.fetchKlantData(this.klant.id)
+		},
 
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.zaken = data.results
-					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant zaken:', error)
-				})
+		async closeContactMoment(id) {
+			const { data } = await contactMomentStore.getContactMoment(id)
 
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.taken = data.results
-					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant taken:', error)
-				})
+			if (data?.status === 'gesloten') {
+				console.info('Contactmoment is already closed')
+				return
+			}
+			const newContactMoment = new ContactMoment({
+				...data,
+				status: 'gesloten',
+			})
 
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.berichten = data.results
+			contactMomentStore.saveContactMoment(newContactMoment)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.closeModal()
+						this.$emit('save-success')
 					}
 				})
-				.catch(error => {
-					console.error('Error fetching klant berichten:', error)
-				})
+		},
 
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data)) {
-						this.auditTrails = data
+		async fetchKlantData(id) {
+			try {
+				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				// ifselectedContactMoment
+				if (this.isView) {
+					this.klant = await klantResponse.json()
+				} else {
+					this.contactMomenten[this.selectedContactMoment].klant = await klantResponse.json()
+				}
+
+				// fetch all data in parallel
+				const [zakenRes, takenRes, berichtenRes, auditTrailRes, contactMomentenRes] = await Promise.all([
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/contactmomenten`),
+				])
+
+				// parse all data
+				const [zakenData, takenData, berichtenData, auditTrailData, contactMomentenData] = await Promise.all([
+					zakenRes.json(),
+					takenRes.json(),
+					berichtenRes.json(),
+					auditTrailRes.json(),
+					contactMomentenRes.json(),
+				])
+
+				// set data
+				if (Array.isArray(zakenData.results)) {
+					if (this.isView) {
+						this.zaken = zakenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].zaken = zakenData.results
 					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant audit trail:', error)
-				})
+				}
+				if (Array.isArray(takenData.results)) {
+					if (this.isView) {
+						this.taken = takenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].taken = takenData.results
+					}
+				}
+				if (Array.isArray(berichtenData.results)) {
+					if (this.isView) {
+						this.berichten = berichtenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].berichten = berichtenData.results
+					}
+				}
+				if (Array.isArray(auditTrailData)) {
+					if (this.isView) {
+						this.auditTrails = auditTrailData
+					} else {
+						this.contactMomenten[this.selectedContactMoment].auditTrails = auditTrailData
+					}
+				}
+				if (Array.isArray(contactMomentenData.results)) {
+					if (this.isView) {
+						this.klantContactmomenten = contactMomentenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].klantContactmomenten = contactMomentenData.results
+					}
+				}
+
+			} catch (error) {
+				console.error('Error in fetchKlantData:', error)
+				throw error
+			}
 		},
 
 		getName(klant) {
+			if (!klant) return
+
 			if (klant.type === 'persoon') {
 				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
 			}
@@ -444,24 +937,30 @@ export default {
 			}
 			return 'onbekend'
 		},
+		getSex(klant) {
+			if (klant.type === 'persoon') {
+				return `(${klant?.geslacht})`
+			}
+			return ''
+		},
 
 		// Tabs
-		setSelectedZaak(zaak) {
-			if (this.selectedZaak === zaak) {
-				this.selectedZaak = null
-			} else { this.selectedZaak = zaak }
+		setSelectedZaak(id, zaak) {
+			if (this.contactMomenten[id].selectedZaak === zaak) {
+				this.contactMomenten[id].selectedZaak = null
+			} else { this.contactMomenten[id].selectedZaak = zaak }
 		},
 
-		setSelectedTaak(taak) {
-			if (this.selectedTaak === taak) {
-				this.selectedTaak = null
-			} else { this.selectedTaak = taak }
+		setSelectedTaak(id, taak) {
+			if (this.contactMomenten[id].selectedTaak === taak) {
+				this.contactMomenten[id].selectedTaak = null
+			} else { this.contactMomenten[id].selectedTaak = taak }
 		},
 
-		setSelectedProduct(product) {
-			if (this.selectedProduct === product) {
-				this.selectedProduct = null
-			} else { this.selectedProduct = product }
+		setSelectedProduct(id, product) {
+			if (this.contactMomenten[id].selectedProduct === product) {
+				this.contactMomenten[id].selectedProduct = null
+			} else { this.contactMomenten[id].selectedProduct = product }
 		},
 	},
 }
@@ -510,14 +1009,24 @@ div[class='modal-container']:has(.ContactMomentenForm) {
     margin-block-end: var(--zaa-margin-20);
 }
 
+.newTabButton > a {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 .modalButtonsContainer {
     display: flex;
     justify-content: flex-end;
     gap: var(--zaa-margin-10);
 }
 
-.statusAndStartDateContainer {
+.flexContainer, .statusContainer {
 	display: flex;
 	gap: var(--zaa-margin-10);
 }
+
+.statusContainer {
+	align-items: center;
+}
 </style>
diff --git a/src/modals/klantRegister/ViewKlantRegister.vue b/src/modals/klantRegister/ViewKlantRegister.vue
index ea65707..074da71 100644
--- a/src/modals/klantRegister/ViewKlantRegister.vue
+++ b/src/modals/klantRegister/ViewKlantRegister.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/store.js'
+import { taakStore, navigationStore, zaakStore, klantStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -133,15 +133,17 @@ import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/s
 					</NcEmptyContent>
 				</BTab>
 				<BTab title="Contact Momenten">
-					<div v-if="contactMomenten?.length">
-						<NcListItem v-for="(contactMoment, key) in contactMomenten"
+					<div v-if="filteredContactMomenten?.length">
+						<NcListItem v-for="(contactMoment, key) in filteredContactMomenten"
 							:key="key"
-							:name="contactMoment.title"
+							:name="getName(klant)"
 							:bold="false"
-							:details="contactMoment.description"
 							:force-display-actions="true">
 							<template #icon>
-								<AccountOutline :size="44" />
+								<CardAccountPhoneOutline :size="44" />
+							</template>
+							<template #subname>
+								{{ new Date(contactMoment.startDate).toLocaleString() }}
 							</template>
 						</NcListItem>
 					</div>
@@ -194,7 +196,7 @@ import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/s
 			:selected-klant-from-widget="klant"
 			@save-success="fetchZaakItems" />
 
-		<WidgetTaakForm v-if="taakModalOpen"
+		<EditTaakForm v-if="taakModalOpen"
 			:dashboard-widget="true"
 			:selected-klant-from-widget="klant"
 			@save-success="fetchTaakItems" />
@@ -217,10 +219,10 @@ import Cancel from 'vue-material-design-icons/Cancel.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
 import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
-import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import CardAccountPhoneOutline from 'vue-material-design-icons/CardAccountPhoneOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import WidgetTaakForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 import WidgetZaakForm from '../../modals/zaken/WidgetZaakForm.vue'
 
 export default {
@@ -237,10 +239,9 @@ export default {
 		BriefcaseAccountOutline,
 		CalendarMonthOutline,
 		ChatOutline,
-		AccountOutline,
 		Eye,
 		DotsHorizontal,
-		WidgetTaakForm,
+		EditTaakForm: EditTaak,
 		WidgetZaakForm,
 	},
 	props: {
@@ -268,7 +269,14 @@ export default {
 			currentActiveKlant: {},
 		}
 	},
+	computed: {
+		filteredContactMomenten() {
+			return contactMomentStore.contactMomentenList.filter(contactMoment => contactMoment.klant === this.klant?.id)
+		},
+	},
 	mounted() {
+		contactMomentStore.refreshContactMomentenList()
+
 		if (klantStore.widgetKlantId) {
 			this.currentActiveKlant = klantStore.widgetKlantId
 			this.fetchKlantData(klantStore.widgetKlantId)
@@ -342,6 +350,16 @@ export default {
 				})
 		},
 
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+
 		closeModalFromButton() {
 			setTimeout(() => {
 				this.closeModal()
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
index f0721b9..e18b0c7 100644
--- a/src/modals/klanten/SearchKlantModal.vue
+++ b/src/modals/klanten/SearchKlantModal.vue
@@ -62,30 +62,43 @@ import { klantStore } from '../../store/store.js'
 		</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 class="searchInputContainer">
+				<p>{{ searchLabel }}</p>
+				<div v-if="klantenSearchType === 'geboortedatum_achternaam'" class="flex">
+					<NcDateTimePicker v-model="searchQuery[0]"
+						:disabled="loading"
+						class="date-picker" />
+
+					<NcTextField :disabled="loading"
+						label="achternaam"
+						maxlength="255"
+						class="searchField"
+						:value.sync="searchQuery[1]" />
+				</div>
+				<div v-else-if="klantenSearchType === 'postcode_huisnummer'" class="flex">
+					<NcTextField :disabled="loading"
+						maxlength="255"
+						class="searchField"
+						:value.sync="searchQuery[0]" />
+
+					<NcTextField :disabled="loading"
+						maxlength="255"
+						class="searchField"
+						:value.sync="searchQuery[1]" />
+				</div>
+				<div v-else>
+					<NcTextField :disabled="loading"
+						maxlength="255"
+						class="searchField"
+						:value.sync="searchQuery[0]" />
+				</div>
 			</div>
 
 			<NcButton type="primary"
 				:disabled="loading
-					|| !searchQuery
-					// If the search type is geboortedatum_achternaam, the geboortedatum is required
-					|| (klantenSearchType === 'geboortedatum_achternaam' && !searchQuery_geboortedatum)"
+					|| !searchQuery[0]
+					|| klantenSearchType === 'geboortedatum_achternaam' && !searchQuery[1]
+					|| klantenSearchType === 'postcode_huisnummer' && !searchQuery[1]"
 				class="searchButton"
 				@click="search">
 				<template #icon>
@@ -193,8 +206,7 @@ export default {
 			error: false,
 			hasUpdated: false,
 			klanten: [],
-			searchQuery: '',
-			searchQuery_geboortedatum: null,
+			searchQuery: ['', ''], // an array of 2 items to act as the search query
 			selectedKlant: null,
 			klantenSearchType: 'emailadres',
 		}
@@ -227,6 +239,15 @@ export default {
 			return label
 		},
 	},
+	watch: {
+		klantenSearchType(newVal) {
+			if (newVal === 'geboortedatum_achternaam') {
+				this.searchQuery = [new Date(), '']
+			} else {
+				this.searchQuery = ['', '']
+			}
+		},
+	},
 	methods: {
 		closeModalFromButton() {
 			setTimeout(() => {
@@ -249,23 +270,19 @@ export default {
 
 			this.selectedKlant = null
 
-			let queryParams = { [this.klantenSearchType]: this.searchQuery }
-			const newQuery = this.searchQuery.trim()
-			const splitQuery = newQuery.split(/ +/g)
+			let queryParams = { [this.klantenSearchType]: this.searchQuery[0] }
+			const refinedQuery = this.searchQuery.map(item => typeof item === 'string' ? item.trim() : item)
 
 			switch (this.klantenSearchType) {
 			case 'postcode_huisnummer':
-				queryParams = { postcode: splitQuery[0], huisnummer: splitQuery[1] }
+				queryParams = { postcode: refinedQuery[0], huisnummer: refinedQuery[1] }
 				break
 			case 'geboortedatum_achternaam':
 				queryParams = {
-					geboortedatum: this.searchQuery_geboortedatum && this.searchQuery_geboortedatum.toISOString() ? this.searchQuery_geboortedatum.toISOString() : '',
-					achternaam: newQuery,
+					geboortedatum: refinedQuery[0].toISOString() ? refinedQuery[0].toISOString() : '',
+					achternaam: refinedQuery[1],
 				}
 				break
-			case 'kvkNummer':
-				queryParams = { kvkNummer: newQuery }
-				break
 			default:
 				break
 			}
@@ -352,14 +369,18 @@ export default {
 
 .searchContainer {
 	display: flex;
-	align-items: center;
+	align-items: end;
 	gap: 10px;
 }
+.searchInputContainer :deep(.input-field) {
+	margin-block-end: 3px;
+}
 .searchField {
 	width: auto;
 }
 .searchButton {
 	margin-block-start: 3px;
+	margin-block-end: 3px;
 	min-width: min-content !important;
 }
 
diff --git a/src/modals/medewerkers/EditMedewerker.vue b/src/modals/medewerkers/EditMedewerker.vue
index 130d194..563f726 100644
--- a/src/modals/medewerkers/EditMedewerker.vue
+++ b/src/modals/medewerkers/EditMedewerker.vue
@@ -3,8 +3,7 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editMedewerker'"
-		name="Medewerker"
+	<NcDialog name="Medewerker"
 		size="normal"
 		:can-close="false">
 		<NcNoteCard v-if="success" type="success">
@@ -33,7 +32,14 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 			<NcTextField :disabled="loading"
 				label="Email adres"
 				maxlength="255"
-				:value.sync="medewerkerItem.emailadres" />
+				:value.sync="medewerkerItem.email" />
+
+			<NcTextField :disabled="loading"
+				label="Telefoonnummer"
+				minlength="10"
+				maxlength="11"
+				placeholder="06 12345678"
+				:value.sync="medewerkerItem.telefoonnummer" />
 		</div>
 
 		<template #actions>
@@ -99,7 +105,6 @@ export default {
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
 			countryOptions: {
 				options: countries.map((country) => ({
 					id: country.code,
@@ -111,42 +116,25 @@ export default {
 				tussenvoegsel: '',
 				achternaam: '',
 				email: '',
+				telefoonnummer: '',
 			},
 		}
 	},
-	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 || '',
-				}
+	mounted() {
+		if (medewerkerStore.medewerkerItem?.id) {
+			this.medewerkerItem = {
+				...medewerkerStore.medewerkerItem,
+				voornaam: medewerkerStore.medewerkerItem.voornaam || '',
+				tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
+				achternaam: medewerkerStore.medewerkerItem.achternaam || '',
+				email: medewerkerStore.medewerkerItem.email || '',
+				telefoonnummer: medewerkerStore.medewerkerItem.telefoonnummer || '',
 			}
-			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
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 4ea62c1..96858b0 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.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>
@@ -47,12 +47,31 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				:value.sync="taakItem.toelichting"
 				label="Toelichting" />
 
-			<NcSelect
-				v-bind="klanten"
-				v-model="klanten.value"
-				input-label="Klant"
-				:loading="klantenLoading"
-				:disabled="loading" />
+			<div>
+				<NcCheckboxRadioSwitch v-if="clientType === 'both'"
+					:checked.sync="useMedewerkerInsteadOfKlant"
+					type="switch">
+					Klant / Medewerker
+				</NcCheckboxRadioSwitch>
+
+				<div>
+					<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" />
+
+					<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" />
+				</div>
+			</div>
 		</div>
 
 		<template #actions>
@@ -69,7 +88,14 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading || klantenLoading || !taakItem.title || !taakItem.deadline"
+				:disabled="loading
+					|| medewerkersLoading
+					|| !taakItem.title
+					|| !taakItem.deadline
+					|| (clientType === 'both' && !useMedewerkerInsteadOfKlant && !klanten.value?.id)
+					|| (clientType === 'both' && useMedewerkerInsteadOfKlant && !medewerkers.value?.id)
+					|| (clientType === 'klant' && !klanten.value?.id)
+					|| (clientType === 'medewerker' && !medewerkers.value?.id)"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -91,6 +117,7 @@ import {
 	NcTextArea,
 	NcDateTimePicker,
 	NcSelect,
+	NcCheckboxRadioSwitch,
 	NcLoadingIcon,
 	NcNoteCard,
 } from '@nextcloud/vue'
@@ -99,6 +126,20 @@ 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'
 
+/**
+ * EditTaak component
+ *
+ * This component allows users to create and edit a taak (task).
+ * It fetches data from the API and pre-selects the associated medewerker (employee) if one exists.
+ * The component provides options to change the client type, pre-select a klant (client), and disable the klant dropdown.
+ *
+ * Props:
+ * - `dashboardWidget` (Boolean, optional): Whether the modal is being used within a dashboard widget. If true, the modal will emit a 'save-success' event upon successful taak saving.
+ * - `taakId` (String, optional): ID of the taak (task) to load and edit. When provided, this prop takes precedence over any ID present in `taakStore.taakItem`. The component will fetch the taak data associated with this ID from the API, load the fetched data into the form, and pre-select the associated medewerker (employee) if one exists.
+ * - `clientType` (String, required): Determines which client type to use for the taak. Depending on the value, it'll show either the klant dropdown, medewerker dropdown, or both as default.
+ * - `klantId` (String, optional): ID of the klant (client) to pre-select in the klanten dropdown. When provided, this prop will attempt to find and select the klant with the given ID in the klanten dropdown. If the klant ID does not exist in the dropdown options, no klant will be pre-selected.
+ * - `medewerkerId` (String, optional): ID of the medewerker (employee) to pre-select in the medewerkers dropdown. When provided, this prop will attempt to find and select the medewerker with the given ID in the medewerkers dropdown. If the medewerker ID does not exist in the dropdown options, no medewerker will be pre-selected.
+ */
 export default {
 	name: 'EditTaak',
 	components: {
@@ -108,6 +149,7 @@ export default {
 		NcDateTimePicker,
 		NcButton,
 		NcSelect,
+		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcNoteCard,
 		// Icons
@@ -117,19 +159,96 @@ export default {
 		Help,
 	},
 	props: {
+		/**
+		 * Whether the modal is being used within a dashboard widget.
+		 *
+		 * If true, the modal will emit a 'save-success' event upon successful taak saving.
+		 */
 		dashboardWidget: {
 			type: Boolean,
 			required: false,
 		},
+		/**
+		 * ID of the taak (task) to load and edit.
+		 *
+		 * When provided, this prop takes precedence over any ID present in `taakStore.taakItem`.
+		 * The component will:
+		 * 1. Fetch the taak data associated with this ID from the API
+		 * 2. Load the fetched data into the form, overwriting any existing taak data in the modal
+		 * 3. Pre-select the associated medewerker (employee) if one exists
+		 *
+		 * @example
+		 * <EditTaak taakId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 * <EditTaak :taakId="taakStore.taakItem?.id" />
+		 */
+		taakId: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Determines which client type to use for the taak.
+		 *
+		 * Depending on the value, it'll show either the klant dropdown, medewerker dropdown, or both as default.
+		 *
+		 * Possible values:
+		 * - 'klant': Only the klant (client) dropdown will be shown.
+		 * - 'medewerker': Only the medewerker (employee) dropdown will be shown.
+		 * - 'both': Both the klant and medewerker dropdowns will be shown.
+		 *
+		 * @default 'both'
+		 */
+		clientType: {
+			type: String,
+			/** @type { 'both' } */
+			default: 'both',
+			/**
+			 * @param { 'klant' | 'medewerker' | 'both' } value - The value to validate.
+			 * @return {boolean} Returns true if the value is valid, false otherwise.
+			 */
+			validator: (value) => ['klant', 'medewerker', 'both'].includes(value),
+		},
+		/**
+		 * ID of the klant (client) to pre-select in the klanten dropdown.
+		 *
+		 * When provided, this prop will:
+		 * 1. Attempt to find and select the klant with the given ID in the klanten dropdown.
+		 * 2. If the klant ID does not exist in the dropdown options, no klant will be pre-selected.
+		 *
+		 * @example
+		 * <EditTaak klantId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * ID of the medewerker (employee) to pre-select in the medewerkers dropdown.
+		 *
+		 * When provided, this prop will:
+		 * 1. Attempt to find and select the medewerker with the given ID in the medewerkers dropdown.
+		 * 2. If the medewerker ID does not exist in the dropdown options, no medewerker will be pre-selected.
+		 *
+		 * @example
+		 * <EditTaak medewerkerId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 */
+		medewerkerId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
+			// state
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
-			klantenLoading: false,
+			useMedewerkerInsteadOfKlant: false,
+			// data
 			klanten: [],
+			klantenLoading: false,
+			medewerkers: [],
+			medewerkersLoading: false,
+			// item
 			taakItem: {
 				title: '',
 				type: '',
@@ -138,31 +257,42 @@ export default {
 				onderwerp: '',
 				toelichting: '',
 			},
+			executorOptions: {
+				options: [
+					{
+						id: 'klant',
+						label: 'Klant',
+					},
+					{
+						id: 'medewerker',
+						label: 'Medewerker',
+					},
+				],
+				value: {
+					id: 'klant',
+					label: 'Klant',
+				},
+			},
+			statusOptions: {
+				options: [
+					{
+						id: 'status1',
+						label: 'Status 1',
+					},
+					{
+						id: 'status2',
+						label: 'Status 2',
+					},
+					{
+						id: 'status3',
+						label: 'Status 3',
+					},
+				],
+			},
 		}
 	},
 	mounted() {
-		this.fetchKlanten()
-	},
-	updated() {
-		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
-			if (taakStore.taakItem?.id) {
-				this.taakItem = {
-					...taakStore.taakItem,
-					title: taakStore.taakItem.title || '',
-					type: taakStore.taakItem.type || '',
-					status: taakStore.taakItem.status || '',
-					deadline: new Date(taakStore.taakItem.deadline),
-					onderwerp: taakStore.taakItem.onderwerp || '',
-					toelichting: taakStore.taakItem.toelichting || '',
-					klant: klantStore.klantItem?.id || '',
-				}
-				this.fetchKlanten()
-			} else {
-				this.taakItem.klant = klantStore.klantItem?.id || ''
-				this.fetchKlanten()
-			}
-			this.hasUpdated = true
-		}
+		this.fetchData()
 	},
 	methods: {
 		closeModalFromButton() {
@@ -171,68 +301,157 @@ export default {
 			}, 300)
 		},
 		closeModal() {
-			navigationStore.setModal(false)
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.taakItem = {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-				klant: '',
+			navigationStore.setModal(null)
+
+			if (this.dashboardWidget === true) {
+				this.$emit('close-modal')
+			}
+		},
+		async fetchData() {
+			let taakEntity
+
+			// if taakId is provided, fetch the taak data from the API
+			if (this.taakId) {
+				const { entity } = await taakStore.getTaak(this.taakId)
+				taakEntity = entity
+			} else if (taakStore.taakItem?.id) {
+				taakEntity = taakStore.taakItem
+			}
+
+			if (taakEntity) {
+				this.taakItem = {
+					...this.taakItem,
+					...taakEntity,
+					title: taakEntity.title || '',
+					type: taakEntity.type || '',
+					status: taakEntity.status || 'open',
+					deadline: new Date(taakEntity.deadline),
+					onderwerp: taakEntity.onderwerp || '',
+					toelichting: taakEntity.toelichting || '',
+					klant: taakEntity?.klant || '',
+					medewerker: taakEntity?.medewerker || '',
+				}
+
+				if (this.clientType === 'both') {
+					this.useMedewerkerInsteadOfKlant = !!taakEntity?.medewerker
+				}
 			}
+
+			if (this.clientType !== 'medewerker') this.fetchKlanten(taakEntity?.klant) // will either pass a id or undefined
+			if (this.clientType !== 'klant') this.fetchMedewerkers(taakEntity?.medewerker)
 		},
-		fetchKlanten() {
+		/**
+		 * @param {string} klantId - Optional ID of the klant to select. Will take precedence over the ID present in `taakStore.taakItem`.
+		 *                           If none are provided the default selected klant will be `null`.
+		 */
+		fetchKlanten(klantId = null) {
 			this.klantenLoading = true
 
 			klantStore.refreshKlantenList()
-				.then(({ response, data }) => {
-					const selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
+				.then(({ data }) => {
+
+					const taakKlantId = taakStore.taakItem?.klant
+					const searchId = (this.klantId ?? klantId ?? taakKlantId)?.toString()
+
+					const selectedKlant = data.find((klant) => klant?.id.toString() === searchId) || null
 
 					this.klanten = {
 						options: data.map((klant) => ({
 							id: klant.id,
-							label: klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : klant.bedrijfsnaam,
+							displayName: `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}`,
+							subName: klant.email,
+							icon: klant.icon ?? '',
+
 						})),
 						value: selectedKlant
 							? {
 								id: selectedKlant?.id,
-								label: selectedKlant?.type === 'persoon' ? `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}` : selectedKlant.bedrijfsnaam,
+								displayName: `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}`,
+								subName: selectedKlant.email,
+								icon: selectedKlant.icon ?? '',
 							}
 							: null,
 					}
-
-					this.klantenLoading = false
 				})
 				.catch((err) => {
 					console.error(err)
+				})
+				.finally(() => {
 					this.klantenLoading = false
 				})
 		},
+		/**
+		 * @param {string} medewerkerId - Optional ID of the medewerker to select. Will take precedence over the ID present in `taakStore.taakItem`.
+		 *                                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
+
+					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
-			try {
-				await taakStore.saveTaak({
-					...this.taakItem,
-					klant: this.klanten.value?.id ?? '',
-					status: this.status === 'gesloten' ? 'gesloten' : 'open',
-					deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
-				}, this.dashboardWidget)
-				this.success = true
-				this.loading = false
-				setTimeout(this.closeModal, 2000)
-				if (this.dashboardWidget === true) {
-					this.$emit('save-success')
-				}
-			} catch (error) {
-				this.loading = false
-				this.success = false
-				this.error = error.message || 'An error occurred while saving the taak'
+
+			let klantId
+			if (this.clientType !== 'medewerker' && (this.clientType !== 'both' || !this.useMedewerkerInsteadOfKlant)) {
+				klantId = this.klanten.value?.id
 			}
+
+			let medewerkerId
+			if (this.clientType !== 'klant' && (this.clientType !== 'both' || this.useMedewerkerInsteadOfKlant)) {
+				medewerkerId = this.medewerkers.value?.id
+			}
+
+			taakStore.saveTaak({
+				...this.taakItem,
+				klant: klantId || null,
+				medewerker: medewerkerId || null,
+				status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
+				deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
+			})
+				.then(({ response }) => {
+					this.success = response.ok
+					setTimeout(this.closeModal, 2000)
+
+					if (this.dashboardWidget === true && response.ok) {
+						this.$emit('save-success')
+					}
+				})
+				.catch((err) => {
+					this.error = err.message || 'An error occurred while saving the taak'
+				})
+				.finally(() => {
+					this.loading = false
+				})
 		},
 		openLink(url, target) {
 			window.open(url, target)
diff --git a/src/modals/taken/WidgetTaakForm.vue b/src/modals/taken/WidgetTaakForm.vue
deleted file mode 100644
index 1a5ada3..0000000
--- a/src/modals/taken/WidgetTaakForm.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<script setup>
-import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcDialog
-		name="Taak"
-		size="normal"
-		@closing="closeModalFromButton()">
-		<NcNoteCard v-if="success" type="success">
-			<p>Taak succesvol aangepast</p>
-		</NcNoteCard>
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div v-if="!success" class="form-group">
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.title"
-				required
-				label="Titel"
-				maxlength="255" />
-
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.type"
-				label="Type"
-				maxlength="255" />
-
-			<!-- <NcSelect
-				v-bind="statusOptions"
-				v-model="taakItem.status"
-				:disabled="loading"
-				input-label="Status"
-				required /> -->
-
-			<div>
-				<p>Deadline</p>
-				<NcDateTimePicker
-					v-model="taakItem.deadline"
-					:disabled="loading"
-					required />
-			</div>
-
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.onderwerp"
-				label="Onderwerp"
-				maxlength="255" />
-
-			<NcTextArea
-				:disabled="loading"
-				:value.sync="taakItem.toelichting"
-				label="Toelichting" />
-
-			<!-- <NcSelect
-				v-bind="klanten"
-				v-model="klanten.value"
-				input-label="Klant"
-				:loading="klantenLoading"
-				:disabled="loading" /> -->
-
-			<!-- <<NcSelect
-				v-bind="executorOptions"
-				v-model="executorOptions.value"
-				input-label="Klant of Medewerker"
-				:loading="klantenLoading"
-				:disabled="loading" />
-			<div v-if="executorOptions.value.id === 'klant'">
-				<NcSelect
-					v-bind="klanten"
-					v-model="klanten.value"
-					input-label="Klant"
-					:loading="klantenLoading"
-					:disabled="loading" />
-			</div> -->
-			<div>
-				<NcSelect
-					v-bind="medewerkers"
-					v-model="medewerkers.value"
-					:user-select="true"
-					input-label="Medewerker"
-					:loading="medewerkersLoading"
-					:disabled="loading" />
-			</div>
-		</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 || klantenLoading || !taakItem.title || !taakItem.deadline"
-				type="primary"
-				@click="editTaak()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading && taakStore.taakItem?.id" :size="20" />
-					<Plus v-if="!loading && !taakStore.taakItem?.id" :size="20" />
-				</template>
-				{{ taakStore.taakItem?.id ? 'Opslaan' : 'Aanmaken' }}
-			</NcButton>
-		</template>
-	</NcDialog>
-</template>
-
-<script>
-import {
-	NcButton,
-	NcDialog,
-	NcTextField,
-	NcTextArea,
-	NcDateTimePicker,
-	NcSelect,
-	NcLoadingIcon,
-	NcNoteCard,
-} from '@nextcloud/vue'
-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: 'WidgetTaakForm',
-	components: {
-		NcDialog,
-		NcTextField,
-		NcTextArea,
-		NcDateTimePicker,
-		NcButton,
-		NcSelect,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		ContentSaveOutline,
-		Cancel,
-		Plus,
-		Help,
-	},
-	props: {
-		dashboardWidget: {
-			type: Boolean,
-			required: false,
-		},
-		selectedKlantFromWidget: {
-			type: Object,
-			default: null,
-			required: false,
-		},
-		taakId: {
-			type: String,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			success: false,
-			loading: false,
-			error: false,
-			hasUpdated: false,
-			klantenLoading: false,
-			klanten: [],
-			medewerkersLoading: false,
-			medewerkers: [],
-			taakItem: {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-			},
-			executorOptions: {
-				options: [
-					{
-						id: 'klant',
-						label: 'Klant',
-					},
-					{
-						id: 'medewerker',
-						label: 'Medewerker',
-					},
-				],
-				value: {
-					id: 'klant',
-					label: 'Klant',
-				},
-			},
-			statusOptions: {
-				options: [
-					{
-						id: 'status1',
-						label: 'Status 1',
-					},
-					{
-						id: 'status2',
-						label: 'Status 2',
-					},
-					{
-						id: 'status3',
-						label: 'Status 3',
-					},
-				],
-			},
-		}
-	},
-	mounted() {
-		this.fetchKlanten()
-		this.fetchMedewerkers()
-		if (this.taakId) {
-			this.fetchTaakData(this.taakId)
-		}
-	},
-	updated() {
-		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
-			if (taakStore.taakItem?.id) {
-				this.taakItem = {
-					...taakStore.taakItem,
-					title: taakStore.taakItem.title || '',
-					type: taakStore.taakItem.type || '',
-					status: 'open',
-					deadline: new Date(taakStore.taakItem.deadline),
-					onderwerp: taakStore.taakItem.onderwerp || '',
-					toelichting: taakStore.taakItem.toelichting || '',
-					klant: klantStore.klantItem?.id || '',
-				}
-				this.fetchKlanten()
-			} else {
-				this.taakItem.klant = klantStore.klantItem?.id || ''
-				this.fetchKlanten()
-			}
-			this.hasUpdated = true
-		}
-	},
-	methods: {
-		closeModalFromButton() {
-			setTimeout(() => {
-				this.closeModal()
-			}, 300)
-		},
-		closeModal() {
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.taakItem = {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-				klant: '',
-			}
-			if (this.dashboardWidget === true) {
-				this.$emit('save-success')
-			} else {
-				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,
-						deadline: new Date(data.deadline),
-					}
-
-					this.fetchMedewerkers()
-				})
-		},
-		fetchKlanten() {
-			this.klantenLoading = true
-
-			klantStore.refreshKlantenList()
-				.then(({ response, data }) => {
-
-					let selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
-
-					if (this.selectedKlantFromWidget) {
-						selectedKlant = data.filter((klant) => klant?.id.toString() === this.selectedKlantFromWidget.id?.toString())[0] || null
-					}
-
-					this.klanten = {
-						options: data.map((klant) => ({
-							id: klant.id,
-							label: klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : klant.bedrijfsnaam,
-						})),
-						value: selectedKlant
-							? {
-								id: selectedKlant?.id,
-								label: selectedKlant?.type === 'persoon' ? `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}` : selectedKlant.bedrijfsnaam,
-							}
-							: null,
-					}
-
-					this.klantenLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.klantenLoading = false
-				})
-		},
-		fetchMedewerkers() {
-			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)
-					this.medewerkersLoading = false
-				})
-		},
-		async editTaak() {
-			this.loading = true
-
-			try {
-				await taakStore.saveTaak({
-					...this.taakItem,
-					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
-				setTimeout(this.closeModal, 2000)
-				if (this.dashboardWidget === true) {
-					this.$emit('save-success')
-				}
-			} catch (error) {
-				this.loading = false
-				this.success = false
-				this.error = error.message || 'An error occurred while saving the taak'
-			}
-		},
-		openLink(url, target) {
-			window.open(url, target)
-		},
-	},
-}
-</script>
diff --git a/src/modals/zaakTypen/AddZaakType.vue b/src/modals/zaakTypen/AddZaakType.vue
deleted file mode 100644
index 951edc8..0000000
--- a/src/modals/zaakTypen/AddZaakType.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<script setup>
-import { zaakTypeStore, navigationStore } from '../../store.js'
-</script>
-
-<template>
-	<NcModal v-if="navigationStore.modal === 'addZaakType'" ref="modalRef" @close="store.setModal(false)">
-		<div class="modalContent">
-			<h2>Zaaktype toevoegen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Zaaktype succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.identificatie"
-					label="Identificatie"
-					maxlength="255"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.omschrijving"
-					label="Omschrijving"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.omschrijvingGeneriek"
-					label="omschrijvingGeneriek"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.vertrouwelijkheidaanduiding"
-					label="vertrouwelijkheidaanduiding"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.doel"
-					label="doel"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.aanleiding"
-					label="aanleiding"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.toelichting"
-					label="toelichting"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.indicatieInternOfExtern"
-					label="indicatieInternOfExtern" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.handelingInitiator"
-					label="handelingInitiator" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.onderwerp"
-					label="onderwerp" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.handelingBehandelaar"
-					label="handelingBehandelaar" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.doorlooptijd"
-					label="doorlooptijd" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.servicenorm"
-					label="servicenorm" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.opschortingEnAanhoudingMogelijk"
-					label="opschortingEnAanhoudingMogelijk" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.verlengingMogelijk"
-					label="verlengingMogelijk" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.verlengingstermijn"
-					label="trefwoorden" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.publicatieIndicatie"
-					label="publicatieIndicatie" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.publicatietekst"
-					label="publicatietekst" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.productenOfDiensten"
-					label="productenOfDiensten" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.selectielijstProcestype"
-					label="selectielijstProcestype" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.referentieproces"
-					label="Referentieprocesnaam" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.catalogus"
-					label="catalogus" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.beginGeldigheid"
-					label="beginGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.eindeGeldigheid"
-					label="eindeGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.beginObject"
-					label="beginObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.eindeObject"
-					label="eindeObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.versiedatum"
-					label="versiedatum" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
-				:disabled="!store.zaakTypeItem.omschrijving || loading"
-				type="primary"
-				@click="addZaakType()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import { NcButton, NcModal, NcTextField, NcSelect, NcTextArea, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-export default {
-	name: 'AddZaakType',
-	components: {
-		NcModal,
-		NcTextField,
-		NcButton,
-		NcSelect,
-		NcTextArea,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		Plus,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-			// Select options
-			zaakTypeLoading: false,
-			zaaktype: false,
-		}
-	},
-	mounted() {
-		// Lets create an empty zaak type item
-		store.setZaakTypeItem([])
-	},
-	methods: {
-		addZaakType() {
-			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.zaakTypeItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					// Wait for the user to read the feedback then close the model
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
-				})
-		},
-	},
-}
-</script>
-
-<style>
-.modalContent {
-    margin: var(--zaa-margin-50);
-    text-align: center;
-}
-
-</style>
diff --git a/src/modals/zaakTypen/DeleteZaaktype.vue b/src/modals/zaakTypen/DeleteZaaktype.vue
new file mode 100644
index 0000000..514ddbb
--- /dev/null
+++ b/src/modals/zaakTypen/DeleteZaaktype.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { zaakTypeStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Zaaktype verwijderen"
+		size="normal"
+		:can-close="false">
+		<p v-if="success === null">
+			Weet u zeker dat u <b>{{ zaakTypeStore.zaakTypeItem?.identificatie }}</b> permanent wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<div v-if="success !== null">
+			<NcNoteCard v-if="success" type="success">
+				<p>Zaaktype succesvol verwijderd</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success && !error" type="error">
+				<p>Er is een fout opgetreden bij het verwijderen van het zaaktype</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success === null ? 'Annuleren' : 'Sluiten' }}
+			</NcButton>
+			<NcButton v-if="success === null"
+				:disabled="loading"
+				type="error"
+				@click="deleteZaakType()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+export default {
+	name: 'DeleteZaaktype',
+	components: {
+		NcDialog,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: null,
+			loading: false,
+			error: null,
+			closeModalTimeout: null,
+		}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			clearTimeout(this.closeModalTimeout)
+		},
+		async deleteZaakType() {
+			this.loading = true
+
+			zaakTypeStore.deleteZaakType({
+				...zaakTypeStore.zaakTypeItem,
+			}).then(({ response }) => {
+				this.success = response.ok
+				response.ok && (this.closeModalTimeout = setTimeout(this.closeDialog, 2000))
+			}).catch((error) => {
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het zaaktype'
+			}).finally(() => {
+				this.loading = false
+			})
+		},
+	},
+}
+</script>
diff --git a/src/modals/zaakTypen/EditZaakType.vue b/src/modals/zaakTypen/EditZaakType.vue
deleted file mode 100644
index 7068a20..0000000
--- a/src/modals/zaakTypen/EditZaakType.vue
+++ /dev/null
@@ -1,302 +0,0 @@
-<script setup>
-import { navigationStore, zaakTypeStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcModal v-if="navigationStore.modal === 'editZaakType'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modalContent">
-			<h2>Zaak aanpassen</h2>
-			<NcNoteCard v-if="success" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-			<div v-if="!success" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.identificatie"
-					label="Identificatie"
-					maxlength="255"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.omschrijving"
-					label="Omschrijving"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.omschrijvingGeneriek"
-					label="omschrijvingGeneriek"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.vertrouwelijkheidaanduiding"
-					label="vertrouwelijkheidaanduiding"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.doel"
-					label="doel"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.aanleiding"
-					label="aanleiding"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.toelichting"
-					label="toelichting"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.indicatieInternOfExtern"
-					label="indicatieInternOfExtern" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.handelingInitiator"
-					label="handelingInitiator" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.onderwerp"
-					label="onderwerp" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.handelingBehandelaar"
-					label="handelingBehandelaar" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.doorlooptijd"
-					label="doorlooptijd" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.servicenorm"
-					label="servicenorm" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.opschortingEnAanhoudingMogelijk"
-					label="opschortingEnAanhoudingMogelijk" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.verlengingMogelijk"
-					label="verlengingMogelijk" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.verlengingstermijn"
-					label="trefwoorden" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.publicatieIndicatie"
-					label="publicatieIndicatie" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.publicatietekst"
-					label="publicatietekst" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.productenOfDiensten"
-					label="productenOfDiensten" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.selectielijstProcestype"
-					label="selectielijstProcestype" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.referentieproces"
-					label="Referentieprocesnaam" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.catalogus"
-					label="catalogus" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.beginGeldigheid"
-					label="beginGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.eindeGeldigheid"
-					label="eindeGeldigheid" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.beginObject"
-					label="beginObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.eindeObject"
-					label="eindeObject" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="zaakTypeStore.zaakTypeItem.versiedatum"
-					label="versiedatum" />
-			</div>
-			<NcButton
-				v-if="!succes"
-				:disabled="!store.zaakItem.title || loading"
-				type="primary"
-				@click="addAttachment()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
-				</template>
-				Opslaan
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import { NcButton, NcModal, NcTextField, NcSelect, NcTextArea, NcLoadingIcon } from '@nextcloud/vue'
-import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
-
-export default {
-	name: 'EditZaakType',
-	components: {
-		NcModal,
-		NcTextField,
-		NcButton,
-		NcSelect,
-		NcTextArea,
-		NcLoadingIcon,
-		// Icons
-		ContentSaveOutline,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-		}
-	},
-	updated() {
-		if (navigationStore.modal === 'editZaakType' && this.hasUpdated) {
-			if (this.zaakType === zaakTypeStore.zaakTypeItem) return
-			this.hasUpdated = false
-		}
-		if (navigationStore.modal === 'editZaakType' && !this.hasUpdated) {
-			this.zaakType = zaakTypeStore.zaakTypeItem
-			this.hasUpdated = true
-		}
-	},
-	methods: {
-		editZaak() {
-			this.zaakLoading = true
-			fetch(
-				`index.php/apps/zaakafhandelapp/api/zrc/zaken/${this.zaak.uuid}`,
-				{
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						identificatie: this.identificatie,
-						omschrijving: this.omschrijving,
-						bronorganisatie: this.bronorganisatie,
-						verantwoordelijkeOrganisatie: this.verantwoordelijkeOrganisatie,
-						startdatum: this.startdatum,
-						zaaktype: this.zaaktype.value,
-						archiefstatus: this.archiefstatus.value,
-						registratiedatum: this.registratiedatum,
-						toelichting: this.toelichting,
-					}),
-				},
-			)
-				.then((response) => {
-					this.succesMessage = true
-					this.zaakLoading = false
-					setTimeout(() => (this.succesMessage = false), 2500)
-				})
-				.catch((err) => {
-					this.zaakLoading = false
-					console.error(err)
-				})
-		},
-		setArchiefStatusOptions() {
-			const archiefStatusOptions = [
-				{
-					id: 'nog_te_archiveren',
-					label: 'Nog te archiveren',
-				},
-				{
-					id: 'gearchiveerd',
-					label: 'Gearchiveerd',
-				},
-				{
-					id: 'gearchiveerd_procestermijn_onbekend',
-					label: 'Gearchiveerd procestermijn onbekend',
-				},
-				{
-					id: 'overgedragen',
-					label: 'Overgedragen',
-				},
-			]
-
-			const selectedArchiefStatusOption = archiefStatusOptions.find((options) => options.id === this.zaak.archiefstatus)
-
-			this.archiefstatus = {
-				options: archiefStatusOptions,
-				value: {
-					id: selectedArchiefStatusOption.id ?? '',
-					label: selectedArchiefStatusOption.label ?? '',
-				},
-			}
-		},
-		fetchZaakType() {
-			this.zaakTypeLoading = true
-			fetch('/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen', {
-				method: 'GET',
-			})
-				.then((response) => {
-					response.json().then((data) => {
-						const selectedZaakType = Object.entries(data.results).find((zaaktype) => zaaktype[1].id === this.zaak.zaaktype)
-
-						this.zaaktype = {
-							options: Object.entries(data.results).map((zaaktype) => ({
-								id: zaaktype[1].id,
-								label: zaaktype[1].name,
-							})),
-							value: {
-								id: selectedZaakType[1].id ?? '',
-								label: selectedZaakType[1].name ?? '',
-							},
-						}
-					})
-					this.zaakTypeLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.zaakTypeLoading = false
-				})
-		},
-	},
-}
-</script>
diff --git a/src/modals/zaakTypen/ZaaktypeForm.vue b/src/modals/zaakTypen/ZaaktypeForm.vue
new file mode 100644
index 0000000..38cd3dc
--- /dev/null
+++ b/src/modals/zaakTypen/ZaaktypeForm.vue
@@ -0,0 +1,290 @@
+<script setup>
+import { navigationStore, zaakTypeStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef" label-id="zaaktypeForm" @close="closeModal">
+		<div class="modalContent">
+			<h2>Zaaktype {{ zaaktype?.id ? 'aanpassen' : 'aanmaken' }}</h2>
+
+			<div v-if="success !== null">
+				<NcNoteCard v-if="success" type="success">
+					<p>Zaaktype succesvol {{ zaaktype.id ? 'aangepast' : 'aangemaakt' }}</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.identificatie"
+					label="Identificatie"
+					maxlength="255"
+					required />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.omschrijving"
+					label="Omschrijving"
+					maxlength="255" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.omschrijvingGeneriek"
+					label="omschrijvingGeneriek"
+					maxlength="9"
+					required />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.vertrouwelijkheidaanduiding"
+					label="vertrouwelijkheidaanduiding"
+					maxlength="9"
+					required />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.doel"
+					label="doel"
+					maxlength="9"
+					required />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.aanleiding"
+					label="aanleiding"
+					required />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.toelichting"
+					label="toelichting"
+					maxlength="255" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.indicatieInternOfExtern"
+					label="indicatieInternOfExtern" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.handelingInitiator"
+					label="handelingInitiator" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.onderwerp"
+					label="onderwerp" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.handelingBehandelaar"
+					label="handelingBehandelaar" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.doorlooptijd"
+					label="doorlooptijd" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.servicenorm"
+					label="servicenorm" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.opschortingEnAanhoudingMogelijk"
+					label="opschortingEnAanhoudingMogelijk" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.verlengingMogelijk"
+					label="verlengingMogelijk" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.verlengingstermijn"
+					label="trefwoorden" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.publicatieIndicatie"
+					label="publicatieIndicatie" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.publicatietekst"
+					label="publicatietekst" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.productenOfDiensten"
+					label="productenOfDiensten" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.selectielijstProcestype"
+					label="selectielijstProcestype" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.referentieproces"
+					label="Referentieprocesnaam" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.catalogus"
+					label="catalogus" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.beginGeldigheid"
+					label="beginGeldigheid" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.eindeGeldigheid"
+					label="eindeGeldigheid" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.beginObject"
+					label="beginObject" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.eindeObject"
+					label="eindeObject" />
+
+				<NcTextField
+					:disabled="loading"
+					:value.sync="zaaktype.versiedatum"
+					label="versiedatum" />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!zaaktype.identificatie
+					|| !zaaktype.omschrijvingGeneriek
+					|| !zaaktype.vertrouwelijkheidaanduiding
+					|| !zaaktype.doel
+					|| !zaaktype.aanleiding
+					|| loading"
+				type="primary"
+				@click="saveZaakType()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				{{ zaaktype?.id ? 'Opslaan' : 'Aanmaken' }}
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcTextField, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+import { ZaakType } from '../../entities/index.js'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+export default {
+	name: 'ZaaktypeForm',
+	components: {
+		NcModal,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			zaaktype: {
+				identificatie: '',
+				omschrijving: '',
+				omschrijvingGeneriek: '',
+				vertrouwelijkheidaanduiding: '',
+				doel: '',
+				aanleiding: '',
+				toelichting: '',
+				indicatieInternOfExtern: '',
+				handelingInitiator: '',
+				onderwerp: '',
+				handelingBehandelaar: '',
+				doorlooptijd: '',
+				servicenorm: '',
+				opschortingEnAanhoudingMogelijk: '',
+				verlengingMogelijk: '',
+				verlengingstermijn: '',
+				publicatieIndicatie: '',
+				publicatietekst: '',
+				productenOfDiensten: '',
+				selectielijstProcestype: '',
+				referentieproces: '',
+				catalogus: '',
+				beginGeldigheid: '',
+				eindeGeldigheid: '',
+				beginObject: '',
+				eindeObject: '',
+				versiedatum: '',
+			},
+			archiefstatus: {
+				options: [
+					{ id: 'nog_te_archiveren', label: 'Nog te archiveren' },
+					{ id: 'gearchiveerd', label: 'Gearchiveerd' },
+					{ id: 'gearchiveerd_procestermijn_onbekend', label: 'Gearchiveerd procestermijn onbekend' },
+					{ id: 'overgedragen', label: 'Overgedragen' },
+				],
+				value: null,
+			},
+			success: null,
+			loading: false,
+			error: false,
+			closeModalTimeout: null,
+		}
+	},
+	mounted() {
+		if (zaakTypeStore.zaakTypeItem?.id) {
+			this.initZaaktype()
+		}
+	},
+	methods: {
+		initZaaktype() {
+			this.zaaktype = {
+				...this.zaaktype,
+				...zaakTypeStore.zaakTypeItem,
+			}
+
+			const selectedArchiefStatus = this.archiefstatus.options.find((options) => options.id === this.zaaktype.archiefstatus)
+			this.archiefstatus.value = selectedArchiefStatus || null
+		},
+		closeModal() {
+			navigationStore.setModal(null)
+			clearTimeout(this.closeModalTimeout)
+		},
+		saveZaakType() {
+			this.loading = true
+
+			const zaakTypeItem = new ZaakType({
+				...this.zaaktype,
+				archiefstatus: this.archiefstatus.value?.id || null,
+			})
+
+			zaakTypeStore.saveZaakType(zaakTypeItem)
+				.then(({ response }) => {
+					this.success = response.ok
+					this.closeModalTimeout = setTimeout(this.closeModal, 3000)
+				})
+				.catch((e) => {
+					this.error = e
+					this.success = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
diff --git a/src/modals/zaken/AddBerichtToZaak.vue b/src/modals/zaken/AddBerichtToZaak.vue
new file mode 100644
index 0000000..fffed4a
--- /dev/null
+++ b/src/modals/zaken/AddBerichtToZaak.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { zaakStore, navigationStore, berichtStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addBerichtToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Bericht toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Bericht succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="berichten"
+					v-model="berichten.value"
+					input-label="Bericht"
+					:loading="berichtenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!berichten?.value || loading"
+				type="primary"
+				@click="addBerichtToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Zaak } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddBerichtToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			berichtenLoading: false,
+			berichten: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.zaakItem = zaakStore.zaakItem
+		this.fetchBerichtenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchBerichtenData() {
+			this.berichtenLoading = true
+
+			berichtStore.refreshBerichtenList()
+				.then(({ data }) => {
+					this.berichten = {
+						options: data
+							.filter((bericht) => !zaakStore.zaakItem.berichten.includes(bericht.id))
+							.map((bericht) => ({
+								id: bericht.id,
+								label: bericht.title,
+							})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.berichtenLoading = false
+				})
+		},
+		addBerichtToZaak() {
+			this.loading = true
+			this.error = false
+
+			const zaakItemCopy = _.cloneDeep(zaakStore.zaakItem)
+
+			if (zaakItemCopy.berichten) {
+				zaakItemCopy.berichten.push(this.berichten.value.id)
+			} else {
+				zaakItemCopy.berichten = [this.berichten.value.id]
+			}
+
+			const newZaakItem = new Zaak(zaakItemCopy)
+
+			zaakStore.saveZaak(newZaakItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/modals/zaken/AddRolToZaak.vue b/src/modals/zaken/AddRolToZaak.vue
new file mode 100644
index 0000000..b62c9e7
--- /dev/null
+++ b/src/modals/zaken/AddRolToZaak.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { zaakStore, navigationStore, rolStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addRolToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Rol toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Rol succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="rollen"
+					v-model="rollen.value"
+					input-label="Rol"
+					:loading="rollenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!rollen?.value || loading"
+				type="primary"
+				@click="addRolToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Rol } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddRolToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			rollenLoading: false,
+			rollen: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.fetchRollenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchRollenData() {
+			this.rollenLoading = true
+
+			rolStore.refreshRollenList()
+				.then(({ data }) => {
+					this.rollen = {
+						options: data
+							// zaak is stored on the rol itself as a singular id, indicating that only rollen without a zaak can be used
+							.filter((rol) => !rol.zaak)
+							.map((rol) => ({
+								id: rol.id,
+								label: rol.title,
+							})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.rollenLoading = false
+				})
+		},
+		addRolToZaak() {
+			this.loading = true
+			this.error = false
+
+			const rolItem = rolStore.rollenList.find((rol) => rol.id === this.rollen.value.id)
+			if (!rolItem) {
+				this.error = 'something went majorly wrong'
+				this.loading = false
+				return
+			}
+
+			const rolItemCopy = _.cloneDeep(rolItem)
+
+			rolItemCopy.zaak = zaakStore.zaakItem.id
+
+			const newRolItem = new Rol(rolItemCopy)
+
+			rolStore.saveRol(newRolItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/modals/zaken/AddTaakToZaak.vue b/src/modals/zaken/AddTaakToZaak.vue
new file mode 100644
index 0000000..b9799e1
--- /dev/null
+++ b/src/modals/zaken/AddTaakToZaak.vue
@@ -0,0 +1,150 @@
+<script setup>
+import { zaakStore, navigationStore, taakStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addTaakToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Taak toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Taak succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="taken"
+					v-model="taken.value"
+					input-label="Taak"
+					:loading="takenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!taken?.value || loading"
+				type="primary"
+				@click="addTaakToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Taak } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddTaakToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			takenLoading: false,
+			taken: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.zaakItem = zaakStore.zaakItem
+		this.fetchTakenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchTakenData() {
+			this.takenLoading = true
+
+			taakStore.refreshTakenList()
+				.then(({ data }) => {
+					this.taken = {
+						options: data
+							// zaak is stored on the taak itself as a singular id, indicating that only taken without a zaak can be used
+							.filter((taak) => !taak.zaak)
+							.map((taak) => ({
+								id: taak.id,
+								label: taak.title,
+							})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.takenLoading = false
+				})
+		},
+		addTaakToZaak() {
+			this.loading = true
+			this.error = false
+
+			const taakItem = taakStore.takenList.find((taak) => taak.id === this.taken.value.id)
+			if (!taakItem) {
+				this.error = 'something went majorly wrong'
+				this.loading = false
+				return
+			}
+
+			const taakItemCopy = _.cloneDeep(taakItem)
+
+			taakItemCopy.zaak = this.zaakItem.id
+
+			const newTaakItem = new Taak(taakItemCopy)
+
+			taakStore.saveTaak(newTaakItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/modals/zaken/ZaakForm.vue b/src/modals/zaken/ZaakForm.vue
index ff73091..0d66c89 100644
--- a/src/modals/zaken/ZaakForm.vue
+++ b/src/modals/zaken/ZaakForm.vue
@@ -57,6 +57,13 @@ import { navigationStore, zaakStore, zaakTypeStore } from '../../store/store.js'
 					input-label="Archiefstatus"
 					:disabled="zaakLoading"
 					required />
+				<div>
+					<p>Uiterlijke Einddatum Afdoening</p>
+					<NcDateTimePicker
+						v-model="zaak.uiterlijkeEinddatumAfdoening"
+						:disabled="zaakLoading"
+						required />
+				</div>
 				<NcTextField :disabled="zaakLoading"
 					label="Registratiedatum"
 					maxlength="255"
@@ -90,6 +97,7 @@ import {
 	NcSelect,
 	NcTextArea,
 	NcLoadingIcon,
+	NcDateTimePicker,
 } from '@nextcloud/vue'
 
 // icons
@@ -107,6 +115,7 @@ export default {
 		NcButton,
 		NcSelect,
 		NcTextArea,
+		NcDateTimePicker,
 	},
 	props: {
 		dashboardWidget: {
@@ -114,6 +123,15 @@ export default {
 			default: false,
 			required: false,
 		},
+		/**
+		 * The id of the klant that the zaak is for.
+		 * Currently there is no dropdown for selecting a klant.
+		 * So it currently will pass the klantId with the zaak to the API.
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -127,6 +145,7 @@ export default {
 				verantwoordelijkeOrganisatie: '',
 				startdatum: '',
 				archiefstatus: '',
+				uiterlijkeEinddatumAfdoening: null,
 			},
 			loading: false,
 			success: null,
@@ -165,6 +184,7 @@ export default {
 			this.zaak = {
 				...this.zaak,
 				...zaakStore.zaakItem,
+				uiterlijkeEinddatumAfdoening: zaakStore.zaakItem.uiterlijkeEinddatumAfdoening ? new Date(zaakStore.zaakItem.uiterlijkeEinddatumAfdoening) : null,
 			}
 		}
 	},
@@ -172,19 +192,6 @@ export default {
 		closeModal() {
 			navigationStore.setModal(null)
 			this?.dashboardWidget && this.$emit('close')
-			this.success = null
-			this.loading = false
-			this.zaak = {
-				identificatie: '',
-				omschrijving: '',
-				zaaktype: {},
-				registratiedatum: '',
-				toelichting: '',
-				bronorganisatie: '',
-				verantwoordelijkeOrganisatie: '',
-				startdatum: '',
-				archiefstatus: '',
-			}
 		},
 		fetchZaakType() {
 			this.zaakTypeLoading = true
@@ -230,6 +237,8 @@ export default {
 				...this.zaak,
 				archiefstatus: this.archiefstatus.value?.id || '',
 				zaaktype: this.zaakType.value?.id || '',
+				uiterlijkeEinddatumAfdoening: this.zaak.uiterlijkeEinddatumAfdoening ? new Date(this.zaak.uiterlijkeEinddatumAfdoening).toISOString() : null,
+				klant: this.klantId,
 			})
 
 			zaakStore.saveZaak(newZaak)
diff --git a/src/services/icons/icon/icon-calendar-check-outline.js b/src/services/icons/icon/icon-calendar-check-outline.js
new file mode 100644
index 0000000..1124ab5
--- /dev/null
+++ b/src/services/icons/icon/icon-calendar-check-outline.js
@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'calendar-check-outline' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconCalendarCheckOutline() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-calendar-check-outline-dark' : 'icon-calendar-check-outline-light'
+}
diff --git a/src/services/icons/icon/icon-pencil.js b/src/services/icons/icon/icon-pencil.js
new file mode 100644
index 0000000..696bf37
--- /dev/null
+++ b/src/services/icons/icon/icon-pencil.js
@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'pencil' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconPencil() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-pencil-dark' : 'icon-pencil-light'
+}
diff --git a/src/services/icons/icon/icon-progress-close.js b/src/services/icons/icon/icon-progress-close.js
new file mode 100644
index 0000000..4bd308b
--- /dev/null
+++ b/src/services/icons/icon/icon-progress-close.js
@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'progress close' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconProgressClose() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
+}
diff --git a/src/services/icons/icons.css b/src/services/icons/icons.css
new file mode 100644
index 0000000..5b381ca
--- /dev/null
+++ b/src/services/icons/icons.css
@@ -0,0 +1,23 @@
+/* progress close */
+.icon-progress-close-dark {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLW9wYWNpdHk6LjU7ZmlsbC1ydWxlOm5vbnplcm8iIGZpbGw9IiMwMDAwMDAiIC8+DQo8L3N2Zz4=);
+}
+.icon-progress-close-light {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgLz4NCjwvc3ZnPg==);
+}
+
+/* pencil */
+.icon-pencil-dark {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiAvPjwvc3ZnPg==);
+}
+.icon-pencil-light {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiBmaWxsPSIjZmZmZmZmIiAvPjwvc3ZnPg==);
+}
+
+/* CalendarCheckOutline */
+.icon-calendar-check-outline-dark {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIC8+PC9zdmc+);
+}
+.icon-calendar-check-outline-light {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+);
+}
\ No newline at end of file
diff --git a/src/services/icons/index.js b/src/services/icons/index.js
new file mode 100644
index 0000000..f2e0c7d
--- /dev/null
+++ b/src/services/icons/index.js
@@ -0,0 +1,7 @@
+import { iconProgressClose as _iconProgressClose } from './icon/icon-progress-close.js'
+import { iconPencil as _iconPencil } from './icon/icon-pencil.js'
+import { iconCalendarCheckOutline as _iconCalendarCheckOutline } from './icon/icon-calendar-check-outline.js'
+
+export const iconProgressClose = _iconProgressClose()
+export const iconPencil = _iconPencil()
+export const iconCalendarCheckOutline = _iconCalendarCheckOutline()
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 118c8ad..4dc9a3c 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -35,19 +35,22 @@ export const useTaakStore = defineStore('taken', {
 			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, notClosed = false) {
+		async refreshTakenList(search = null, notClosed = false, user = null) {
 			let endpoint = apiEndpoint
 
-			if (search !== null && search !== '') {
-				endpoint = endpoint + '?_search=' + search
+			const params = new URLSearchParams()
+			if (search) {
+				params.append('_search', search)
 			}
-
 			if (notClosed) {
-				if (search !== null && search !== '') {
-					endpoint = endpoint + '&status=open'
-				} else {
-					endpoint = endpoint + '?status=open'
-				}
+				params.append('status', 'open')
+			}
+			if (user) {
+				params.append('medewerker', user)
+			}
+
+			if (params.toString()) {
+				endpoint += `?${params.toString()}`
 			}
 
 			const response = await fetch(endpoint, {
@@ -108,7 +111,7 @@ export const useTaakStore = defineStore('taken', {
 			return { response }
 		},
 		// Create or save a taak from store
-		async saveTaak(taakItem, widget = false) {
+		async saveTaak(taakItem, options = {}) {
 			if (!taakItem) {
 				throw new Error('No taak item to save')
 			}
@@ -139,7 +142,7 @@ export const useTaakStore = defineStore('taken', {
 			const entity = new Taak(data)
 
 			this.setTaakItem(data)
-			if (!widget) {
+			if (!options.doNotRefresh) {
 				this.refreshTakenList()
 			}
 
diff --git a/src/store/modules/zaakTypen.ts b/src/store/modules/zaakTypen.ts
index 9c816df..d8f956c 100644
--- a/src/store/modules/zaakTypen.ts
+++ b/src/store/modules/zaakTypen.ts
@@ -70,6 +70,10 @@ export const useZaakTypeStore = defineStore('zaakTypen', {
 			id: string,
 			options: TOptions = {},
 		): Promise<{ response: Response, data: TZaakType, entity: ZaakType }> {
+			if (!id || typeof id !== 'string' || id.trim() === '') {
+				throw new Error('Invalid or missing id for fetching zaaktype item')
+			}
+
 			const endpoint = `${apiEndpoint}/${id}`
 
 			console.info('Fetching zaaktype item with id: ' + id)
@@ -114,11 +118,7 @@ export const useZaakTypeStore = defineStore('zaakTypen', {
 				method: 'DELETE',
 			})
 
-			if (!response.ok) {
-				console.error(response)
-				throw new Error(`HTTP error! status: ${response.status}`)
-			}
-
+			this.setZaakTypeItem(null)
 			this.refreshZaakTypenList()
 
 			return { response }
diff --git a/src/store/modules/zaken.ts b/src/store/modules/zaken.ts
index d9937f6..427d434 100644
--- a/src/store/modules/zaken.ts
+++ b/src/store/modules/zaken.ts
@@ -144,13 +144,13 @@ export const useZaakStore = defineStore('zaken', {
 				throw new Error('No zaak item to save')
 			}
 
-			const isNewZaak = !zaakItem.uuid
+			const isNewZaak = !zaakItem.id
 			const endpoint = isNewZaak
 				? `${apiEndpoint}`
-				: `${apiEndpoint}/${zaakItem.uuid}`
+				: `${apiEndpoint}/${zaakItem.id}`
 			const method = isNewZaak ? 'POST' : 'PUT'
 
-			console.info('Saving zaak item with id: ' + zaakItem.uuid)
+			console.info('Saving zaak item with id: ' + zaakItem.id)
 
 			const response = await fetch(
 				endpoint,
diff --git a/src/views/berichten/ZaakBerichten.vue b/src/views/berichten/ZaakBerichten.vue
index d01a2a3..20d1fa5 100644
--- a/src/views/berichten/ZaakBerichten.vue
+++ b/src/views/berichten/ZaakBerichten.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { navigationStore, berichtStore } from '../../store/store.js'
+import { navigationStore, berichtStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(bericht, i) in berichtenList"
+		<div v-if="!loading && !!filteredBerichten?.length">
+			<NcListItem v-for="(bericht, i) in filteredBerichten"
 				:key="`${bericht}${i}`"
 				:name="bericht?.onderwerp"
 				:active="berichtStore.berichtItem?.id === bericht.id"
@@ -22,17 +22,29 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					{{ bericht?.berichttekst }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="editBericht(bericht)">
-						Bewerken
+					<NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setSelected('berichten')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
 					</NcActionButton>
+					<!-- <NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('editBericht')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton> -->
 					<NcActionButton>
-						Verwijderen
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!berichtenList?.length && !loading">
+		<div v-if="!filteredBerichten?.length && !loading">
 			Geen berichten gevonden.
 		</div>
 
@@ -49,6 +61,9 @@ import { NcListItem, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 
 // Icons
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	name: 'ZaakBerichten',
@@ -68,38 +83,27 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			berichtenList: [],
 		}
 	},
+	computed: {
+		filteredBerichten() {
+			return berichtStore.berichtenList.filter(bericht => zaakStore.zaakItem.berichten.includes(bericht.id))
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
-		editBericht(bericht) {
-			berichtStore.setBerichtItem(bericht)
-			navigationStore.setModal('editBericht')
-		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/berichten',
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.berichtenList = data.results || []
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			berichtStore.refreshBerichtenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
diff --git a/src/views/contactMomenten/ContactMomentDetails.vue b/src/views/contactMomenten/ContactMomentDetails.vue
index af8c0c3..79e5d53 100644
--- a/src/views/contactMomenten/ContactMomentDetails.vue
+++ b/src/views/contactMomenten/ContactMomentDetails.vue
@@ -16,7 +16,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
-						<NcActionButton @click="navigationStore.setModal('editContactMoment')">
+						<NcActionButton @click="navigationStore.setModal('contactMomentenForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -97,7 +97,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 							</div>
 							<NcEmptyContent v-else icon="icon-history" title="Geen audit trail gevonden">
 								<template #description>
-									Er is geen audit trail gevonden voor deze bericht.
+									Er is geen audit trail gevonden voor dit contactmoment.
 								</template>
 							</NcEmptyContent>
 						</BTab>
diff --git a/src/views/contactMomenten/ContactMomentenIndex.vue b/src/views/contactMomenten/ContactMomentenIndex.vue
index ca70bc1..f985d80 100644
--- a/src/views/contactMomenten/ContactMomentenIndex.vue
+++ b/src/views/contactMomenten/ContactMomentenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 					<CardAccountPhoneOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('editContactMoment')">
+					<NcButton type="primary" @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						Contact moment aanmaken
 					</NcButton>
 				</template>
diff --git a/src/views/contactMomenten/ContactMomentenList.vue b/src/views/contactMomenten/ContactMomentenList.vue
index 454d54e..2be1a1f 100644
--- a/src/views/contactMomenten/ContactMomentenList.vue
+++ b/src/views/contactMomenten/ContactMomentenList.vue
@@ -22,7 +22,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('editContactMoment')">
+					<NcActionButton @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
@@ -46,7 +46,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						{{ new Date(contactMoment.startDate).toLocaleString() }}
 					</template>
 					<template #actions>
-						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('editContactMoment')">
+						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('contactMomentenForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -112,10 +112,12 @@ export default {
 		}
 	},
 	mounted() {
-		contactMomentStore.refreshContactMomentenList().then(() => {
+		Promise.all([
+			contactMomentStore.refreshContactMomentenList(),
+			klantStore.refreshKlantenList(),
+		]).then(() => {
 			this.loading = false
 		})
-		klantStore.refreshKlantenList()
 	},
 	methods: {
 		editContactMoment(contactMoment) {
diff --git a/src/views/eigenschappen/ZaakEigenschappen.vue b/src/views/eigenschappen/ZaakEigenschappen.vue
index 6c6d7af..0cc5b12 100644
--- a/src/views/eigenschappen/ZaakEigenschappen.vue
+++ b/src/views/eigenschappen/ZaakEigenschappen.vue
@@ -67,7 +67,7 @@ export default {
 	data() {
 		return {
 			search: '',
-			loading: true,
+			loading: false,
 			zakenList: [],
 		}
 	},
diff --git a/src/views/klanten/KlantDetails.vue b/src/views/klanten/KlantDetails.vue
index 936b2b0..6b7dcdf 100644
--- a/src/views/klanten/KlantDetails.vue
+++ b/src/views/klanten/KlantDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, klantStore, taakStore, berichtStore, zaakStore } from '../../store/store.js'
+import { navigationStore, klantStore, taakStore, berichtStore, zaakStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -218,18 +218,20 @@ import { navigationStore, klantStore, taakStore, berichtStore, zaakStore } from
 							</NcEmptyContent>
 						</BTab>
 						<BTab title="Contact Momenten">
-							<div v-if="contactMomenten.length">
-								<NcListItem v-for="(contactMoment, key) in contactMomenten"
+							<div v-if="filteredContactMomenten.length">
+								<NcListItem v-for="(contactMoment, key) in filteredContactMomenten"
 									:key="key"
-									:name="contactMoment.title"
+									:name="getName(klantStore.klantItem)"
 									:bold="false"
-									:details="contactMoment.description"
 									:force-display-actions="true">
 									<template #icon>
-										<AccountOutline :size="44" />
+										<CardAccountPhoneOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ new Date(contactMoment.startDate).toLocaleString() }}
 									</template>
 									<template #actions>
-										<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('viewContactMoment')">
+										<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setSelected('contactMomenten')">
 											<template #icon>
 												<Eye :size="20" />
 											</template>
@@ -298,6 +300,7 @@ import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountO
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
+import CardAccountPhoneOutline from 'vue-material-design-icons/CardAccountPhoneOutline.vue'
 
 export default {
 	name: 'KlantDetails',
@@ -324,11 +327,17 @@ export default {
 			zaken: [],
 			taken: [],
 			berichten: [],
-			contactMomenten: [],
 			auditTrails: [],
 		}
 	},
+	computed: {
+		filteredContactMomenten() {
+			return contactMomentStore.contactMomentenList.filter(contactMoment => contactMoment.klant === klantStore.klantItem.id)
+		},
+	},
 	mounted() {
+		this.fetchContactMomenten()
+
 		if (klantStore.klantItem?.id) {
 			this.currentActiveKlant = klantStore.klantItem
 			this.fetchKlantData(klantStore.klantItem.id)
@@ -341,38 +350,47 @@ export default {
 		}
 	},
 	methods: {
-		fetchKlantData(id) {
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.zaken = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.taken = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.berichten = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data)) {
-						this.auditTrails = data
-					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant data:', error)
-				})
+		async fetchKlantData(id) {
+			// when using Promise.allSettled, it will return an array of items.
+			// these items contain a status string, which is either 'fulfilled' or 'rejected'.
+			// when fulfilled, it also contains a value, which is the response from the fetch call.
+			const [zakenResult, takenResult, berichtenResult, auditTrailResult] = await Promise.allSettled([
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`).then(response => response.json()),
+			])
+
+			// Handle zaken
+			if (zakenResult.status === 'fulfilled' && Array.isArray(zakenResult.value.results)) {
+				this.zaken = zakenResult.value.results
+			} else {
+				console.error('Error fetching zaken:', zakenResult.reason)
+			}
+
+			// Handle taken
+			if (takenResult.status === 'fulfilled' && Array.isArray(takenResult.value.results)) {
+				this.taken = takenResult.value.results
+			} else {
+				console.error('Error fetching taken:', takenResult.reason)
+			}
+
+			// Handle berichten
+			if (berichtenResult.status === 'fulfilled' && Array.isArray(berichtenResult.value.results)) {
+				this.berichten = berichtenResult.value.results
+			} else {
+				console.error('Error fetching berichten:', berichtenResult.reason)
+			}
+
+			// Handle audit trail
+			if (auditTrailResult.status === 'fulfilled' && Array.isArray(auditTrailResult.value)) {
+				this.auditTrails = auditTrailResult.value
+			} else {
+				console.error('Error fetching audit trail:', auditTrailResult.reason)
+			}
+		},
+		fetchContactMomenten() {
+			contactMomentStore.refreshContactMomentenList()
 		},
 
 		getName(klant) {
diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
index 76bf8f5..4252e52 100644
--- a/src/views/medewerkers/MedewerkerDetails.vue
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -16,7 +16,7 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
-						<NcActionButton @click="navigationStore.setModal('editKlant')">
+						<NcActionButton @click="navigationStore.setModal('editMedewerker')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -40,7 +40,7 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 							</template>
 							Zaak starten
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setDialog('deleteKlant')">
+						<NcActionButton @click="navigationStore.setDialog('deleteMedewerker')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
 							</template>
@@ -51,8 +51,14 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 				<span> {{ medewerkerStore.medewerkerItem.subject }} </span>
 
 				<div class="gridContent">
-					<b>Email adres:</b>
-					<p>{{ medewerkerStore.medewerkerItem.emailadres }}</p>
+					<div>
+						<b>Email adres:</b>
+						<p>{{ medewerkerStore.medewerkerItem.email }}</p>
+					</div>
+					<div>
+						<b>Telefoonnummer:</b>
+						<p>{{ medewerkerStore.medewerkerItem.telefoonnummer }}</p>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/views/medewerkers/MedewerkerList.vue b/src/views/medewerkers/MedewerkerList.vue
index f6c5bde..b43f6f4 100644
--- a/src/views/medewerkers/MedewerkerList.vue
+++ b/src/views/medewerkers/MedewerkerList.vue
@@ -44,7 +44,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ getSubname(medewerker) }}
+						{{ medewerker.email }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="medewerkerStore.setMedewerkerItem(medewerker); navigationStore.setModal('editMedewerker')">
@@ -119,12 +119,7 @@ export default {
 			return name
 		},
 		getName(medewerker) {
-			return medewerker?.voornaam ?? 'onbekend'
-
-		},
-		getSubname(medewerker) {
-			return medewerker?.tussenvoegsel ? `${medewerker.tussenvoegsel} ${medewerker.achternaam}` : medewerker?.achternaam ? `${medewerker.achternaam}` : 'onbekend'
-
+			return `${medewerker?.voornaam} ${medewerker?.tussenvoegsel} ${medewerker?.achternaam}`
 		},
 		deleteKlant() {
 			fetch(
diff --git a/src/views/rollen/ZaakRollen.vue b/src/views/rollen/ZaakRollen.vue
index fc400fe..1807174 100644
--- a/src/views/rollen/ZaakRollen.vue
+++ b/src/views/rollen/ZaakRollen.vue
@@ -4,8 +4,8 @@ import { navigationStore, rolStore } from '../../store/store.js'
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(rollen, i) in rollenList"
+		<div v-if="filteredRollenList?.length">
+			<NcListItem v-for="(rollen, i) in filteredRollenList"
 				:key="`${rollen}${i}`"
 				:name="rollen?.omschrijving"
 				:active="rolStore.rolItem?.id === rollen.id"
@@ -22,21 +22,33 @@ import { navigationStore, rolStore } from '../../store/store.js'
 					{{ rollen?.omschrijving }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="editRol(rollen)">
-						Bewerken
+					<NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setSelected('rollen')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
 					</NcActionButton>
+					<!-- <NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setModal('rollen')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton> -->
 					<NcActionButton>
-						Verwijderen
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!rollenList?.length && !loading">
+		<div v-if="!filteredRollenList?.length && !loading">
 			Geen rollen gevonden.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!filteredRollenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -66,43 +78,40 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			rollenList: [],
 		}
 	},
+	computed: {
+		filteredRollenList() {
+			return rolStore.rollenList.filter((rol) => rol.zaak === this.zaakId)
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
 		editRol(rol) {
 			rolStore.setRolItem(rol)
 			navigationStore.setModal('editRol')
 		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/zrc/rollen?zaak.id=${zaakId}`,
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.rollenList = data.results
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			rolStore.refreshRollenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
 		toggleRol(rol) {
-			// TODO: toggle rol
+			if (rolStore.rolItem?.id === rol.id) {
+				rolStore.setRolItem(null)
+			} else {
+				rolStore.setRolItem(rol)
+			}
 		},
 		clearText() {
 			this.search = ''
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index dd2310d..da686ab 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore, klantStore } from '../../store/store.js'
+import { navigationStore, taakStore, klantStore, medewerkerStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -35,7 +35,24 @@ import { navigationStore, taakStore, klantStore } from '../../store/store.js'
 							<b>Sammenvatting:</b>
 							<span>{{ taakStore.taakItem.onderwerp }}</span>
 						</div>
-						<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>
+							</div>
+						</div>
+						<div v-if="taakStore.taakItem.klant">
 							<b>Klant:</b>
 							<span v-if="klantLoading">Loading...</span>
 							<div v-if="!klantLoading" class="buttonLinkContainer">
@@ -125,22 +142,26 @@ export default {
 		return {
 			currentActiveTaak: null,
 			auditTrails: [],
-			klant: [],
+			klant: null,
+			medewerker: null,
 			klantLoading: false,
+			medewerkerLoading: false,
 		}
 	},
 	mounted() {
 		if (taakStore.taakItem?.id) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
-			this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
 		}
 	},
 	updated() {
 		if (taakStore.taakItem?.id && JSON.stringify(this.currentActiveTaak) !== JSON.stringify(taakStore.taakItem)) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
-			this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
 		}
 	},
 	methods: {
@@ -156,10 +177,17 @@ export default {
 		getKlantName(klant) {
 			return klant?.type === 'persoon' ? `${klant?.voornaam} ${klant?.tussenvoegsel} ${klant?.achternaam}` : klant?.bedrijfsnaam
 		},
+		getMedewerkerName(medewerker) {
+			return `${medewerker?.voornaam} ${medewerker?.tussenvoegsel} ${medewerker?.achternaam}`
+		},
 		goToKlant() {
 			klantStore.setKlantItem(this.klant)
 			navigationStore.setSelected('klanten')
 		},
+		goToMedewerker() {
+			medewerkerStore.setMedewerkerItem(this.medewerker)
+			navigationStore.setSelected('medewerkers')
+		},
 		fetchKlant(klant) {
 			this.klantLoading = true
 
@@ -178,6 +206,24 @@ export default {
 				})
 
 		},
+		fetchMedewerker(medewerker) {
+			this.medewerkerLoading = true
+
+			fetch(`/index.php/apps/zaakafhandelapp/api/medewerkers/${medewerker}`, {
+				method: 'GET',
+			})
+				.then((response) => {
+					response.json().then((data) => {
+						this.medewerker = data
+					})
+					this.medewerkerLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.medewerkerLoading = false
+				})
+
+		},
 	},
 }
 </script>
diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index 3d48e61..f6366e6 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore } from '../../store/store.js'
+import { klantStore, medewerkerStore, navigationStore, taakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -37,7 +37,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					:force-display-actions="true"
 					:active="taakStore.taakItem?.id === taak?.id"
 					:details="taak.status"
-					:counter-number="taak.deadline ? new Date(taak.deadline).toLocaleDateString() : 'no deadline'"
+					:counter-number="taak.deadline ? `${Math.ceil((new Date(taak.deadline) - new Date()) / (1000 * 60 * 60 * 24))} dagen` : 'no deadline'"
 					@click="taakStore.setTaakItem(taak)">
 					<template #icon>
 						<CalendarMonthOutline :class="taakStore.taakItem?.id === taak.id && 'selectedZaakIcon'"
@@ -45,7 +45,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ taak?.onderwerp }}
+						{{ getName(taak) }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="taakStore.setTaakItem(taak); navigationStore.setModal('editTaak')">
@@ -111,33 +111,35 @@ export default {
 		}
 	},
 	mounted() {
-		taakStore.refreshTakenList().then(() => {
+		Promise.all([
+			taakStore.refreshTakenList(),
+			klantStore.refreshKlantenList(),
+			medewerkerStore.refreshMedewerkersList(),
+		]).then(() => {
 			this.loading = false
 		})
 	},
 	methods: {
-		fetchData(newPage) {
-			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/taken',
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.takenList = data
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.loading = false
-				})
-		},
 		clearText() {
 			this.search = ''
 		},
+		getName(taak) {
+			const medewerker = medewerkerStore.medewerkersList.find(medewerker => medewerker.id === taak.medewerker)
+			const klant = klantStore.klantenList.find(klant => klant.id === taak.klant)
+
+			if (medewerker) {
+				return `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}` ?? 'onbekend'
+			}
+			if (klant) {
+				if (klant.type === 'persoon') {
+					return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
+				}
+				if (klant.type === 'organisatie') {
+					return klant?.bedrijfsnaam ?? 'onbekend'
+				}
+			}
+			return 'onbekend'
+		},
 	},
 }
 </script>
diff --git a/src/views/taken/ZaakTaken.vue b/src/views/taken/ZaakTaken.vue
index 8abbf36..fb8165e 100644
--- a/src/views/taken/ZaakTaken.vue
+++ b/src/views/taken/ZaakTaken.vue
@@ -4,8 +4,8 @@ import { navigationStore, taakStore } from '../../store/store.js'
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(taak, i) in takenList.results"
+		<div v-if="filteredTakenList?.length">
+			<NcListItem v-for="(taak, i) in filteredTakenList"
 				:key="`${taak}${i}`"
 				:name="taak?.title"
 				:bold="true"
@@ -23,21 +23,33 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					{{ taak?.onderwerp }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="showEditTaakModal(taak)">
+					<NcActionButton @click="taakStore.setTaakItem(taak); navigationStore.setSelected('taken')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
+					</NcActionButton>
+					<!-- <NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('editBericht')">
 						<template #icon>
 							<Pencil :size="20" />
 						</template>
 						Bewerken
+					</NcActionButton> -->
+					<NcActionButton>
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!takenList?.results?.length && !loading">
+		<div v-if="!filteredTakenList?.length && !loading">
 			Geen taken gevonden.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!filteredTakenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -50,7 +62,8 @@ import { NcListItem, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 
 // Icons
 import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
 
 export default {
 	name: 'ZaakTaken',
@@ -70,43 +83,36 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			takenList: [],
 		}
 	},
+	computed: {
+		filteredTakenList() {
+			return taakStore.takenList.filter((taak) => taak.zaak === this.zaakId)
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
-		showEditTaakModal(taak) {
-			taakStore.setTaakItem(taak)
-			navigationStore.setModal('editTaak')
-		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/taken',
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.takenList = data
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			taakStore.refreshTakenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
 		toggleTaak(taak) {
-			// TODO: toggle taak
+			if (taakStore.taakItem?.id === taak.id) {
+				taakStore.setTaakItem(null)
+			} else {
+				taakStore.setTaakItem(taak)
+			}
 		},
 		clearText() {
 			this.search = ''
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index da2638a..761e906 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -5,13 +5,14 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 <template>
 	<div class="contactmomentenContainer">
 		<div class="itemContainer">
-			<NcDashboardWidget :items="items"
+			<NcDashboardWidget :items="contactMomentItems"
 				:loading="loading"
 				:item-menu="itemMenu"
 				@show="onShow"
+				@edit="onEdit"
 				@sluiten="onSluiten">
 				<template #empty-content>
-					<NcEmptyContent name="Geen contact momenten gevonden">
+					<NcEmptyContent name="Geen contactmomenten gevonden">
 						<template #icon>
 							<ChatOutline />
 						</template>
@@ -24,12 +25,13 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 			<template #icon>
 				<Plus :size="20" />
 			</template>
-			Contact moment starten
+			Contactmoment starten
 		</NcButton>
 
-		<ContactMomentenForm v-if="isModalOpen"
+		<ContactMomentenForm v-if="isContactMomentFormOpen"
 			:dashboard-widget="true"
 			:contact-moment-id="contactMomentId"
+			:is-view="isView"
 			@save-success="fetchContactMomentItems"
 			@close-modal="closeModal" />
 	</div>
@@ -44,6 +46,7 @@ import { getTheme } from '../../services/getTheme.js'
 import { ContactMoment } from '../../entities/index.js'
 
 // Icons
+import { iconPencil, iconProgressClose } from '../../services/icons/index.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
 
@@ -64,33 +67,34 @@ export default {
 	data() {
 		return {
 			loading: false,
-			isModalOpen: false,
-			searchKlantModalOpen: false,
+			/**
+			 * determines if the contactmoment form modal is open
+			 */
+			isContactMomentFormOpen: false,
 			contactMomentItems: [],
+			// contactmoment form props
 			contactMomentId: null,
+			isView: false,
+			// widget options
 			itemMenu: {
 				show: {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
+				edit: {
+					text: 'Bewerk',
+					icon: iconPencil,
+				},
 				sluiten: {
 					text: 'Sluit',
-					icon: this.getSluitenIcon(),
+					icon: iconProgressClose,
 				},
 			},
 		}
 	},
-
-	computed: {
-		items() {
-			return this.contactMomentItems
-		},
-	},
-
 	mounted() {
 		this.fetchContactMomentItems()
 	},
-
 	methods: {
 		fetchContactMomentItems() {
 			this.loading = true
@@ -102,11 +106,10 @@ export default {
 				.then(([contactMomentResponse, klantResponse]) => {
 					this.contactMomentItems = contactMomentResponse.entities.map(contactMoment => ({
 						id: contactMoment.id,
-						mainText: (() => { // this is a self calling function to get the klant name
+						mainText: (() => { // this is a self calling function to get the klant name, which is why you don't see it being called anywhere
 							const klant = klantResponse.entities.find(klant => klant.id === contactMoment.klant)
 							if (klant) {
-								const tussenvoegsel = klant.tussenvoegsel ? klant.tussenvoegsel + ' ' : ''
-								return `${klant.voornaam} ${tussenvoegsel}${klant.achternaam}`
+								return klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : `${klant.bedrijfsnaam}`
 							}
 							return ''
 						})(),
@@ -118,6 +121,7 @@ export default {
 					this.loading = false
 				})
 		},
+		// === ICONS ===
 		getItemIcon() {
 			const theme = getTheme()
 
@@ -129,33 +133,51 @@ export default {
 
 			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/chat-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/chat-outline.svg`
 		},
-		getSluitenIcon() {
-			const theme = getTheme()
-
-			return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
-		},
+		// === MODAL CONTROL ===
+		/**
+		 * Opens the contactmoment form modal in create/add mode
+		 */
 		openModal() {
-			this.isModalOpen = true
+			this.isContactMomentFormOpen = true
 			this.contactMomentId = null
 			contactMomentStore.setContactMomentItem(null)
-			navigationStore.setModal('contactMomentenForm')
 		},
+		/**
+		 * runs when the contact form modal closes
+		 */
 		closeModal() {
-			this.isModalOpen = false
+			this.isContactMomentFormOpen = false
+			this.isView = false
 			navigationStore.setModal(null)
 		},
-
+		// === EVENTS ===
+		/**
+		 * runs when the user clicks on the show button, and opens the contactmoment form modal in view mode
+		 * @param {{id: number}} event - the contactmoment item received from the widget
+		 */
 		onShow(event) {
 			this.contactMomentId = event.id
-			this.isModalOpen = true
-			navigationStore.setModal('contactMomentenForm')
+			this.isContactMomentFormOpen = true
+			this.isView = true
+		},
+		/**
+		 * runs when the user clicks on the edit button, and opens the contactmoment form modal in edit mode
+		 * @param {{id: number}} event - the contactmoment item received from the widget
+		 */
+		onEdit(event) {
+			this.contactMomentId = event.id
+			this.isContactMomentFormOpen = true
+			this.isView = false
 		},
+		/**
+		 * runs when the user clicks on the "sluiten" button, and changes the status of the contactmoment to 'gesloten'
+		 * @param {{id: number}} event - the contactmoment item received from the widget
+		 */
 		async onSluiten(event) {
-			// change status to 'gesloten'
 			const { data } = await contactMomentStore.getContactMoment(event.id)
 
 			if (data?.status === 'gesloten') {
-				console.info('Contact moment is already closed')
+				console.info('Contactmoment is already closed')
 				return
 			}
 
@@ -175,16 +197,6 @@ export default {
 
 }
 </script>
-<style>
-.icon-progress-close-dark {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLW9wYWNpdHk6LjU7ZmlsbC1ydWxlOm5vbnplcm8iIGZpbGw9IiMwMDAwMDAiIC8+DQo8L3N2Zz4=);
-}
-
-.icon-progress-close-light {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgLz4NCjwvc3ZnPg==);
-}
-
-</style>
 <style scoped>
 .contactmomentenContainer{
     display: flex;
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index a47889e..ca60f47 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -9,7 +9,8 @@ import { taakStore, navigationStore } from '../../store/store.js'
 				:loading="loading"
 				:item-menu="itemMenu"
 				@show="onShow"
-				@sluiten="onSluiten">
+				@statusClose="onCloseStatus"
+				@statusHandled="onHandledStatus">
 				<template #empty-content>
 					<NcEmptyContent name="Geen open taken">
 						<template #icon>
@@ -35,10 +36,10 @@ import { taakStore, navigationStore } from '../../store/store.js'
 			</NcButton>
 		</div>
 
-		<TakenForm v-if="isModalOpen"
+		<EditTaakForm v-if="isModalOpen"
 			:dashboard-widget="true"
 			:taak-id="taakId"
-			@save-success="closeModal"
+			@save-success="fetchTaakItems"
 			@close-modal="closeModal" />
 	</div>
 </template>
@@ -51,10 +52,13 @@ 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 TakenForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 
 export default {
 	name: 'TakenWidget',
@@ -64,6 +68,7 @@ export default {
 		NcEmptyContent,
 		NcButton,
 		Plus,
+		EditTaakForm: EditTaak,
 	},
 
 	data() {
@@ -71,14 +76,19 @@ export default {
 			loading: false,
 			isModalOpen: false,
 			taakItems: [],
+			userId: null,
 			itemMenu: {
 				show: {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
-				sluiten: {
+				statusClose: {
 					text: 'Sluiten',
-					icon: this.getSluitenIcon(),
+					icon: iconProgressClose,
+				},
+				statusHandled: {
+					text: 'Taak Afhandelen',
+					icon: iconCalendarCheckOutline,
 				},
 			},
 		}
@@ -91,13 +101,26 @@ export default {
 	},
 
 	mounted() {
-		this.fetchTaakItems()
+		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)
+			taakStore.refreshTakenList(null, true, this.userId)
 				.then(() => {
 
 					this.taakItems = taakStore.takenList.map(taak => ({
@@ -130,22 +153,14 @@ export default {
 		closeModal() {
 			this.isModalOpen = false
 			navigationStore.setModal(null)
-			this.fetchTaakItems()
 		},
 
 		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) {
+		async onCloseStatus(event) {
 			// change status to 'gesloten'
 			const { data } = await taakStore.getTaak(event.id)
 
@@ -159,6 +174,27 @@ export default {
 				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) {
diff --git a/src/views/zaakTypen/ZaakTypeDetails.vue b/src/views/zaakTypen/ZaakTypeDetails.vue
index 73abed0..10d84ed 100644
--- a/src/views/zaakTypen/ZaakTypeDetails.vue
+++ b/src/views/zaakTypen/ZaakTypeDetails.vue
@@ -7,25 +7,136 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 		<div v-if="!loading" id="app-content">
 			<div class="head">
 				<h1 class="h1">
-					{{ zaakTypeStore.zaakTypeItem?.name }}
+					{{ zaakTypeStore.zaakTypeItem?.identificatie }}
 				</h1>
 
 				<NcActions :primary="true" menu-name="Acties">
 					<template #icon>
 						<DotsHorizontal :size="20" />
 					</template>
-					<NcActionButton @click="navigationStore.setModal('zaakTypeForm')">
+					<NcActionButton @click="navigationStore.setModal('zaaktypeForm')">
 						<template #icon>
 							<Pencil :size="20" />
 						</template>
 						Bewerken
 					</NcActionButton>
-					<!-- Add more action buttons as needed -->
+					<NcActionButton @click="navigationStore.setModal('deleteZaaktype')">
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen
+					</NcActionButton>
 				</NcActions>
 			</div>
 
-			{{ zaakTypeStore.zaakTypeItem?.summary }}
+			<div class="detailGrid">
+				<div>
+					<h4>Omschrijving:</h4>
+					<span>{{ zaakTypeStore.zaakTypeItem?.omschrijving || '-' }}</span>
+				</div>
+				<div>
+					<h4>Generieke omschrijving:</h4>
+					<span>{{ zaakTypeStore.zaakTypeItem?.omschrijvingGeneriek || '-' }}</span>
+				</div>
+				<div>
+					<h4>Vertrouwelijkheidaanduiding:</h4>
+					<span>{{ zaakTypeStore.zaakTypeItem?.vertrouwelijkheidaanduiding || '-' }}</span>
+				</div>
+				<div>
+					<h4>Doel:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.doel || '-' }}</p>
+				</div>
+				<div>
+					<h4>Aanleiding:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.aanleiding || '-' }}</p>
+				</div>
+				<div>
+					<h4>Toelichting:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.toelichting || '-' }}</p>
+				</div>
+				<div>
+					<h4>Indicatie intern of extern:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.indicatieInternOfExtern || '-' }}</p>
+				</div>
+				<div>
+					<h4>Handeling initiatie:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.handelingInitiator || '-' }}</p>
+				</div>
+				<div>
+					<h4>Onderwerp:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.onderwerp || '-' }}</p>
+				</div>
+				<div>
+					<h4>Handeling behandelaar:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.handelingBehandelaar || '-' }}</p>
+				</div>
+				<div>
+					<h4>Doorlooptijd:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.doorlooptijd || '-' }}</p>
+				</div>
+				<div>
+					<h4>Servicenorm:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.servicenorm || '-' }}</p>
+				</div>
+				<div>
+					<h4>Opschorting en aanhouding mogelijk:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.opschortingEnAanhoudingMogelijk || '-' }}</p>
+				</div>
+				<div>
+					<h4>Verlenging mogelijk:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.verlengingMogelijk || '-' }}</p>
+				</div>
+				<div>
+					<h4>Verlengingstermijn:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.verlengingstermijn || '-' }}</p>
+				</div>
+				<div>
+					<h4>Publicatie indicatie:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.publicatieIndicatie || '-' }}</p>
+				</div>
+				<div>
+					<h4>Publicatietekst:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.publicatietekst || '-' }}</p>
+				</div>
+				<div>
+					<h4>Producten of diensten:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.productenOfDiensten || '-' }}</p>
+				</div>
+				<div>
+					<h4>Selectielijst proces type:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.selectielijstProcestype || '-' }}</p>
+				</div>
+				<div>
+					<h4>Referentieproces:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.referentieproces || '-' }}</p>
+				</div>
+				<div>
+					<h4>Catalogus:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.catalogus || '-' }}</p>
+				</div>
+				<div>
+					<h4>Begin geldigheid:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.beginGeldigheid || '-' }}</p>
+				</div>
+				<div>
+					<h4>Einde geldigheid:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.eindeGeldigheid || '-' }}</p>
+				</div>
+				<div>
+					<h4>Begin object:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.beginObject || '-' }}</p>
+				</div>
+				<div>
+					<h4>Einde object:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.eindeObject || '-' }}</p>
+				</div>
+				<div>
+					<h4>Versiedatum:</h4>
+					<p>{{ zaakTypeStore.zaakTypeItem?.versiedatum || '-' }}</p>
+				</div>
+			</div>
 		</div>
+
 		<NcLoadingIcon v-if="loading"
 			:size="100"
 			appearance="dark"
@@ -40,6 +151,7 @@ import { NcLoadingIcon, NcActions, NcActionButton } from '@nextcloud/vue'
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	name: 'ZaakTypeDetails',
@@ -55,17 +167,24 @@ export default {
 	data() {
 		return {
 			loading: true,
+			currentId: null,
 		}
 	},
 	mounted() {
 		this.fetchData()
 	},
+	updated() {
+		if (zaakTypeStore.zaakTypeItem?.id && this.currentId !== zaakTypeStore.zaakTypeItem.id) {
+			this.currentId = zaakTypeStore.zaakTypeItem.id
+			this.fetchData()
+		}
+	},
 	methods: {
 		fetchData() {
 			this.loading = true
 
 			// get current zaaktype once
-			zaakTypeStore.getZaakType(zaakTypeStore.zaakTypeItem.uuid, { setZaakTypeItem: true })
+			zaakTypeStore.getZaakType(zaakTypeStore.zaakTypeItem.id, { setItem: true })
 				.then(() => {
 					this.loading = false
 				})
@@ -97,9 +216,11 @@ h4 {
 
 .detailGrid {
 	display: grid;
-	grid-gap: 24px;
+	grid-gap: 0.5rem;
 	grid-template-columns: 1fr 1fr;
-	margin-block-start: var(--zaa-margin-50);
-	margin-block-end: var(--zaa-margin-50);
+}
+.detailGrid h4 {
+    margin: 0 !important;
+    font-size: initial !important;
 }
 </style>
diff --git a/src/views/zaakTypen/ZaakTypenList.vue b/src/views/zaakTypen/ZaakTypenList.vue
index 1727c57..db3b63e 100644
--- a/src/views/zaakTypen/ZaakTypenList.vue
+++ b/src/views/zaakTypen/ZaakTypenList.vue
@@ -22,13 +22,19 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 						</template>
 						Ververs
 					</NcActionButton>
+					<NcActionButton @click="zaakTypeStore.setZaakTypeItem(null); navigationStore.setModal('zaaktypeForm')">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						Zaaktype toevoegen
+					</NcActionButton>
 				</NcActions>
 			</div>
 
-			<div v-if="zaakTypeStore.zaakTypenList?.length && !loading">
-				<NcListItem v-for="(zaaktype, i) in zaakTypeStore.zaakTypenList"
+			<div v-if="zaakTypeStore.zaakTypeList?.length && !loading">
+				<NcListItem v-for="(zaaktype, i) in zaakTypeStore.zaakTypeList"
 					:key="`${zaaktype}${i}`"
-					:name="zaaktype?.name"
+					:name="zaaktype?.identificatie"
 					:force-display-actions="true"
 					:active="zaakTypeStore.zaakTypeItem?.id === zaaktype?.id"
 					:details="'1h'"
@@ -40,21 +46,27 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ zaaktype?.summary }}
+						{{ zaaktype?.omschrijvingGeneriek }}
 					</template>
 					<template #actions>
-						<NcActionButton @click="zaakTypeStore.setZaakTypeItem(zaaktype); navigationStore.setModal('zaakTypeForm')">
+						<NcActionButton @click="zaakTypeStore.setZaakTypeItem(zaaktype); navigationStore.setModal('zaaktypeForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
 							Bewerken
 						</NcActionButton>
+						<NcActionButton @click="zaakTypeStore.setZaakTypeItem(zaaktype); navigationStore.setModal('deleteZaaktype')">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+							Verwijderen
+						</NcActionButton>
 					</template>
 				</NcListItem>
 			</div>
 		</ul>
 
-		<div v-if="!zaakTypeStore.zaakTypenList?.length && !loading">
+		<div v-if="!zaakTypeStore.zaakTypeList?.length && !loading">
 			Geen zaaktypen gedefinieerd.
 		</div>
 
@@ -75,6 +87,8 @@ import Magnify from 'vue-material-design-icons/Magnify.vue'
 import AlphaTBoxOutline from 'vue-material-design-icons/AlphaTBoxOutline.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	name: 'ZaakTypenList',
diff --git a/src/views/zaakTypen/ZakenTypenIndex.vue b/src/views/zaakTypen/ZakenTypenIndex.vue
index fe52f1e..eafd0a9 100644
--- a/src/views/zaakTypen/ZakenTypenIndex.vue
+++ b/src/views/zaakTypen/ZakenTypenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 					<AlphaTBoxOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="zaakTypeStore.setZaakTypeItem(null); navigationStore.setModal('zaakTypeForm')">
+					<NcButton type="primary" @click="zaakTypeStore.setZaakTypeItem(null); navigationStore.setModal('zaaktypeForm')">
 						Zaaktype toevoegen
 					</NcButton>
 				</template>
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 53d42ca..48703ca 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -28,31 +28,31 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 							</template>
 							Document toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addRol')">
+						<NcActionButton @click="navigationStore.setModal('addRolToZaak')">
 							<template #icon>
 								<AccountPlus :size="20" />
 							</template>
 							Rol toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addTaak')">
+						<NcActionButton @click="navigationStore.setModal('addTaakToZaak')">
 							<template #icon>
 								<CalendarPlus :size="20" />
 							</template>
 							Taak toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addBericht')">
+						<NcActionButton @click="navigationStore.setModal('addBerichtToZaak')">
 							<template #icon>
 								<MessagePlus :size="20" />
 							</template>
 							Bericht toevoegen
 						</NcActionButton>
-						<NcActionButton @click="store.setModal('addBesluit')">
+						<NcActionButton @click="navigationStore.setModal('addBesluit')">
 							<template #icon>
 								<MessagePlus :size="20" />
 							</template>
 							Besluit toevoegen
 						</NcActionButton>
-						<NcActionButton @click="store.setModal('updateZaakStatus')">
+						<NcActionButton @click="navigationStore.setModal('updateZaakStatus')">
 							<template #icon>
 								<VectorPolylineEdit :size="20" />
 							</template>
@@ -170,17 +170,13 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 				</div>
 			</div>
 		</div>
-		<NcLoadingIcon v-if="loading"
-			:size="100"
-			appearance="dark"
-			name="Zaak details aan het laden" />
 	</div>
 </template>
 
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcLoadingIcon, NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -206,7 +202,6 @@ export default {
 	name: 'ZaakDetails',
 	components: {
 		// Components
-		NcLoadingIcon,
 		NcActions,
 		NcActionButton,
 		BTabs,
@@ -229,18 +224,17 @@ export default {
 	},
 	data() {
 		return {
+			// state
+			loading: true,
 			currentActiveZaak: null,
+			// data
 			auditTrails: [],
 			zaak: [],
-			loading: true,
 		}
 	},
 	mounted() {
-		if (zaakStore.zaakItem?.id) {
-			this.currentActiveZaak = zaakStore.zaakItem
-			this.fetchAuditTrails(zaakStore.zaakItem.id)
-		}
-		this.fetchData()
+		this.currentActiveZaak = zaakStore.zaakItem
+		this.fetchAuditTrails(zaakStore.zaakItem.id)
 	},
 	updated() {
 		if (zaakStore.zaakItem?.id && JSON.stringify(this.currentActiveZaak) !== JSON.stringify(zaakStore.zaakItem)) {
@@ -251,14 +245,9 @@ export default {
 	methods: {
 		fetchData() {
 			this.loading = true
-
-			// get current zaak once
-			zaakStore.getZaak(zaakStore.zaakItem.id, { setItem: true })
-				.then(() => {
-					this.loading = false
-				})
 		},
 		fetchAuditTrails(id) {
+
 			fetch(`/index.php/apps/zaakafhandelapp/api/zaken/${id}/audit_trail`)
 				.then(response => response.json())
 				.then(data => {
@@ -266,6 +255,8 @@ export default {
 						this.auditTrails = data
 					}
 				})
+				.finally(() => {
+				})
 		},
 	},
 }
diff --git a/src/views/zaken/ZakenList.vue b/src/views/zaken/ZakenList.vue
index ab352be..e4479ac 100644
--- a/src/views/zaken/ZakenList.vue
+++ b/src/views/zaken/ZakenList.vue
@@ -36,12 +36,12 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 					:key="`${zaak}${i}`"
 					:name="zaak?.identificatie"
 					:force-display-actions="true"
-					:active="zaakStore.zaakItem?.uuid === zaak?.uuid"
+					:active="zaakStore.zaakItem?.id === zaak?.id"
 					:details="'1h'"
-					:counter-number="44"
+					:counter-number="zaak.uiterlijkeEinddatumAfdoening ? `${Math.ceil((new Date(zaak.uiterlijkeEinddatumAfdoening) - new Date()) / (1000 * 60 * 60 * 24))} dagen` : 'no deadline'"
 					@click="zaakStore.setZaakItem(zaak)">
 					<template #icon>
-						<BriefcaseAccountOutline :class="zaakStore.zaakItem?.uuid === zaak?.uuid && 'selectedZaakIcon'"
+						<BriefcaseAccountOutline :class="zaakStore.zaakItem?.id === zaak?.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 					</template>