diff --git a/src/modals/berichten/EditBericht.vue b/src/modals/berichten/EditBericht.vue
index 5233077..5c44d87 100644
--- a/src/modals/berichten/EditBericht.vue
+++ b/src/modals/berichten/EditBericht.vue
@@ -197,7 +197,6 @@ export default {
 			setTimeout(() => {
 				this.closeModal()
 			}, 300)
-
 		},
 		closeModal() {
 			navigationStore.setModal(false)
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 3c6990d..06b9a75 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -6,7 +6,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 	<NcDialog v-if="navigationStore.modal === 'editTaak'"
 		name="Taak"
 		size="normal"
-		:can-close="false">
+		@closing="closeModalFromButton()">
 		<NcNoteCard v-if="success" type="success">
 			<p>Taak succesvol aangepast</p>
 		</NcNoteCard>
@@ -18,6 +18,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 			<NcTextField
 				:disabled="loading"
 				:value.sync="taakItem.title"
+				required
 				label="Titel"
 				maxlength="255" />
 
@@ -45,10 +46,12 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				:value.sync="taakItem.toelichting"
 				label="Toelichting" />
 
-			<NcTextField
-				:disabled="true"
-				:value="taakItem.klant"
-				label="Klant" />
+			<NcSelect
+				v-bind="klanten"
+				v-model="klanten.value"
+				input-label="Klant"
+				:loading="klantenLoading"
+				:disabled="loading" />
 		</div>
 
 		<template #actions>
@@ -65,7 +68,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading"
+				:disabled="loading || klantenLoading || !taakItem.title"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -110,19 +113,26 @@ export default {
 		Plus,
 		Help,
 	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			required: false,
+		},
+	},
 	data() {
 		return {
 			success: false,
 			loading: false,
 			error: false,
 			hasUpdated: false,
+			klantenLoading: false,
+			klanten: [],
 			taakItem: {
 				title: '',
 				type: '',
 				status: '',
 				onderwerp: '',
 				toelichting: '',
-				klant: '',
 			},
 			statusOptions: {
 				options: [
@@ -142,6 +152,9 @@ export default {
 			},
 		}
 	},
+	mounted() {
+		this.fetchKlanten()
+	},
 	updated() {
 		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
 			if (taakStore.taakItem?.id) {
@@ -161,6 +174,11 @@ export default {
 		}
 	},
 	methods: {
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
 		closeModal() {
 			navigationStore.setModal(false)
 			this.success = false
@@ -176,15 +194,46 @@ export default {
 				klant: '',
 			}
 		},
+		fetchKlanten() {
+			this.klantenLoading = true
+
+			klantStore.refreshKlantenList()
+				.then(({ response, data }) => {
+					const selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.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
+				})
+		},
 		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
diff --git a/src/sidebars/search/SearchSideBar.vue b/src/sidebars/search/SearchSideBar.vue
index 498fd70..f0b9855 100644
--- a/src/sidebars/search/SearchSideBar.vue
+++ b/src/sidebars/search/SearchSideBar.vue
@@ -1,21 +1,70 @@
 <script setup>
-import { navigationStore, searchStore, klantStore } from '../../store/store.js'
+import { navigationStore, klantStore } from '../../store/store.js'
 </script>
 
 <template>
 	<NcAppSidebar
 		name="Zoek opdracht"
-		subname="Via deze pagina kunt u zoeken binnen uw gemeente">
-		<NcAppSidebarTab id="search-tab" name="Zoeken" :order="1">
+		subname="Via deze pagina kunt u zoeken binnen uw gemeente"
+		:active.sync="activeTab">
+		<NcAppSidebarTab id="search-tab"
+			name="Zoeken"
+			:order="1">
 			<template #icon>
 				<Magnify :size="20" />
 			</template>
-			<NcTextField class="searchField"
-				:value.sync="searchStore.search"
+			<NcTextField :value.sync="klantenSearch"
 				label="Search" />
+
+			<div v-if="klantenList && !loading">
+				<NcListItem v-for="(klant, i) in klantenList"
+					:key="`${klant}${i}`"
+					:name="getName(klant)"
+					:active="klantStore.klantItem.id === klant?.id"
+					:force-display-actions="true"
+					:details="_.upperFirst(klant.type)"
+					:loading="loading">
+					<template #icon>
+						<AccountOutline :class="klantStore.klantItem === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+					</template>
+					<template #subname>
+						{{ getSubname(klant) }}
+					</template>
+					<template #actions>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setSelected('klanten')">
+							<template #icon>
+								<Eye :size="20" />
+							</template>
+							View
+						</NcActionButton>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setModal('editKlant')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
+						</NcActionButton>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setDialog('deleteKlant')">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+							Verwijderen
+						</NcActionButton>
+					</template>
+				</NcListItem>
+			</div>
+
+			<NcLoadingIcon v-if="loading"
+				class="loadingIcon"
+				:size="64"
+				appearance="dark"
+				name="Klanten aan het laden" />
 		</NcAppSidebarTab>
 
-		<NcAppSidebarTab id="share-tab" name="Personen" :order="2">
+		<NcAppSidebarTab id="personen-tab"
+			name="Personen"
+			:order="2">
 			<template #icon>
 				<AccountGroupOutline :size="20" />
 			</template>
@@ -59,27 +108,24 @@ import { navigationStore, searchStore, klantStore } from '../../store/store.js'
 				BSN
 			</NcCheckboxRadioSwitch>
 
-			<NcTextField :value.sync="klantenSearch"
+			<NcTextField :value.sync="personenSearch"
 				label="Search" />
 
-			<div v-if="klantenList">
+			<div v-if="klantenList && !personenLoading && !loading">
 				<NcListItem v-for="(klant, i) in klantenList"
 					:key="`${klant}${i}`"
-					:name="klant.voornaam || 'onbekend'"
+					:name="getName(klant)"
 					:active="klantStore.klantItem.id === klant?.id"
-					:force-display-actions="true">
+					:force-display-actions="true"
+					:details="_.upperFirst(klant.type)"
+					:loading="loading">
 					<template #icon>
 						<AccountOutline :class="klantStore.klantItem === klant.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ klant?.voorvoegsel
-							? `${klant.voorvoegsel} ${klant.achternaam}`
-							: klant?.achternaam
-								? `${klant.achternaam}`
-								: 'onbekend'
-						}}
+						{{ getSubname(klant) }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setSelected('klanten')">
@@ -103,15 +149,67 @@ import { navigationStore, searchStore, klantStore } from '../../store/store.js'
 					</template>
 				</NcListItem>
 			</div>
+
+			<NcLoadingIcon v-if="personenLoading || loading"
+				class="loadingIcon"
+				:size="64"
+				appearance="dark"
+				name="Klanten aan het laden" />
 		</NcAppSidebarTab>
 
-		<NcAppSidebarTab id="settings-tab" name="Organisaties" :order="3">
+		<NcAppSidebarTab id="organisaties-tab"
+			name="Organisaties"
+			:order="3">
 			<template #icon>
 				<OfficeBuildingOutline :size="20" />
 			</template>
-			<NcTextField class="searchField"
-				:value.sync="searchStore.search"
-				label="Naam" />
+			<NcTextField :value.sync="organisatiesSearch"
+				label="Search" />
+
+			<div v-if="klantenList && !organisatiesLoading && !loading">
+				<NcListItem v-for="(klant, i) in klantenList"
+					:key="`${klant}${i}`"
+					:name="getName(klant)"
+					:active="klantStore.klantItem.id === klant?.id"
+					:force-display-actions="true"
+					:details="_.upperFirst(klant.type)"
+					:loading="loading">
+					<template #icon>
+						<AccountOutline :class="klantStore.klantItem === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+					</template>
+					<template #subname>
+						{{ getSubname(klant) }}
+					</template>
+					<template #actions>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setSelected('klanten')">
+							<template #icon>
+								<Eye :size="20" />
+							</template>
+							View
+						</NcActionButton>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setModal('editKlant')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
+						</NcActionButton>
+						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setDialog('deleteKlant')">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+							Verwijderen
+						</NcActionButton>
+					</template>
+				</NcListItem>
+			</div>
+
+			<NcLoadingIcon v-if="organisatiesLoading || loading"
+				class="loadingIcon"
+				:size="64"
+				appearance="dark"
+				name="Klanten aan het laden" />
 		</NcAppSidebarTab>
 	</NcAppSidebar>
 </template>
@@ -124,7 +222,9 @@ import {
 	NcCheckboxRadioSwitch,
 	NcListItem,
 	NcActionButton,
+	NcLoadingIcon,
 } from '@nextcloud/vue'
+import _ from 'lodash'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import AccountGroupOutline from 'vue-material-design-icons/AccountGroupOutline.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
@@ -142,6 +242,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcListItem,
 		NcActionButton,
+		NcLoadingIcon,
 		// Icons
 		Magnify,
 		AccountGroupOutline,
@@ -150,16 +251,31 @@ export default {
 	data() {
 		return {
 			starred: false,
+			loading: false,
+			personenLoading: false,
+			organisatiesLoading: false,
 			klantenSearch: '',
+			personenSearch: '',
+			organisatiesSearch: '',
 			klantenSearchType: 'voornaam',
 			klantenList: [],
 			debouncedFetchKlanten: null, // this is a function
+			activeTab: 'search-tab',
 		}
 	},
 	watch: {
 		klantenSearch() {
 			this.debouncedFetchKlanten()
 		},
+		personenSearch() {
+			this.debouncedFetchKlanten()
+		},
+		organisatiesSearch() {
+			this.debouncedFetchKlanten()
+		},
+		activeTab() {
+			this.fetchKlanten()
+		},
 	},
 	mounted() {
 		this.fetchKlanten()
@@ -176,9 +292,48 @@ export default {
 				timer = setTimeout(() => { func.apply(this, args) }, timeout)
 			}
 		},
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.voornaam ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		getSubname(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.websiteUrl ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
 		fetchKlanten() {
+			this.loading = true
+			let activeFilter = null
+			let searchParam = null
+
+			switch (this.activeTab) {
+			case 'personen-tab':
+				activeFilter = 'persoon'
+				searchParam = this.personenSearch
+				this.personenLoading = true
+				break
+			case 'organisaties-tab':
+				activeFilter = 'organisatie'
+				searchParam = this.organisatiesSearch
+				this.organisatiesLoading = true
+				break
+			default:
+				searchParam = this.klantenSearch
+				break
+			}
+
 			const searchParams = new URLSearchParams({
-				...(this.klantenSearch && { [this.klantenSearchType]: this.klantenSearch }),
+				...(searchParam && { [this.klantenSearchType]: searchParam }),
+				...(activeFilter && { type: activeFilter }),
 			}).toString()
 
 			fetch(`/index.php/apps/zaakafhandelapp/api/klanten?${searchParams}`)
@@ -186,6 +341,23 @@ export default {
 				.then(data => {
 					this.klantenList = data?.results || []
 				})
+				.finally(() => {
+					switch (this.activeTab) {
+					case 'personen-tab':
+						this.personenLoading = false
+						this.loading = false
+
+						break
+					case 'organisaties-tab':
+						this.organisatiesLoading = false
+						this.loading = false
+
+						break
+					default:
+						this.loading = false
+						break
+					}
+				})
 		},
 	},
 }
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 2a253c1..e4c44a2 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -95,7 +95,7 @@ export const useTaakStore = defineStore('taken', {
 			return { response }
 		},
 		// Create or save a taak from store
-		async saveTaak(taakItem) {
+		async saveTaak(taakItem, widget = false) {
 			if (!taakItem) {
 				throw new Error('No taak item to save')
 			}
@@ -126,7 +126,9 @@ export const useTaakStore = defineStore('taken', {
 			const entity = new Taak(data)
 
 			this.setTaakItem(data)
-			this.refreshTakenList()
+			if (!widget) {
+				this.refreshTakenList()
+			}
 
 			return { response, data, entity }
 		},
diff --git a/src/views/klanten/KlantenList.vue b/src/views/klanten/KlantenList.vue
index 406db5a..beecbc0 100644
--- a/src/views/klanten/KlantenList.vue
+++ b/src/views/klanten/KlantenList.vue
@@ -129,7 +129,7 @@ export default {
 		},
 		getSubname(klant) {
 			if (klant.type === 'persoon') {
-				return klant?.voorvoegsel ? `${klant.voorvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
 			}
 			if (klant.type === 'organisatie') {
 				return klant?.websiteUrl ?? 'onbekend'
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index fcc659c..dd2310d 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore } from '../../store/store.js'
+import { navigationStore, taakStore, klantStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -31,8 +31,27 @@ import { navigationStore, taakStore } from '../../store/store.js'
 				</div>
 				<div class="grid">
 					<div class="gridContent">
-						<b>Sammenvatting:</b>
-						<span>{{ taakStore.taakItem.onderwerp }}</span>
+						<div>
+							<b>Sammenvatting:</b>
+							<span>{{ taakStore.taakItem.onderwerp }}</span>
+						</div>
+						<div>
+							<b>Klant:</b>
+							<span v-if="klantLoading">Loading...</span>
+							<div v-if="!klantLoading" class="buttonLinkContainer">
+								<span>{{ getKlantName(klant) }}</span>
+								<NcActions>
+									<NcActionLink :aria-label="`ga naar ${getKlantName(klant)}`"
+										:name="getKlantName(klant)"
+										@click="goToKlant()">
+										<template #icon>
+											<OpenInApp :size="20" />
+										</template>
+										{{ getKlantName(klant) }}
+									</NcActionLink>
+								</NcActions>
+							</div>
+						</div>
 					</div>
 				</div>
 
@@ -79,7 +98,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcActionLink } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
@@ -88,31 +107,40 @@ 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'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
+import OpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 
 export default {
 	name: 'TaakDetails',
 	components: {
+		NcActionLink,
 		// Icons
 		Pencil,
 		DotsHorizontal,
 		TrashCanOutline,
+		OpenInApp,
+		TimelineQuestionOutline,
+		Eye,
 	},
 	data() {
 		return {
 			currentActiveTaak: null,
 			auditTrails: [],
+			klant: [],
+			klantLoading: false,
 		}
 	},
 	mounted() {
 		if (taakStore.taakItem?.id) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
+			this.fetchKlant(taakStore.taakItem.klant)
 		}
 	},
 	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)
 		}
 	},
 	methods: {
@@ -125,6 +153,31 @@ export default {
 					}
 				})
 		},
+		getKlantName(klant) {
+			return klant?.type === 'persoon' ? `${klant?.voornaam} ${klant?.tussenvoegsel} ${klant?.achternaam}` : klant?.bedrijfsnaam
+		},
+		goToKlant() {
+			klantStore.setKlantItem(this.klant)
+			navigationStore.setSelected('klanten')
+		},
+		fetchKlant(klant) {
+			this.klantLoading = true
+
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant}`, {
+				method: 'GET',
+			})
+				.then((response) => {
+					response.json().then((data) => {
+						this.klant = data
+					})
+					this.klantLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.klantLoading = false
+				})
+
+		},
 	},
 }
 </script>
@@ -158,4 +211,9 @@ h4 {
   gap: 25px;
 }
 
+.buttonLinkContainer {
+	display: flex;
+	align-items: center;
+}
+
 </style>
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index 9be9dc5..05d9431 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -27,8 +27,7 @@ import { berichtStore, navigationStore } from '../../store/store.js'
 
 		<BerichtForm v-if="isModalOpen"
 			:dashboard-widget="true"
-			@save-success="fetchBerichtItems"
-			@close="closeModal" />
+			@save-success="fetchBerichtItems" />
 	</div>
 </template>
 
diff --git a/src/views/widgets/PersonenWidget.vue b/src/views/widgets/PersonenWidget.vue
index 8405814..66fe3aa 100644
--- a/src/views/widgets/PersonenWidget.vue
+++ b/src/views/widgets/PersonenWidget.vue
@@ -82,7 +82,7 @@ export default {
 				.then(() => {
 					this.personenItems = klantStore.klantenList.map(person => ({
 						id: person.id,
-						mainText: `${person.voornaam} ${person.achternaam}`,
+						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
 						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
 					}))
@@ -95,7 +95,7 @@ export default {
 				.then(() => {
 					this.personenItems = klantStore.klantenList.map(person => ({
 						id: person.id,
-						mainText: `${person.voornaam} ${person.achternaam}`,
+						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
 						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
 					}))
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index 1c1d8cb..ce1d0eb 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore } from '../../store/store.js'
+import { taakStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -18,12 +18,16 @@ import { taakStore } from '../../store/store.js'
 			</NcDashboardWidget>
 		</div>
 
-		<NcButton type="primary" @click="search">
+		<NcButton type="primary" @click="openModal">
 			<template #icon>
 				<Plus :size="20" />
 			</template>
 			Taak aanmaken
 		</NcButton>
+
+		<TakenForm v-if="isModalOpen"
+			:dashboard-widget="true"
+			@save-success="fetchTaakItems" />
 	</div>
 </template>
 
@@ -32,6 +36,7 @@ import { taakStore } from '../../store/store.js'
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
+import TakenForm from '../../modals/taken/EditTaak.vue'
 
 export default {
 	name: 'TakenWidget',
@@ -46,6 +51,7 @@ export default {
 	data() {
 		return {
 			loading: false,
+			isModalOpen: false,
 			taakItems: [],
 		}
 	},
@@ -75,8 +81,14 @@ export default {
 					this.loading = false
 				})
 		},
-		search() {
-			console.info('click')
+		openModal() {
+			this.isModalOpen = true
+			taakStore.setTaakItem(null)
+			navigationStore.setModal('editTaak')
+		},
+		closeModal() {
+			this.isModalOpen = false
+			navigationStore.setModal(null)
 		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')