diff --git a/src/modals/zaken/ZaakForm.vue b/src/modals/zaken/ZaakForm.vue
index 3eacefa..4f8b57f 100644
--- a/src/modals/zaken/ZaakForm.vue
+++ b/src/modals/zaken/ZaakForm.vue
@@ -67,7 +67,7 @@ import { navigationStore, zaakStore, zaakTypeStore } from '../../store/store.js'
 			</div>
 
 			<NcButton v-if="success === null"
-				:disabled="loading || !zaak.identificatie || !zaakTypeLoading || !zaak.bronorganisatie || !zaak.verantwoordelijkeOrganisatie || !zaak.startdatum"
+				:disabled="loading || !zaak.identificatie || zaakTypeLoading || !zaak.bronorganisatie || !zaak.verantwoordelijkeOrganisatie || !zaak.startdatum"
 				type="primary"
 				@click="saveZaak()">
 				<template #icon>
@@ -122,7 +122,9 @@ export default {
 				archiefstatus: '',
 			},
 			loading: false,
-			success: false,
+			success: null,
+			error: null,
+			zaakLoading: false,
 			zaakType: {},
 			zaakTypeLoading: false,
 			archiefstatus: {
diff --git a/src/store/modules/zaakTypen.js b/src/store/modules/zaakTypen.js
deleted file mode 100644
index 282be66..0000000
--- a/src/store/modules/zaakTypen.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/* eslint-disable no-console */
-import { defineStore } from 'pinia'
-import { ZaakType } from '../../entities/index.js'
-
-const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen'
-
-export const useZaakTypeStore = defineStore('zaakTypen', {
-	state: () => ({
-		zaakTypeItem: false,
-		zaakTypeList: [],
-	}),
-	actions: {
-		setZaakTypeItem(zaakTypeItem) {
-			this.zaakTypeItem = zaakTypeItem && new ZaakType(zaakTypeItem)
-			console.log('Active zaaktype item set to ' + zaakTypeItem)
-		},
-		setZaakTypeList(zaakTypeList) {
-			this.zaakTypeList = zaakTypeList.map(
-			    (zaakTypeItem) => new ZaakType(zaakTypeItem),
-			)
-			console.log('Zaaktypen list set to ' + zaakTypeList.length + ' items')
-		},
-		/* istanbul ignore next */ // ignore this for Jest until moved into a service
-		async refreshZaakTypeList(search = null) {
-			let endpoint = apiEndpoint
-
-			if (search !== null && search !== '') {
-				endpoint = endpoint + '?_search=' + search
-			}
-
-			const response = await fetch(endpoint, {
-				method: 'GET',
-			})
-
-			if (!response.ok) {
-				console.log(response)
-				throw new Error(`HTTP error! status: ${response.status}`)
-			}
-
-			const data = (await response.json()).results
-			const entities = data.map((zaakTypeItem) => new ZaakType(zaakTypeItem))
-
-			this.setZaakTypeList(data)
-
-			return { response, data, entities }
-		},
-		// New function to get a single zaaktype
-		async getZaakType(id) {
-			const endpoint = `${apiEndpoint}/${id}`
-
-			const response = await fetch(endpoint, {
-				method: 'GET',
-			})
-
-			if (!response.ok) {
-				console.log(response)
-				throw new Error(`HTTP error! status: ${response.status}`)
-			}
-
-			const data = await response.json()
-			const entity = new ZaakType(data)
-
-			this.setZaakTypeItem(data)
-
-			return { response, data, entity }
-		},
-		// Delete a zaaktype
-		async deleteZaakType(zaakTypeItem) {
-			if (!zaakTypeItem.id) {
-				throw new Error('No zaaktype item to delete')
-			}
-
-			const endpoint = `${apiEndpoint}/${zaakTypeItem.id}`
-
-			const response = await fetch(endpoint, {
-				method: 'DELETE',
-			})
-
-			if (!response.ok) {
-				console.log(response)
-				throw new Error(`HTTP error! status: ${response.status}`)
-			}
-
-			this.refreshZaakTypeList()
-
-			return { response }
-		},
-		// Create or save a zaaktype from store
-		async saveZaakType(zaakTypeItem) {
-			if (!zaakTypeItem) {
-				throw new Error('No zaaktype item to save')
-			}
-
-			const isNewZaakType = !zaakTypeItem.id
-			const endpoint = isNewZaakType
-				? `${apiEndpoint}`
-				: `${apiEndpoint}/${zaakTypeItem.id}`
-			const method = isNewZaakType ? 'POST' : 'PUT'
-
-			const response = await fetch(
-				endpoint,
-				{
-					method,
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(zaakTypeItem),
-				},
-			)
-
-			if (!response.ok) {
-				console.log(response)
-				throw new Error(`HTTP error! status: ${response.status}`)
-			}
-
-			const data = await response.json()
-			const entity = new ZaakType(data)
-
-			this.setZaakTypeItem(data)
-			this.refreshZaakTypeList()
-
-			return { response, data, entity }
-		},
-	},
-})
diff --git a/src/store/modules/zaakTypen.spec.js b/src/store/modules/zaakTypen.spec.ts
similarity index 67%
rename from src/store/modules/zaakTypen.spec.js
rename to src/store/modules/zaakTypen.spec.ts
index 412ca45..35f5cb5 100644
--- a/src/store/modules/zaakTypen.spec.js
+++ b/src/store/modules/zaakTypen.spec.ts
@@ -2,7 +2,7 @@
 import { setActivePinia, createPinia } from 'pinia'
 
 import { useZaakTypeStore } from './zaakTypen.js'
-import { ZaakType, mockZaakTypen } from '../../entities/index.js'
+import { ZaakType, mockZaakType } from '../../entities/index.js'
 
 describe('ZaakTypen Store', () => {
 	beforeEach(() => {
@@ -12,10 +12,10 @@ describe('ZaakTypen Store', () => {
 	it('sets zaakType item correctly', () => {
 		const store = useZaakTypeStore()
 
-		store.setZaakTypeItem(mockZaakTypen()[0])
+		store.setZaakTypeItem(mockZaakType()[0])
 
 		expect(store.zaakTypeItem).toBeInstanceOf(ZaakType)
-		expect(store.zaakTypeItem).toEqual(mockZaakTypen()[0])
+		expect(store.zaakTypeItem).toEqual(mockZaakType()[0])
 
 		expect(store.zaakTypeItem.validate().success).toBe(true)
 	})
@@ -23,13 +23,13 @@ describe('ZaakTypen Store', () => {
 	it('sets zaakTypen list correctly', () => {
 		const store = useZaakTypeStore()
 
-		store.setZaakTypeList(mockZaakTypen())
+		store.setZaakTypeList(mockZaakType())
 
-		expect(store.zaakTypeList).toHaveLength(mockZaakTypen().length)
+		expect(store.zaakTypeList).toHaveLength(mockZaakType().length)
 
 		store.zaakTypeList.forEach((item, index) => {
 			expect(item).toBeInstanceOf(ZaakType)
-			expect(item).toEqual(mockZaakTypen()[index])
+			expect(item).toEqual(mockZaakType()[index])
 			expect(item.validate().success).toBe(true)
 		})
 	})
diff --git a/src/store/modules/zaakTypen.ts b/src/store/modules/zaakTypen.ts
new file mode 100644
index 0000000..e56af62
--- /dev/null
+++ b/src/store/modules/zaakTypen.ts
@@ -0,0 +1,176 @@
+import { defineStore } from 'pinia'
+import { TZaakType, ZaakType } from '../../entities/index.js'
+
+const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen'
+
+type TOptions = {
+	/**
+	 * Save the zaaktype item to the store in 'zaakTypeItem'
+	 */
+	setItem?: boolean
+}
+
+export const useZaakTypeStore = defineStore('zaakTypen', {
+	state: () => ({
+		zaakTypeItem: null,
+		zaakTypeList: [],
+	}),
+	actions: {
+		setZaakTypeItem(zaakTypeItem: ZaakType | TZaakType) {
+			this.zaakTypeItem = zaakTypeItem && new ZaakType(zaakTypeItem)
+			console.info('Active zaaktype item set to ' + zaakTypeItem)
+		},
+		setZaakTypeList(zaakTypeList: ZaakType[] | TZaakType[]) {
+			this.zaakTypeList = zaakTypeList.map(
+			    (zaakTypeItem) => new ZaakType(zaakTypeItem),
+			)
+			console.info('Zaaktypen list set to ' + zaakTypeList.length + ' items')
+		},
+		/**
+		 * Refresh the list of zaaktype items.
+		 *
+		 * @param search - Optional search query to filter the zaaktypen list. (default: `null`)
+		 * @throws If the HTTP request fails.
+		 * @return {Promise<{ response: Response, data: TZaakType[], entities: ZaakType[] }>} The response, raw data, and entities.
+		 */
+		async refreshZaakTypeList(search: string = null): Promise<{ response: Response, data: TZaakType[], entities: ZaakType[] }> {
+			let endpoint = apiEndpoint
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '?_search=' + search
+			}
+
+			console.info('Refreshing zaaktypen list with search: ' + search)
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.error(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results as TZaakType[]
+			const entities = data.map((zaakTypeItem: TZaakType) => new ZaakType(zaakTypeItem))
+
+			this.setZaakTypeList(data)
+
+			return { response, data, entities }
+		},
+		/**
+		 * Fetch a single zaaktype item by its ID.
+		 *
+		 * @param id - The ID of the zaaktype item to fetch.
+		 * @param options - Options for fetching the zaaktype item. (default: `{}`)
+		 * @throws If the HTTP request fails.
+		 * @return {Promise<{ response: Response, data: TZaakType, entity: ZaakType }>} The response, raw data, and entity.
+		 */
+		async getZaakType(
+			id: string,
+			options: TOptions = {},
+		): Promise<{ response: Response, data: TZaakType, entity: ZaakType }> {
+			const endpoint = `${apiEndpoint}/${id}`
+
+			console.info('Fetching zaaktype item with id: ' + id)
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.error(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = await response.json()
+			const entity = new ZaakType(data)
+
+			options.setItem && this.setZaakTypeItem(data)
+
+			return { response, data, entity }
+		},
+		/**
+		 * Delete a zaaktype item from the store.
+		 *
+		 * @param zaakTypeItem - The zaaktype item to delete.
+		 * @throws If there is no zaaktype item to delete or if the zaaktype item does not have an id.
+		 * @throws If the HTTP request fails.
+		 * @return {Promise<{ response: Response }>} The response from the delete request.
+		 */
+		async deleteZaakType(zaakTypeItem: ZaakType | TZaakType): Promise<{ response: Response }> {
+			if (!zaakTypeItem) {
+				throw new Error('No zaaktype item to delete')
+			}
+			if (!zaakTypeItem.id) {
+				throw new Error('No id for zaaktype item to delete')
+			}
+
+			const endpoint = `${apiEndpoint}/${zaakTypeItem.id}`
+
+			console.info('Deleting zaaktype item with id: ' + zaakTypeItem.id)
+
+			const response = await fetch(endpoint, {
+				method: 'DELETE',
+			})
+
+			if (!response.ok) {
+				console.error(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			this.refreshZaakTypeList()
+
+			return { response }
+		},
+		/**
+		 * Save a zaaktype item to the store. If the zaaktype item does not have an id, it will be created.
+		 * Otherwise, it will be updated.
+		 *
+		 * @param zaakTypeItem - The zaaktype item to save.
+		 * @param options - Options for saving the zaaktype item. (default: `{ setItem: true }`)
+		 * @throws If there is no zaaktype item to save or if the HTTP request fails.
+		 * @return {Promise<{ response: Response, data: TZaakType, entity: ZaakType }>} The response, raw data, and entity.
+		 */
+		async saveZaakType(
+			zaakTypeItem: ZaakType | TZaakType,
+			options: TOptions = { setItem: true },
+		): Promise<{ response: Response, data: TZaakType, entity: ZaakType }> {
+			if (!zaakTypeItem) {
+				throw new Error('No zaaktype item to save')
+			}
+
+			const isNewZaakType = !zaakTypeItem.id
+			const endpoint = isNewZaakType
+				? `${apiEndpoint}`
+				: `${apiEndpoint}/${zaakTypeItem.id}`
+			const method = isNewZaakType ? 'POST' : 'PUT'
+
+			console.info('Saving zaaktype item with id: ' + zaakTypeItem.id)
+
+			const response = await fetch(
+				endpoint,
+				{
+					method,
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify(zaakTypeItem),
+				},
+			)
+
+			if (!response.ok) {
+				console.error(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = await response.json() as TZaakType
+			const entity = new ZaakType(data)
+
+			options.setItem && this.setZaakTypeItem(data)
+			this.refreshZaakTypeList()
+
+			return { response, data, entity }
+		},
+	},
+})
diff --git a/src/store/modules/zaken.ts b/src/store/modules/zaken.ts
index 188c728..da69736 100644
--- a/src/store/modules/zaken.ts
+++ b/src/store/modules/zaken.ts
@@ -7,7 +7,7 @@ type TOptions = {
 	/**
 	 * Save the zaak item to the store in 'zaakItem'
 	 */
-	setZaakItem?: boolean
+	setItem?: boolean
 }
 
 export const useZaakStore = defineStore('zaken', {
@@ -86,7 +86,7 @@ export const useZaakStore = defineStore('zaken', {
 			const data = await response.json()
 			const entity = new Zaak(data)
 
-			options.setZaakItem && this.setZaakItem(data)
+			options.setItem && this.setZaakItem(data)
 
 			return { response, data, entity }
 		},
@@ -134,7 +134,7 @@ export const useZaakStore = defineStore('zaken', {
 		 */
 		async saveZaak(
 			zaakItem: Zaak | TZaak,
-			options: TOptions = { setZaakItem: true },
+			options: TOptions = { setItem: true },
 		): Promise<{ response: Response, data: TZaak, entity: Zaak }> {
 			if (!zaakItem) {
 				throw new Error('No zaak item to save')
@@ -167,7 +167,7 @@ export const useZaakStore = defineStore('zaken', {
 			const data = await response.json() as TZaak
 			const entity = new Zaak(data)
 
-			options.setZaakItem && this.setZaakItem(data)
+			options.setItem && this.setZaakItem(data)
 			this.refreshZakenList()
 
 			return { response, data, entity }
diff --git a/src/store/store.js b/src/store/store.js
index fff5af9..41eff4f 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -2,7 +2,7 @@
 import pinia from '../pinia.js'
 import { useNavigationStore } from './modules/navigation.js'
 import { useZaakStore } from './modules/zaken.ts'
-import { useZaakTypeStore } from './modules/zaakTypen.js'
+import { useZaakTypeStore } from './modules/zaakTypen.ts'
 import { useKlantStore } from './modules/klanten.js'
 import { useTaakStore } from './modules/taak.js'
 import { useBerichtStore } from './modules/berichten.js'
diff --git a/src/views/zaakTypen/ZaakTypeDetails.vue b/src/views/zaakTypen/ZaakTypeDetails.vue
index a639169..73abed0 100644
--- a/src/views/zaakTypen/ZaakTypeDetails.vue
+++ b/src/views/zaakTypen/ZaakTypeDetails.vue
@@ -1,78 +1,72 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { navigationStore, zaakTypeStore } from '../../store/store.js'
 </script>
 
 <template>
 	<div class="detailContainer">
 		<div v-if="!loading" id="app-content">
-			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div class="head">
 				<h1 class="h1">
-					{{ zaaktype.name }}
+					{{ zaakTypeStore.zaakTypeItem?.name }}
 				</h1>
-				<div class="grid">
-					<div class="gridContent">
-						<h4>Sammenvatting:</h4>
-						<span>{{ zaaktype.summary }}</span>
-					</div>
-				</div>
+
+				<NcActions :primary="true" menu-name="Acties">
+					<template #icon>
+						<DotsHorizontal :size="20" />
+					</template>
+					<NcActionButton @click="navigationStore.setModal('zaakTypeForm')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton>
+					<!-- Add more action buttons as needed -->
+				</NcActions>
 			</div>
+
+			{{ zaakTypeStore.zaakTypeItem?.summary }}
 		</div>
 		<NcLoadingIcon v-if="loading"
 			:size="100"
 			appearance="dark"
-			name="Zaak type details aan het laden" />
+			name="Zaaktype details aan het laden" />
 	</div>
 </template>
 
 <script>
-import { NcLoadingIcon } from '@nextcloud/vue'
+// Components
+import { NcLoadingIcon, NcActions, NcActionButton } from '@nextcloud/vue'
+
+// Icons
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 export default {
 	name: 'ZaakTypeDetails',
 	components: {
+		// Components
 		NcLoadingIcon,
-	},
-	props: {
-		zaaktypeId: {
-			type: String,
-			required: true,
-		},
+		NcActions,
+		NcActionButton,
+		// Icons
+		DotsHorizontal,
+		Pencil,
 	},
 	data() {
 		return {
-			zaaktype: [],
-			loading: false,
+			loading: true,
 		}
 	},
-	watch: {
-		zaaktypeId: {
-			handler(zaaktypeId) {
-				this.fetchData(zaaktypeId)
-			},
-			deep: true,
-		},
-	},
 	mounted() {
-		this.fetchData(store.zaakTypeItem)
+		this.fetchData()
 	},
 	methods: {
-		fetchData(zaaktypeId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen/' + zaaktypeId,
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.zaaktype = data
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			// get current zaaktype once
+			zaakTypeStore.getZaakType(zaakTypeStore.zaakTypeItem.uuid, { setZaakTypeItem: true })
+				.then(() => {
 					this.loading = false
 				})
 		},
@@ -80,33 +74,32 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 h4 {
-  font-weight: bold
+	font-weight: bold;
 }
 
-.h1 {
-  display: block !important;
-  font-size: 2em !important;
-  margin-block-start: 0.67em !important;
-  margin-block-end: 0.67em !important;
-  margin-inline-start: 0px !important;
-  margin-inline-end: 0px !important;
-  font-weight: bold !important;
-  unicode-bidi: isolate !important;
+.head {
+	display: flex;
+	justify-content: space-between;
 }
 
-.grid {
-  display: grid;
-  grid-gap: 24px;
-  grid-template-columns: 1fr 1fr;
-  margin-block-start: var(--zaa-margin-50);
-  margin-block-end: var(--zaa-margin-50);
+.h1 {
+	display: block !important;
+	font-size: 2em !important;
+	margin-block-start: 0.67em !important;
+	margin-block-end: 0.67em !important;
+	margin-inline-start: 0px !important;
+	margin-inline-end: 0px !important;
+	font-weight: bold !important;
+	unicode-bidi: isolate !important;
 }
 
-.gridContent {
-  display: flex;
-  gap: 25px;
+.detailGrid {
+	display: grid;
+	grid-gap: 24px;
+	grid-template-columns: 1fr 1fr;
+	margin-block-start: var(--zaa-margin-50);
+	margin-block-end: var(--zaa-margin-50);
 }
-
 </style>
diff --git a/src/views/zaakTypen/ZaakTypenList.vue b/src/views/zaakTypen/ZaakTypenList.vue
index 06930ad..2d5e245 100644
--- a/src/views/zaakTypen/ZaakTypenList.vue
+++ b/src/views/zaakTypen/ZaakTypenList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { navigationStore, zaakTypeStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -16,69 +16,70 @@ import { navigationStore } from '../../store/store.js'
 					<Magnify :size="20" />
 				</NcTextField>
 				<NcActions>
-					<NcActionButton @click="fetchData()">
+					<NcActionButton @click="zaakTypeStore.refreshZaakTypenList()">
 						<template #icon>
 							<Refresh :size="20" />
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="store.setModal('addZaakType')">
-						<template #icon>
-							<Plus :size="20" />
-						</template>
-						Zaaktype toevoegen
-					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="!loading">
-				<NcListItem v-for="(zaaktypen, i) in zaakTypenList.results"
-					:key="`${zaaktypen}${i}`"
-					:name="zaaktypen?.name"
-					:active="store.zaakTypeItem === zaaktypen?.id"
+
+			<div v-if="!!zaakTypeStore.zaakTypenList?.length">
+				<NcListItem v-for="(zaaktype, i) in zaakTypeStore.zaakTypenList"
+					:key="`${zaaktype}${i}`"
+					:name="zaaktype?.name"
+					:force-display-actions="true"
+					:active="zaakTypeStore.zaakTypeItem?.id === zaaktype?.id"
 					:details="'1h'"
 					:counter-number="44"
-					@click="store.setZaakTypeItem(zaaktypen.id)">
+					@click="zaakTypeStore.setZaakTypeItem(zaaktype)">
 					<template #icon>
-						<AlphaTBoxOutline :class="store.zaakTypenItem === zaaktypen.id && 'selectedZaakIcon'"
+						<AlphaTBoxOutline :class="zaakTypeStore.zaakTypeItem?.id === zaaktype?.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ zaaktypen?.summary }}
+						{{ zaaktype?.summary }}
 					</template>
 					<template #actions>
-						<NcActionButton>
-							Button one
-						</NcActionButton>
-						<NcActionButton>
-							Button two
-						</NcActionButton>
-						<NcActionButton>
-							Button three
+						<NcActionButton @click="zaakTypeStore.setZaakTypeItem(zaaktype); navigationStore.setModal('zaakTypeForm')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
 						</NcActionButton>
 					</template>
 				</NcListItem>
 			</div>
 		</ul>
 
+		<div v-if="!zaakTypeStore.zaakTypenList.length">
+			No zaaktypen have been defined yet.
+		</div>
+
 		<NcLoadingIcon v-if="loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
-			name="Zaken aan het laden" />
+			name="Zaaktypen aan het laden" />
 	</NcAppContentList>
 </template>
+
 <script>
+// Components
 import { NcListItem, NcActions, NcActionButton, NcAppContentList, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 
+// Icons
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import AlphaTBoxOutline from 'vue-material-design-icons/AlphaTBoxOutline.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 export default {
 	name: 'ZaakTypenList',
 	components: {
+		// Components
 		NcListItem,
 		NcActions,
 		NcActionButton,
@@ -88,45 +89,31 @@ export default {
 		// Icons
 		AlphaTBoxOutline,
 		Magnify,
-		Plus,
 		Refresh,
+		Pencil,
 	},
 	data() {
 		return {
 			search: '',
-			loading: true,
-			zaakTypenList: [],
+			loading: false,
 		}
 	},
 	mounted() {
-		this.fetchData()
+		this.loading = true
+
+		zaakTypeStore.refreshZaakTypenList()
+			.then(() => {
+				this.loading = false
+			})
 	},
 	methods: {
-		fetchData(newPage) {
-			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen',
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.zaakTypenList = data
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.loading = false
-				})
-		},
 		clearText() {
 			this.search = ''
 		},
 	},
 }
 </script>
+
 <style>
 .listHeader {
     position: sticky;
diff --git a/src/views/zaakTypen/ZakenTypenIndex.vue b/src/views/zaakTypen/ZakenTypenIndex.vue
index 8621243..56e45bb 100644
--- a/src/views/zaakTypen/ZakenTypenIndex.vue
+++ b/src/views/zaakTypen/ZakenTypenIndex.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { navigationStore, zaakTypeStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { navigationStore } from '../../store/store.js'
 			<ZaakTypeList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!store.zaakTypeItem || navigationStore.selected != 'zaakTypen' "
+			<NcEmptyContent v-if="!zaakTypeStore.zaakTypeItem || navigationStore.selected != 'zaakTypen' "
 				class="detailContainer"
 				name="Geen Zaaktype"
 				description="Nog geen zaaktype geselecteerd">
@@ -16,12 +16,12 @@ import { navigationStore } from '../../store/store.js'
 					<AlphaTBoxOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('zaakTypeAdd')">
-						Zaaktype toeveogen
+					<NcButton type="primary" @click="zaakTypeStore.setZaakTypeItem(null); navigationStore.setModal('zaakTypeForm')">
+						Zaaktype toevoegen
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<ZaakTypeDetails v-if="store.zaakTypeItem && navigationStore.selected === 'zaakTypen'" :zaaktype-id="store.zaakTypeItem" />
+			<ZaakTypeDetails v-if="zaakTypeStore.zaakTypeItem && navigationStore.selected === 'zaakTypen'" />
 		</template>
 	</NcAppContent>
 </template>
@@ -31,7 +31,7 @@ import { NcAppContent, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import ZaakTypeList from './ZaakTypenList.vue'
 import ZaakTypeDetails from './ZaakTypeDetails.vue'
 // eslint-disable-next-line n/no-missing-import
-import AlphaTBoxOutline from 'vue-material-design-icons/AlphaTBoxOutline'
+import AlphaTBoxOutline from 'vue-material-design-icons/AlphaTBoxOutline.vue'
 
 export default {
 	name: 'ZakenTypenIndex',
@@ -41,7 +41,6 @@ export default {
 		NcButton,
 		ZaakTypeList,
 		ZaakTypeDetails,
-		AlphaTBoxOutline,
 	},
 }
 </script>
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 2681876..e6e8a1b 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -207,7 +207,7 @@ export default {
 			this.loading = true
 
 			// get current zaak once
-			zaakStore.getZaak(zaakStore.zaakItem.uuid, { setZaakItem: true })
+			zaakStore.getZaak(zaakStore.zaakItem.uuid, { setItem: true })
 				.then(() => {
 					this.loading = false
 				})