diff --git a/.github/workflows/pull-request-from-branch-check.yaml b/.github/workflows/pull-request-from-branch-check.yaml
new file mode 100644
index 0000000..a40f09f
--- /dev/null
+++ b/.github/workflows/pull-request-from-branch-check.yaml
@@ -0,0 +1,18 @@
+name: Main Branch Protection
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check branch
+        run: |
+          if [[ ${GITHUB_HEAD_REF} != development ]] && [[ ${GITHUB_HEAD_REF} != documentation ]] && ! [[ ${GITHUB_HEAD_REF} =~ ^hotfix/ ]]; 
+          then
+            echo "Error: Pull request must come from 'development', 'documentation' or 'hotfix/' branch"
+            exit 1
+          fi
diff --git a/.github/workflows/pull-request-lint-check.yaml b/.github/workflows/pull-request-lint-check.yaml
new file mode 100644
index 0000000..0c04e87
--- /dev/null
+++ b/.github/workflows/pull-request-lint-check.yaml
@@ -0,0 +1,20 @@
+name: Lint Check
+
+on:
+  pull_request:
+    branches:
+      - never
+
+jobs:
+  lint-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Linting
+        run: npm run lint
diff --git a/appinfo/routes.php b/appinfo/routes.php
index aa002e4..34334e4 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -24,6 +24,7 @@
 	 	'taken' => ['url' => 'api/taken'],
 	 	'klanten' => ['url' => 'api/klanten'],
 	 	'berichten' => ['url' => 'api/berichten'],
+		'contactmomenten' => ['url' => 'api/contactmomenten'],
 		
 	 ],
 	'routes' => [
diff --git a/composer.json b/composer.json
index 3ddf648..d89172d 100644
--- a/composer.json
+++ b/composer.json
@@ -44,7 +44,9 @@
 		"bamarni/composer-bin-plugin": "^1.8",
 		"elasticsearch/elasticsearch": "^v8.14.0",
 		"guzzlehttp/guzzle": "^7.0",
-		"symfony/uid": "^6.4"
+		"symfony/uid": "^6.4",
+		"symfony/yaml": "^6.4"
+
 	},
 	"require-dev": {
 		"nextcloud/ocp": "dev-stable29",
diff --git a/lib/Controller/ContactMomentenController.php b/lib/Controller/ContactMomentenController.php
new file mode 100644
index 0000000..05a1fd4
--- /dev/null
+++ b/lib/Controller/ContactMomentenController.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace OCA\ZaakAfhandelApp\Controller;
+
+use OCA\ZaakAfhandelApp\Service\ObjectService;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\IRequest;
+
+/**
+ * Controller for handling contact moments (contactmomenten) operations
+ */
+class ContactMomentenController extends Controller
+{
+    public function __construct(
+		$appName,
+		IRequest $request,
+        private readonly ObjectService $objectService,
+	)
+    {
+        parent::__construct($appName, $request);
+    }
+
+	/**
+	 * Return (and search) all contact moments
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function index(): JSONResponse
+	{
+		 // Retrieve all request parameters
+		 $requestParams = $this->request->getParams();
+
+		 // Fetch contact moments based on filters and order
+		 $data = $this->objectService->getResultArrayForRequest('contactmomenten', $requestParams);
+ 
+		 // Return JSON response
+		 return new JSONResponse($data);
+	}
+
+	/**
+	 * Read a single contact moment
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function show(string $id): JSONResponse
+	{
+        // Fetch the contact moment by its ID
+        $object = $this->objectService->getObject('contactmomenten', $id);
+
+        // Return the contact moment as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Create a contact moment
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function create(): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+        // Remove the 'id' field if it exists, as we're creating a new contact moment
+        unset($data['id']);
+
+        // Save the new contact moment
+        $object = $this->objectService->saveObject('contactmomenten', $data);
+        
+        // Return the created contact moment as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Update a contact moment
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function update(string $id): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+        // Save the updated contact moment
+        $object = $this->objectService->saveObject('contactmomenten', $data);
+        
+        // Return the updated contact moment as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Delete a contact moment
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function destroy(string $id): JSONResponse
+	{
+        // Delete the contact moment
+        $result = $this->objectService->deleteObject('contactmomenten', $id);
+
+        // Return the result as a JSON response
+		return new JSONResponse(['success' => $result], $result === true ? '200' : '404');
+	}
+
+	/**
+     * Get audit trail for a specific contact moment
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+     */
+    public function getAuditTrail(string $id): JSONResponse
+    {
+        $auditTrail = $this->objectService->getAuditTrail('contactmomenten', $id);
+        return new JSONResponse($auditTrail);
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 6159537..91c1b3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,10 @@
                 "ts-loader": "^9.5.1",
                 "typescript": "^5.5.4",
                 "vue-jest": "^3.0.7"
+            },
+            "engines": {
+                "node": "^20.0.0",
+                "npm": "^10.0.0"
             }
         },
         "node_modules/@ampproject/remapping": {
diff --git a/package.json b/package.json
index 88ee6e6..2be7d13 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,10 @@
     "name": "zaakafhandelapp",
     "version": "1.0.0",
     "license": "AGPL-3.0-or-later",
+    "engines": {
+        "node": "^20.0.0",
+        "npm": "^10.0.0"
+    },
     "scripts": {
         "build": "NODE_ENV=production webpack --config webpack.config.js --progress",
         "dev": "NODE_ENV=development webpack --config webpack.config.js --progress",
diff --git a/src/entities/zaak/zaak.mock.ts b/src/entities/zaak/zaak.mock.ts
index 020c8f5..8e5197d 100644
--- a/src/entities/zaak/zaak.mock.ts
+++ b/src/entities/zaak/zaak.mock.ts
@@ -25,6 +25,7 @@ export const mockZaakData = (): TZaak[] => [
 		laatsteBetaaldatum: '2019-08-24T14:15:22Z',
 		selectielijstklasse: 'http://example.com',
 		hoofdzaak: 'http://example.com',
+		klant: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
 	},
 ]
 
diff --git a/src/entities/zaak/zaak.ts b/src/entities/zaak/zaak.ts
index ba1ff03..57a1515 100644
--- a/src/entities/zaak/zaak.ts
+++ b/src/entities/zaak/zaak.ts
@@ -25,6 +25,7 @@ export class Zaak implements TZaak {
 	public laatsteBetaaldatum: string
 	public selectielijstklasse: string
 	public hoofdzaak: string
+	public klant: string
 
 	constructor(source: TZaak) {
 		this.id = source.id || ''
@@ -49,6 +50,7 @@ export class Zaak implements TZaak {
 		this.laatsteBetaaldatum = source.laatsteBetaaldatum || ''
 		this.selectielijstklasse = source.selectielijstklasse || ''
 		this.hoofdzaak = source.hoofdzaak || ''
+		this.klant = source.klant || ''
 	}
 
 	public validate(): SafeParseReturnType<TZaak, unknown> {
@@ -75,6 +77,7 @@ export class Zaak implements TZaak {
 			laatsteBetaaldatum: z.string(),
 			selectielijstklasse: z.string(),
 			hoofdzaak: z.string(),
+			klant: z.string(),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/zaak/zaak.types.ts b/src/entities/zaak/zaak.types.ts
index c9d45fc..791fd4a 100644
--- a/src/entities/zaak/zaak.types.ts
+++ b/src/entities/zaak/zaak.types.ts
@@ -23,4 +23,5 @@ export type TZaak = {
     laatsteBetaaldatum: string;
     selectielijstklasse: string;
     hoofdzaak: string;
+    klant: string;
 }
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index bd37f4e..65c4e2c 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -6,20 +6,24 @@ import { navigationStore } from '../store/store.js'
 	<!-- Placeholder -->
 	<div>
 		<ZaakForm v-if="navigationStore.modal === 'zaakForm'" />
+		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
 		<EditZaakType />
 		<EditKlant />
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
 		<EditTaak />
+		<WidgetTaakForm v-if="navigationStore.modal === 'widgetTaakForm'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
 		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
+		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
 	</div>
 </template>
 
 <script>
 import ZaakForm from './zaken/ZaakForm.vue'
+import WidgetZaakForm from './zaken/WidgetZaakForm.vue'
 import EditZaakType from './zaakTypen/EditZaakType.vue'
 import EditKlant from './klanten/EditKlant.vue'
 import ViewKlantAuditTrail from './klanten/ViewKlantAuditTrail.vue'
@@ -27,22 +31,27 @@ 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'
 
 export default {
 	name: 'Modals',
 	components: {
 		ZaakForm,
+		WidgetZaakForm,
 		EditZaakType,
 		EditKlant,
 		ViewKlantAuditTrail,
 		EditBericht,
 		ViewBerichtAuditTrail,
 		EditTaak,
+		WidgetTaakForm,
 		ViewTaakAuditTrail,
 		EditRol,
 		ViewZaakAuditTrail,
+		ViewKlantRegister,
 	},
 }
 </script>
diff --git a/src/modals/berichten/EditBericht.vue b/src/modals/berichten/EditBericht.vue
index 5c44d87..0be901c 100644
--- a/src/modals/berichten/EditBericht.vue
+++ b/src/modals/berichten/EditBericht.vue
@@ -220,6 +220,8 @@ export default {
 				gebruikerID: '',
 				volgorde: '',
 			}
+			this.$emit('close-modal')
+
 		},
 		async editBericht() {
 			this.loading = true
diff --git a/src/modals/klantRegister/ViewKlantRegister.vue b/src/modals/klantRegister/ViewKlantRegister.vue
new file mode 100644
index 0000000..b742149
--- /dev/null
+++ b/src/modals/klantRegister/ViewKlantRegister.vue
@@ -0,0 +1,411 @@
+<script setup>
+import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'viewKlantRegister'"
+		name="Klant Register"
+		size="normal"
+		@closing="closeModalFromButton()">
+		<h1 class="h1">
+			{{ getKlantName(klant) }}
+		</h1>
+		<div class="detailGrid">
+			<div class="gridContent gridFullWidth">
+				<b>Klantnummer:</b>
+				<p>{{ klant.klantnummer || '-' }}</p>
+			</div>
+
+			<div class="gridContent">
+				<b>Telefoonnummer:</b>
+				<p>{{ klant.telefoonnummer || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Email adres:</b>
+				<p>{{ klant.emailadres || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Adres:</b>
+				<p>{{ klant.adres || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Functie:</b>
+				<p>{{ klant.functie || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Bedrijfsnaam:</b>
+				<p>{{ klant.bedrijfsnaam || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Website url:</b>
+				<p>{{ klant.websiteUrl || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>url:</b>
+				<p>{{ klant.url || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Bron organisatie:</b>
+				<p>{{ klant.bronorganisatie || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Aanmaakkanaal:</b>
+				<p>{{ klant.aanmaakkanaal || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Geverifieerd:</b>
+				<p>{{ klant.geverifieerd || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Subject Identificatie:</b>
+				<p>{{ klant.subjectIdentificatie || '-' }}</p>
+			</div>
+			<div class="gridContent">
+				<b>Subject Type:</b>
+				<p>{{ klant.subjectType || '-' }}</p>
+			</div>
+		</div>
+		<div class="tabContainer">
+			<BTabs content-class="mt-3" justified>
+				<BTab title="Zaken">
+					<div v-if="zaken?.length">
+						<NcListItem v-for="(zaak, key) in zaken"
+							:key="key"
+							:name="zaak.identificatie"
+							:bold="false"
+							:details="zaak.omschrijving"
+							:force-display-actions="true">
+							<template #icon>
+								<BriefcaseAccountOutline :size="44" />
+							</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">
+					<div v-if="taken?.length">
+						<NcListItem v-for="(taak, key) in taken"
+							:key="key"
+							:name="taak.title"
+							:bold="false"
+							:details="taak.description"
+							:force-display-actions="true">
+							<template #icon>
+								<CalendarMonthOutline :size="44" />
+							</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="Berichten">
+					<div v-if="berichten?.length">
+						<NcListItem v-for="(bericht, key) in berichten"
+							:key="key"
+							:name="bericht.title"
+							:bold="false"
+							:details="bericht.description"
+							:force-display-actions="true">
+							<template #icon>
+								<ChatOutline :size="44" />
+							</template>
+							<template #actions>
+								<NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('viewBericht')">
+									<template #icon>
+										<Eye :size="20" />
+									</template>
+									View details
+								</NcActionButton>
+							</template>
+						</NcListItem>
+					</div>
+					<NcEmptyContent v-else icon="icon-mail" title="Geen berichten gevonden">
+						<template #description>
+							Er zijn geen berichten gevonden voor deze klant.
+						</template>
+					</NcEmptyContent>
+				</BTab>
+				<BTab title="Contact Momenten">
+					<div v-if="contactMomenten?.length">
+						<NcListItem v-for="(contactMoment, key) in contactMomenten"
+							:key="key"
+							:name="contactMoment.title"
+							:bold="false"
+							:details="contactMoment.description"
+							:force-display-actions="true">
+							<template #icon>
+								<AccountOutline :size="44" />
+							</template>
+						</NcListItem>
+					</div>
+					<NcEmptyContent v-else icon="icon-contacts" title="Geen contactmomenten gevonden">
+						<template #description>
+							Er zijn geen contactmomenten gevonden voor deze klant.
+						</template>
+					</NcEmptyContent>
+				</BTab>
+			</BTabs>
+		</div>
+		<template #actions>
+			<NcActions :primary="true" menu-name="Acties">
+				<template #icon>
+					<DotsHorizontal :size="20" />
+				</template>
+
+				<NcActionButton @click="zaakStore.setZaakItem(); zaakModalOpen = true">
+					<template #icon>
+						<BriefcaseAccountOutline :size="20" />
+					</template>
+					Zaak aanmaken
+				</NcActionButton>
+
+				<NcActionButton @click="taakStore.setTaakItem(); taakModalOpen = true">
+					<template #icon>
+						<CalendarMonthOutline :size="20" />
+					</template>
+					Taak aanmaken
+				</NcActionButton>
+
+				<NcActionButton :disabled="true" @click="berichtStore.setBerichtItem(); berichtModalOpen = true">
+					<template #icon>
+						<ChatOutline :size="20" />
+					</template>
+					Contact moment aanmaken
+				</NcActionButton>
+			</NcActions>
+
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Sluiten
+			</NcButton>
+		</template>
+
+		<WidgetZaakForm v-if="zaakModalOpen"
+			:dashboard-widget="true"
+			:selected-klant-from-widget="klant"
+			@save-success="fetchZaakItems" />
+
+		<WidgetTaakForm v-if="taakModalOpen"
+			:dashboard-widget="true"
+			:selected-klant-from-widget="klant"
+			@save-success="fetchTaakItems" />
+	</NcDialog>
+</template>
+
+<script>
+// Components
+import { BTabs, BTab } from 'bootstrap-vue'
+import {
+	NcButton,
+	NcDialog,
+	NcEmptyContent,
+	NcListItem,
+	NcActions,
+	NcActionButton,
+} from '@nextcloud/vue'
+
+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 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 WidgetZaakForm from '../../modals/zaken/WidgetZaakForm.vue'
+
+export default {
+	name: 'ViewKlantRegister',
+	components: {
+		NcDialog,
+		NcButton,
+		NcActionButton,
+		NcEmptyContent,
+		NcListItem,
+		BTabs,
+		BTab,
+		Cancel,
+		BriefcaseAccountOutline,
+		CalendarMonthOutline,
+		ChatOutline,
+		AccountOutline,
+		Eye,
+		DotsHorizontal,
+		WidgetTaakForm,
+		WidgetZaakForm,
+	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			required: false,
+		},
+		klantId: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			klant: {},
+			zaken: [],
+			taken: [],
+			berichten: [],
+			auditTrails: [],
+			contactMomenten: [],
+			zaakModalOpen: false,
+			taakModalOpen: false,
+			berichtModalOpen: false,
+			hasUpdated: false,
+			currentActiveKlant: {},
+		}
+	},
+	mounted() {
+		if (klantStore.widgetKlantId) {
+			this.currentActiveKlant = klantStore.widgetKlantId
+			this.fetchKlantData(klantStore.widgetKlantId)
+		}
+	},
+	updated() {
+		if (klantStore.widgetKlantId && this.currentActiveKlant !== klantStore.widgetKlantId) {
+			this.currentActiveKlant = klantStore.widgetKlantId
+			this.fetchKlantData(klantStore.widgetKlantId)
+		}
+	},
+	methods: {
+
+		fetchKlantData(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				.then(response => response.json())
+				.then(data => {
+					this.klant = data
+				})
+
+			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
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching klant data:', error)
+				})
+		},
+
+		fetchTaakItems() {
+			this.taakModalOpen = false
+			this.loading = true
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${this.klantId}/taken`)
+				.then(response => response.json())
+				.then(data => {
+					this.taken = data.results
+				})
+		},
+		fetchZaakItems() {
+			this.zaakModalOpen = false
+			this.loading = true
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${this.klantId}/zaken`)
+				.then(response => response.json())
+				.then(data => {
+					this.zaken = data.results
+				})
+		},
+
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		openLink(url, target) {
+			window.open(url, target)
+		},
+		getKlantName(klant) {
+			return klant?.type === 'persoon' ? `${klant?.voornaam} ${klant?.tussenvoegsel} ${klant?.achternaam}` : klant?.bedrijfsnaam
+		},
+	},
+}
+</script>
+<style>
+.detailContainer {
+  margin-block-start: var(--zaa-margin-20);
+  margin-inline-start: var(--zaa-margin-20);
+  margin-inline-end: var(--zaa-margin-20);
+}
+
+.tabContainer > * ul > li {
+  display: flex;
+  flex: 1;
+}
+
+.tabContainer > * ul > li:hover {
+  background-color: var(--color-background-hover);
+}
+
+.tabContainer > * ul > li > a {
+  flex: 1;
+  text-align: center;
+}
+
+.tabContainer > * ul > li > .active {
+  background: transparent !important;
+  color: var(--color-main-text) !important;
+  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+}
+
+.tabContainer > * ul[role="tablist"] {
+  display: flex;
+  margin: 10px 8px 0 8px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.tabContainer > * ul[role="tablist"] > * a[role="tab"] {
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+
+.tabContainer > * div[role="tabpanel"] {
+  margin-block-start: var(--zaa-margin-10);
+}
+
+.tabPanel {
+  padding: 20px 10px;
+  min-height: 100%;
+  max-height: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.detailGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+</style>
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 06b9a75..2edec57 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -167,8 +167,10 @@ export default {
 					toelichting: taakStore.taakItem.toelichting || '',
 					klant: klantStore.klantItem?.id || '',
 				}
+				this.fetchKlanten()
 			} else {
 				this.taakItem.klant = klantStore.klantItem?.id || ''
+				this.fetchKlanten()
 			}
 			this.hasUpdated = true
 		}
diff --git a/src/modals/taken/WidgetTaakForm.vue b/src/modals/taken/WidgetTaakForm.vue
new file mode 100644
index 0000000..bb852ff
--- /dev/null
+++ b/src/modals/taken/WidgetTaakForm.vue
@@ -0,0 +1,382 @@
+<script setup>
+import { taakStore, navigationStore, klantStore } 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 />
+
+			<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 v-if="executorOptions.value.id === 'medewerker'">
+				<NcSelect
+					v-bind="mederwerkerOptions"
+					v-model="mederwerkerOptions.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"
+				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,
+	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,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
+	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			required: false,
+		},
+		selectedKlantFromWidget: {
+			type: Object,
+			default: null,
+			required: false,
+		},
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			klantenLoading: false,
+			klanten: [],
+			medewerkersLoading: false,
+			medewerkers: [],
+			taakItem: {
+				title: '',
+				type: '',
+				status: '',
+				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',
+					},
+				],
+			},
+			mederwerkerOptions: {
+				options: [
+					{
+						id: '0-john',
+						displayName: 'John',
+						isNoUser: false,
+						subname: 'john@example.org',
+						icon: '',
+						// Example of how to show the user status within the option
+						user: '0-john',
+						preloadedUserStatus: {
+							icon: '',
+							status: 'online',
+							message: 'I am online',
+						},
+					},
+					{
+						id: '0-emma',
+						displayName: 'Emma',
+						isNoUser: false,
+						subname: 'emma@example.org',
+						icon: '',
+					},
+					{
+						id: '0-olivia',
+						displayName: 'Olivia',
+						isNoUser: false,
+						subname: 'olivia@example.org',
+						icon: '',
+					},
+					{
+						id: '0-noah',
+						displayName: 'Noah',
+						isNoUser: false,
+						subname: 'noah@example.org',
+						icon: '',
+					},
+					{
+						id: '0-oliver',
+						displayName: 'Oliver',
+						isNoUser: false,
+						subname: 'oliver@example.org',
+						icon: '',
+					},
+					{
+						id: '1-admin',
+						displayName: 'Admin',
+						isNoUser: true,
+						subname: null,
+						iconName: 'Group icon',
+					},
+					{
+						id: '2-org@example.org',
+						displayName: 'Organization',
+						isNoUser: true,
+						subname: 'org@example.org',
+						iconName: 'Email icon',
+					},
+				],
+			},
+		}
+	},
+	mounted() {
+		this.fetchKlanten()
+		// this.fetchMedewerkers()
+	},
+	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 || '',
+					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: '',
+				onderwerp: '',
+				toelichting: '',
+				klant: '',
+			}
+			if (this.dashboardWidget === true) {
+				this.$emit('save-success')
+			} else {
+				navigationStore.setModal(false)
+				this.$emit('close-modal')
+			}
+		},
+		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() {
+			this.medewerkersLoading = true
+			fetch('/index.php/apps/zaakafhandelapp/api/taken/medewerkers')
+				.then(response => response.json())
+				.then(data => {
+					console.log(data)
+					// this.medewerkers = data
+					// this.medewerkersLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.medewerkersLoading = false
+				})
+		},
+		async editTaak() {
+			this.loading = true
+			try {
+				await taakStore.saveTaak({
+					...this.taakItem,
+					klant: this.klanten.value?.id ?? '',
+				}, 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/zaken/WidgetZaakForm.vue b/src/modals/zaken/WidgetZaakForm.vue
new file mode 100644
index 0000000..708e9cd
--- /dev/null
+++ b/src/modals/zaken/WidgetZaakForm.vue
@@ -0,0 +1,310 @@
+<script setup>
+import { navigationStore, zaakStore, zaakTypeStore, klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="zaakForm"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Zaak {{ zaakStore.zaakItem?.id ? 'aanpassen' : 'aanmaken' }}</h2>
+
+			<div v-if="success !== null">
+				<NcNoteCard v-if="success" type="success">
+					<p>Zaak succesvol {{ zaak.id ? 'aangepast' : 'aangemaakt' }}</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="!success" type="error">
+					<p>Zaak niet succesvol {{ zaak.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="zaakLoading"
+					label="Identificatie"
+					maxlength="255"
+					:value.sync="zaak.identificatie"
+					required />
+				<NcTextField :disabled="zaakLoading"
+					label="Omschrijving"
+					maxlength="255"
+					:value.sync="zaak.omschrijving" />
+				<NcTextField :disabled="zaakLoading"
+					label="Bronorganisatie"
+					maxlength="9"
+					:value.sync="zaak.bronorganisatie"
+					required />
+				<NcTextField :disabled="zaakLoading"
+					label="VerantwoordelijkeOrganisatie"
+					maxlength="9"
+					:value.sync="zaak.verantwoordelijkeOrganisatie"
+					required />
+				<NcTextField :disabled="zaakLoading"
+					label="Startdatum"
+					maxlength="9"
+					:value.sync="zaak.startdatum"
+					required />
+				<NcSelect v-bind="zaakType"
+					v-model="zaakType.value"
+					input-label="Zaaktype"
+					:loading="zaakTypeLoading"
+					:disabled="true ||zaakLoading || zaakTypeLoading"
+					required />
+				<NcSelect v-bind="archiefstatus"
+					v-model="archiefstatus.value"
+					input-label="Archiefstatus"
+					:disabled="zaakLoading"
+					required />
+				<NcSelect
+					v-bind="klanten"
+					v-model="klanten.value"
+					input-label="Klant"
+					:loading="klantenLoading"
+					:disabled="zaakLoading" />
+				<NcTextField :disabled="zaakLoading"
+					label="Registratiedatum"
+					maxlength="255"
+					:value.sync="zaak.registratiedatum" />
+				<NcTextArea :disabled="zaakLoading"
+					label="Toelichting"
+					:value.sync="zaak.toelichting" />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="loading || !zaak.identificatie || zaakTypeLoading || !zaak.bronorganisatie || !zaak.verantwoordelijkeOrganisatie || !zaak.startdatum"
+				type="primary"
+				@click="saveZaak()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-else-if="!loading && zaak.id" :size="20" />
+					<Plus v-else-if="!loading && !zaak.id" :size="20" />
+				</template>
+				{{ zaak.id ? 'Opslaan' : 'Aanmaken' }}
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcNoteCard,
+	NcButton,
+	NcTextField,
+	NcSelect,
+	NcTextArea,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+
+// icons
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+// entities
+import { Zaak } from '../../entities/index.js'
+
+export default {
+	name: 'WidgetZaakForm',
+	components: {
+		NcModal,
+		NcTextField,
+		NcButton,
+		NcSelect,
+		NcTextArea,
+	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			default: false,
+			required: false,
+		},
+		selectedKlantFromWidget: {
+			type: Object,
+			default: null,
+			required: false,
+		},
+	},
+	data() {
+		return {
+			zaak: {
+				identificatie: '',
+				omschrijving: '',
+				zaaktype: {},
+				registratiedatum: '',
+				toelichting: '',
+				bronorganisatie: '',
+				verantwoordelijkeOrganisatie: '',
+				startdatum: '',
+				archiefstatus: '',
+				klant: '',
+			},
+			loading: false,
+			success: null,
+			error: null,
+			zaakLoading: false,
+			zaakType: {},
+			klanten: [],
+			klantenLoading: false,
+			zaakTypeLoading: false,
+			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',
+					},
+				],
+			},
+		}
+	},
+	mounted() {
+		this.setArchiefStatusOptions()
+		// this.fetchZaakType()
+		this.fetchKlanten()
+
+		// If zaakItem in the store is set. apply it to zaak in this modal.
+		if (zaakStore.zaakItem?.id) {
+			this.zaak = {
+				...this.zaak,
+				...zaakStore.zaakItem,
+			}
+		}
+	},
+	methods: {
+		closeModal() {
+			this?.dashboardWidget && this.$emit('close')
+			this.success = null
+			this.loading = false
+			this.zaak = {
+				identificatie: '',
+				omschrijving: '',
+				zaaktype: {},
+				registratiedatum: '',
+				toelichting: '',
+				bronorganisatie: '',
+				verantwoordelijkeOrganisatie: '',
+				startdatum: '',
+				archiefstatus: '',
+				klant: '',
+			}
+			if (this.dashboardWidget === true) {
+				this.$emit('save-success')
+			} else {
+				navigationStore.setModal(null)
+				this.$emit('close-modal')
+			}
+		},
+		fetchKlanten() {
+			this.klantenLoading = true
+
+			klantStore.refreshKlantenList()
+				.then(({ response, data }) => {
+					let selectedKlant = data.filter((klant) => klant?.id.toString() === zaakStore.zaakItem?.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
+				})
+		},
+		fetchZaakType() {
+			this.zaakTypeLoading = true
+
+			zaakTypeStore.refreshZaakTypenList()
+				.then(({ entities }) => {
+					const selectedZaakType = entities.find((zaakType) => zaakType.id === this.zaak.zaaktype.id)
+
+					this.zaakType = {
+						options: entities.map((zaakType) => ({
+							id: zaakType.id,
+							label: zaakType.name,
+						})),
+						value: selectedZaakType
+							? {
+								id: selectedZaakType.id,
+								label: selectedZaakType.name,
+							  }
+							: null,
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.zaakTypeLoading = false
+				})
+		},
+		setArchiefStatusOptions() {
+			const selectedArchiefStatusOption = this.archiefstatus.options.find((options) => options.id === this.zaak.archiefstatus)
+
+			if (selectedArchiefStatusOption) {
+				this.archiefstatus.value = {
+					id: selectedArchiefStatusOption.id ?? '',
+					label: selectedArchiefStatusOption.label ?? '',
+				}
+			}
+		},
+		saveZaak() {
+			this.loading = true
+
+			const newZaak = new Zaak({
+				...this.zaak,
+				archiefstatus: this.archiefstatus.value?.id || '',
+				zaaktype: this.zaakType.value?.id || '',
+				klant: this.klanten.value?.id || '',
+			})
+
+			zaakStore.saveZaak(newZaak)
+				.then(({ response }) => {
+					this.success = response.ok
+					setTimeout(this.closeModal, 2500)
+
+					this?.dashboardWidget && this.$emit('save-success')
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/store/modules/klanten.js b/src/store/modules/klanten.js
index ce929dd..7318878 100644
--- a/src/store/modules/klanten.js
+++ b/src/store/modules/klanten.js
@@ -8,6 +8,7 @@ export const useKlantStore = defineStore('klanten', {
 	state: () => ({
 		klantItem: false,
 		klantenList: [],
+		widgetKlantId: null,
 		auditTrailItem: null,
 	}),
 	actions: {
@@ -15,6 +16,10 @@ export const useKlantStore = defineStore('klanten', {
 			this.klantItem = klantItem && new Klant(klantItem)
 			console.log('Active klant item set to ' + klantItem)
 		},
+		setWidgetKlantId(widgetKlantId) {
+			this.widgetKlantId = widgetKlantId
+			console.log('Widget klant id set to ' + widgetKlantId)
+		},
 		setKlantenList(klantenList) {
 			this.klantenList = klantenList.map(
 			    (klantItem) => new Klant(klantItem),
diff --git a/src/views/klanten/KlantenIndex.vue b/src/views/klanten/KlantenIndex.vue
index 5dcd5e1..d5adc0a 100644
--- a/src/views/klanten/KlantenIndex.vue
+++ b/src/views/klanten/KlantenIndex.vue
@@ -30,8 +30,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 import { NcAppContent, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import KlantenList from './KlantenList.vue'
 import KlantDetails from './KlantDetails.vue'
-// eslint-disable-next-line n/no-missing-import
-import AccountOutline from 'vue-material-design-icons/AccountOutline'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 
 export default {
 	name: 'KlantenIndex',
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index f85042c..037623f 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -84,7 +84,14 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/chat-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/chat-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/chat-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/chat-outline.svg`
 		},
 		openModal() {
 			this.isModalOpen = true
diff --git a/src/views/widgets/OpenZakenWidget.vue b/src/views/widgets/OpenZakenWidget.vue
index 364c750..4975a8f 100644
--- a/src/views/widgets/OpenZakenWidget.vue
+++ b/src/views/widgets/OpenZakenWidget.vue
@@ -77,7 +77,14 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/briefcase-account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/briefcase-account-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/briefcase-account-outline.svg`
 		},
 		search() {
 			console.info('click')
diff --git a/src/views/widgets/OrganisatiesWidget.vue b/src/views/widgets/OrganisatiesWidget.vue
index 82375b6..d61d580 100644
--- a/src/views/widgets/OrganisatiesWidget.vue
+++ b/src/views/widgets/OrganisatiesWidget.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { klantStore } from '../../store/store.js'
+import { klantStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -7,6 +7,7 @@ import { klantStore } from '../../store/store.js'
 		<div class="itemContainer">
 			<NcDashboardWidget :items="items"
 				:loading="loading"
+				:item-menu="itemMenu"
 				@show="onShow">
 				<template #empty-content>
 					<NcEmptyContent name="Geen organisaties gevonden">
@@ -34,6 +35,11 @@ import { klantStore } from '../../store/store.js'
 				</template>
 				Zoeken
 			</NcButton>
+
+			<ViewKlantRegister v-if="isModalOpen"
+				:dashboard-widget="true"
+				:klant-id="klantStore.widgetKlantId"
+				@save-success="fetchOrganisatieItems" />
 		</div>
 	</div>
 </template>
@@ -44,6 +50,7 @@ import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextc
 import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
+import ViewKlantRegister from '../../modals/klantRegister/ViewKlantRegister.vue'
 
 export default {
 	name: 'OrganisatiesWidget',
@@ -54,13 +61,23 @@ export default {
 		NcButton,
 		Search,
 		NcTextField,
+		OfficeBuildingOutline,
+		ViewKlantRegister,
 	},
 
 	data() {
 		return {
 			loading: false,
+			isModalOpen: false,
 			organisatieItems: [],
 			searchOrganisatie: '',
+			selectedKlantId: '',
+			itemMenu: {
+				show: {
+					text: 'Bekijk',
+					icon: 'icon-toggle',
+				},
+			},
 		}
 	},
 
@@ -107,11 +124,22 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/office-building-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/office-building-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/office-building-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/office-building-outline.svg`
 		},
-		onShow() {
-			window.open('/apps/opencatalogi/catalogi', '_self')
+		onShow(item) {
+			klantStore.setWidgetKlantId(item.id)
+			this.isModalOpen = true
+			navigationStore.setModal('viewKlantRegister')
+
 		},
+
 	},
 
 }
diff --git a/src/views/widgets/PersonenWidget.vue b/src/views/widgets/PersonenWidget.vue
index ea64ed6..61ff41d 100644
--- a/src/views/widgets/PersonenWidget.vue
+++ b/src/views/widgets/PersonenWidget.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { klantStore } from '../../store/store.js'
+import { klantStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -7,6 +7,7 @@ import { klantStore } from '../../store/store.js'
 		<div class="itemContainer">
 			<NcDashboardWidget :items="items"
 				:loading="loading"
+				:item-menu="itemMenu"
 				@show="onShow">
 				<template #empty-content>
 					<NcEmptyContent name="Geen personen gevonden">
@@ -34,6 +35,11 @@ import { klantStore } from '../../store/store.js'
 				</template>
 				Zoeken
 			</NcButton>
+
+			<ViewKlantRegister v-if="isModalOpen"
+				:dashboard-widget="true"
+				:klant-id="klantStore.widgetKlantId"
+				@save-success="fetchPersonenItems" />
 		</div>
 	</div>
 </template>
@@ -44,6 +50,7 @@ import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextc
 import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import ViewKlantRegister from '../../modals/klantRegister/ViewKlantRegister.vue'
 
 export default {
 	name: 'PersonenWidget',
@@ -55,6 +62,7 @@ export default {
 		Search,
 		NcTextField,
 		AccountOutline,
+		ViewKlantRegister,
 	},
 
 	data() {
@@ -63,6 +71,13 @@ export default {
 			isModalOpen: false,
 			personenItems: [],
 			searchPerson: '',
+			selectedKlantId: '',
+			itemMenu: {
+				show: {
+					text: 'Bekijk',
+					icon: 'icon-toggle',
+				},
+			},
 		}
 	},
 
@@ -108,10 +123,21 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/account-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/account-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/account-outline.svg`
 		},
-		onShow() {
-			window.open('/apps/opencatalogi/catalogi', '_self')
+		onShow(item) {
+			klantStore.setWidgetKlantId(item.id)
+
+			this.isModalOpen = true
+			navigationStore.setModal('viewKlantRegister')
+
 		},
 	},
 
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index 1fbaa27..3cd7c39 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -27,7 +27,8 @@ import { taakStore, navigationStore } from '../../store/store.js'
 
 		<TakenForm v-if="isModalOpen"
 			:dashboard-widget="true"
-			@save-success="fetchTaakItems" />
+			@save-success="fetchTaakItems"
+			@close-modal="closeModal" />
 	</div>
 </template>
 
@@ -84,7 +85,14 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/calendar-month-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/calendar-month-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/calendar-month-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/calendar-month-outline.svg`
 		},
 		openModal() {
 			this.isModalOpen = true
diff --git a/src/views/widgets/ZakenWidget.vue b/src/views/widgets/ZakenWidget.vue
index 8af17dc..4fb032a 100644
--- a/src/views/widgets/ZakenWidget.vue
+++ b/src/views/widgets/ZakenWidget.vue
@@ -39,7 +39,7 @@ import { getTheme } from '../../services/getTheme.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 
-import ZaakForm from '../../modals/zaken/ZaakForm.vue'
+import ZaakForm from '../../modals/zaken/WidgetZaakForm.vue'
 
 export default {
 	name: 'ZakenWidget',
@@ -91,7 +91,14 @@ export default {
 		},
 		getItemIcon() {
 			const theme = getTheme()
-			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/briefcase-account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg'
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/briefcase-account-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/briefcase-account-outline.svg`
 		},
 		search() {
 			console.info('click')