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/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 497d767..625974c 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -1,17 +1,16 @@
 <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>
+			<p>Contactmoment succesvol opgeslagen</p>
 		</NcNoteCard>
 		<NcNoteCard v-if="error" type="error">
 			<p>{{ error }}</p>
@@ -28,11 +27,11 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 							Geen klant geselecteerd
 						</div>
 						<div class="statusAndStartDateContainer">
-							<div v-if="status">
-								status: {{ status }}
+							<div v-if="contactMoment.status">
+								status: {{ contactMoment.status }}
 							</div>
-							<div v-if="startDate">
-								startDate: {{ new Date(startDate).toLocaleDateString() }}
+							<div v-if="contactMoment.startDate">
+								startDate: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
 							</div>
 						</div>
 					</template>
@@ -41,6 +40,7 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 					<div>
 						<NcButton
 							:disabled="loading"
+							:loading="fetchLoading"
 							type="primary"
 							@click="openSearchKlantModal('persoon')">
 							<template #icon>
@@ -55,6 +55,7 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 					<div>
 						<NcButton
 							:disabled="loading"
+							:loading="fetchLoading"
 							type="primary"
 							@click="openSearchKlantModal('organisatie')">
 							<template #icon>
@@ -65,10 +66,11 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 					</div>
 				</div>
 
-				<div v-if="klant && !contactMomentId" class="buttonsContainer">
+				<div v-if="klant && !isView" class="buttonsContainer">
 					<div>
 						<NcButton
 							:disabled="loading"
+							:loading="fetchLoading"
 							type="primary"
 							@click="klant = null">
 							<template #icon>
@@ -81,9 +83,10 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 			</div>
 
 			<div v-if="!success" class="form-group">
-				<NcTextArea v-model="notitie"
+				<NcTextArea v-model="contactMoment.notitie"
 					label="Notitie"
 					:disabled="loading"
+					:loading="fetchLoading"
 					placeholder="Notitie" />
 			</div>
 			<div class="tabContainer">
@@ -96,6 +99,7 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 								:bold="false"
 								:details="zaak.startdatum"
 								:disabled="loading"
+								:loading="fetchLoading"
 								:active="selectedZaak === zaak.id"
 								:force-display-actions="true"
 								@click="setSelectedZaak(zaak.id)">
@@ -121,6 +125,7 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 								:bold="false"
 								:details="taak.status"
 								:disabled="loading"
+								:loading="fetchLoading"
 								:active="selectedTaak === taak.id"
 								:force-display-actions="true"
 								@click="setSelectedTaak(taak.id)">
@@ -147,6 +152,7 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 								:bold="false"
 								:details="product.omschrijving ?? 'N/A'"
 								:disabled="loading"
+								:loading="fetchLoading"
 								:active="selectedProduct === product.id"
 								:force-display-actions="true"
 								@click="setSelectedProduct(product.id)">
@@ -180,8 +186,8 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 				</template>
 				Annuleer
 			</NcButton>
-			<NcActions v-if="!contactMomentId"
-				:disabled="loading || success"
+			<NcActions v-if="!isView"
+				:disabled="loading || success || fetchLoading"
 				:primary="true"
 				menu-name="Acties">
 				<template #icon>
@@ -201,18 +207,19 @@ import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 				</NcActionButton>
 			</NcActions>
 			<NcButton
-				v-if="!contactMomentId"
+				v-if="!isView"
 				type="primary"
-				:disabled="!klant || loading || success"
+				:disabled="!klant || loading || success || fetchLoading"
 				:loading="loading"
 				@click="addContactMoment()">
 				<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"
 			:dashboard-widget="true"
 			@close-modal="closeTaakForm"
@@ -264,16 +271,30 @@ export default {
 			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: !!this.contactMomentId,
+			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: null,
+				startDate: null,
+			},
 			klantenLoading: false,
 			zaken: [],
 			taken: [],
@@ -291,10 +312,32 @@ export default {
 	},
 	mounted() {
 		if (this.contactMomentId) {
-			this.fetchContactMomentData(this.contactMomentId)
+			this.fetchData(this.contactMomentId)
 		}
 	},
 	methods: {
+		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,28 +346,32 @@ export default {
 		},
 		closeModal() {
 			navigationStore.setModal(false)
-			
+
 			this.$emit('close-modal')
 		},
 
-		// Contact moment functions
+		// Contactmoment functions
 		addContactMoment() {
 			this.loading = true
 
+			const endpoint = this.contactMomentId ? `contactmomenten/${this.contactMomentId}` : 'contactmomenten'
+			const method = this.contactMomentId ? 'PUT' : 'POST'
+
 			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,
+						...this.contactMoment,
+						notitie: this.contactMoment.notitie,
 						klant: this.klant?.id ?? '',
 						zaak: this.selectedZaak ?? '',
 						taak: this.selectedTaak ?? '',
 						product: this.selectedProduct ?? '',
-						status: this.status === 'gesloten' ? 'gesloten' : 'open',
+						status: this.contactMoment.status === 'gesloten' ? 'gesloten' : 'open',
 						startDate: new Date().toISOString(),
 					}),
 				},
@@ -365,74 +412,45 @@ 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
-				})
-		},
-
-		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
-				})
-
-			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)
-				})
-
-			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)
-				})
-
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.berichten = data.results
-					}
-				})
-				.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
-					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant audit trail:', error)
-				})
+		async fetchKlantData(id) {
+			try {
+				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				this.klant = await klantResponse.json()
+
+				// fetch all data in parallel
+				const [zakenRes, takenRes, berichtenRes, auditTrailRes] = 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`),
+				])
+
+				// parse all data
+				const [zakenData, takenData, berichtenData, auditTrailData] = await Promise.all([
+					zakenRes.json(),
+					takenRes.json(),
+					berichtenRes.json(),
+					auditTrailRes.json(),
+				])
+
+				// set data
+				if (Array.isArray(zakenData.results)) {
+					this.zaken = zakenData.results
+				}
+				if (Array.isArray(takenData.results)) {
+					this.taken = takenData.results
+				}
+				if (Array.isArray(berichtenData.results)) {
+					this.berichten = berichtenData.results
+				}
+				if (Array.isArray(auditTrailData)) {
+					this.auditTrails = auditTrailData
+				}
+
+			} catch (error) {
+				console.error('Error in fetchKlantData:', error)
+				throw error
+			}
 		},
 
 		getName(klant) {
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..aeaba9f
--- /dev/null
+++ b/src/services/icons/icons.css
@@ -0,0 +1,15 @@
+/* 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==);
+}
\ 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..dd72a16
--- /dev/null
+++ b/src/services/icons/index.js
@@ -0,0 +1,5 @@
+import { iconProgressClose as _iconProgressClose } from './icon/icon-progress-close.js'
+import { iconPencil as _iconPencil } from './icon/icon-pencil.js'
+
+export const iconProgressClose = _iconProgressClose()
+export const iconPencil = _iconPencil()
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index da2638a..7a82c6a 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,7 +106,7 @@ 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 + ' ' : ''
@@ -118,6 +122,7 @@ export default {
 					this.loading = false
 				})
 		},
+		// === ICONS ===
 		getItemIcon() {
 			const theme = getTheme()
 
@@ -129,33 +134,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 +198,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;