diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index 579500c..1f68343 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -31,14 +31,14 @@ import { navigationStore, taakStore } from '../../store/store.js'
 				</NcActions>
 			</div>
 			<div v-if="taakStore.takenList">
-				<NcListItem v-for="(taak, i) in taakStore.takenList.results"
+				<NcListItem v-for="(taak, i) in taakStore.takenList"
 					:key="`${taak}${i}`"
 					:name="taak?.title"
 					:force-display-actions="true"
 					:active="taakStore.taakItem?.id === taak?.id"
 					:details="'1h'"
 					:counter-number="44"
-					@click="navigationStore.setTaakItem(taak)">
+					@click="taakStore.setTaakItem(taak)">
 					<template #icon>
 						<CalendarMonthOutline :class="taakStore.taakItem?.id === taak.id && 'selectedZaakIcon'"
 							disable-menu
diff --git a/src/views/widgets/OpenZakenWidget.vue b/src/views/widgets/OpenZakenWidget.vue
index dc1f2f3..82e2506 100644
--- a/src/views/widgets/OpenZakenWidget.vue
+++ b/src/views/widgets/OpenZakenWidget.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { zaakStore } from '../../store/store.js'
+</script>
+
 <template>
 	<div class="openZakenContainer">
 		<div class="itemContainer">
@@ -41,69 +45,7 @@ export default {
 	data() {
 		return {
 			loading: false,
-			zaakItems: [
-				{
-					id: '1',
-					mainText: 'Klant kan niet meer inloggen',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-				},
-				{
-					id: '2',
-					mainText: 'Klant heeft meerdere meldingen gemaakt',
-					subText: 'Informatie verzoek',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '3',
-					mainText: 'Geluidsoverlast',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '4',
-					mainText: 'Klant kan niet meer inloggen',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-				},
-				{
-					id: '5',
-					mainText: 'Klant heeft meerdere meldingen gemaakt',
-					subText: 'Informatie verzoek',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '6',
-					mainText: 'Geluidsoverlast',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '7',
-					mainText: 'Klant kan niet meer inloggen',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-				},
-				{
-					id: '8',
-					mainText: 'Klant heeft meerdere meldingen gemaakt',
-					subText: 'Informatie verzoek',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '9',
-					mainText: 'Geluidsoverlast',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-
-			],
+			zaakItems: [],
 		}
 	},
 
@@ -114,9 +56,24 @@ export default {
 	},
 
 	mounted() {
+		this.fetchZaakItems()
 	},
 
 	methods: {
+		fetchZaakItems() {
+			this.loading = true
+			zaakStore.refreshZakenList()
+				.then(() => {
+					this.zaakItems = zaakStore.zakenList.map(zaak => ({
+						id: zaak.id,
+						mainText: zaak.identificatie,
+						subText: zaak.zaaktype,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+					}))
+
+					this.loading = false
+				})
+		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index 1f40e63..31a1b6e 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { taakStore } from '../../store/store.js'
+</script>
+
 <template>
 	<div class="takenContainer">
 		<div class="itemContainer">
@@ -42,27 +46,35 @@ export default {
 	data() {
 		return {
 			loading: false,
-			zaakItems: [
-				{
-					id: '1',
-					mainText: 'Terugbel verzoek brandkraan',
-					subText: 'brandkraan staat schuin',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/calendar-month-outline.svg',
-				},
-			],
+			taakItems: [],
 		}
 	},
 
 	computed: {
 		items() {
-			return this.zaakItems
+			return this.taakItems
 		},
 	},
 
 	mounted() {
+		this.fetchTaakItems()
 	},
 
 	methods: {
+		fetchTaakItems() {
+			this.loading = true
+			taakStore.refreshTakenList()
+				.then(() => {
+					this.taakItems = taakStore.takenList.map(taak => ({
+						id: taak.id,
+						mainText: taak.title,
+						subText: taak.type,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+					}))
+
+					this.loading = false
+				})
+		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},
diff --git a/src/views/widgets/ZakenWidget.vue b/src/views/widgets/ZakenWidget.vue
index 0bd0a02..5e745e4 100644
--- a/src/views/widgets/ZakenWidget.vue
+++ b/src/views/widgets/ZakenWidget.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { zaakStore } from '../../store/store.js'
+</script>
+
 <template>
 	<div class="zakenContainer">
 		<div class="itemContainer">
@@ -44,28 +48,7 @@ export default {
 	data() {
 		return {
 			loading: false,
-			zaakItems: [
-				{
-					id: '1',
-					mainText: 'Klant kan niet meer inloggen',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-				},
-				{
-					id: '2',
-					mainText: 'Klant heeft meerdere meldingen gemaakt',
-					subText: 'Informatie verzoek',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-				{
-					id: '3',
-					mainText: 'Geluidsoverlast',
-					subText: 'Klacht',
-					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
-
-				},
-			],
+			zaakItems: [],
 		}
 	},
 
@@ -76,9 +59,24 @@ export default {
 	},
 
 	mounted() {
+		this.fetchZaakItems()
 	},
 
 	methods: {
+		fetchZaakItems() {
+			this.loading = true
+			zaakStore.refreshZakenList()
+				.then(() => {
+					this.zaakItems = zaakStore.zakenList.map(zaak => ({
+						id: zaak.id,
+						mainText: zaak.identificatie,
+						subText: zaak.zaaktype,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+					}))
+
+					this.loading = false
+				})
+		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},