diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 1613d36..19a626f 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -7,30 +7,42 @@ import { navigationStore } from '../store/store.js'
 	<div>
 		<EditZaakType />
 		<EditKlant />
+		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
 		<EditBericht />
+		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
 		<EditTaak />
+		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
 		<EditZaak />
+		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 	</div>
 </template>
 
 <script>
 import EditZaakType from './zaakTypen/EditZaakType.vue'
 import EditKlant from './klanten/EditKlant.vue'
+import ViewKlantAuditTrail from './klanten/ViewKlantAuditTrail.vue'
 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 EditRol from './rollen/EditRol.vue'
 import EditZaak from './zaken/EditZaak.vue'
+import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 
 export default {
 	name: 'Modals',
 	components: {
 		EditZaakType,
 		EditKlant,
+		ViewKlantAuditTrail,
 		EditBericht,
+		ViewBerichtAuditTrail,
 		EditTaak,
+		ViewTaakAuditTrail,
 		EditRol,
-		EditZaak
+		EditZaak,
+		ViewZaakAuditTrail,
 	},
 }
 </script>
diff --git a/src/modals/berichten/ViewBerichtAuditTrail.vue b/src/modals/berichten/ViewBerichtAuditTrail.vue
new file mode 100644
index 0000000..cb118ed
--- /dev/null
+++ b/src/modals/berichten/ViewBerichtAuditTrail.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { berichtStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Bericht Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewBerichtAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming berichtStore.auditTrailItem is a single audit trail object
+		this.auditTrail = berichtStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			berichtStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>
diff --git a/src/modals/klanten/ViewKlantAuditTrail.vue b/src/modals/klanten/ViewKlantAuditTrail.vue
new file mode 100644
index 0000000..f76ab55
--- /dev/null
+++ b/src/modals/klanten/ViewKlantAuditTrail.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { klantStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Klant Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewKlantAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming klantStore.auditTrailItem is a single audit trail object
+		this.auditTrail = klantStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			klantStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>
diff --git a/src/modals/taken/ViewTaakAuditTrail.vue b/src/modals/taken/ViewTaakAuditTrail.vue
new file mode 100644
index 0000000..f0565b7
--- /dev/null
+++ b/src/modals/taken/ViewTaakAuditTrail.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { taakStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Taak Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewTaakAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming taakStore.auditTrailItem is a single audit trail object
+		this.auditTrail = taakStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			taakStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>
diff --git a/src/modals/zaken/ViewZaakAuditTrail.vue b/src/modals/zaken/ViewZaakAuditTrail.vue
new file mode 100644
index 0000000..b809900
--- /dev/null
+++ b/src/modals/zaken/ViewZaakAuditTrail.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { zaakStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Zaak Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewZaakAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming zaakStore.auditTrailItem is a single audit trail object
+		this.auditTrail = zaakStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			zaakStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>
diff --git a/src/store/modules/berichten.js b/src/store/modules/berichten.js
index dd339d0..286cd24 100644
--- a/src/store/modules/berichten.js
+++ b/src/store/modules/berichten.js
@@ -8,6 +8,7 @@ export const useBerichtStore = defineStore('berichten', {
 	state: () => ({
 		berichtItem: false,
 		berichtenList: [],
+		auditTrailItem: null,
 	}),
 	actions: {
 		setBerichtItem(berichtItem) {
@@ -20,6 +21,9 @@ export const useBerichtStore = defineStore('berichten', {
 			)
 			console.log('Berichten list set to ' + berichtenList.length + ' items')
 		},
+		setAuditTrailItem(auditTrailItem) {
+			this.auditTrailItem = auditTrailItem
+		},
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
 		async refreshBerichtenList(search = null) {
 			let endpoint = apiEndpoint
diff --git a/src/store/modules/klanten.js b/src/store/modules/klanten.js
index e0f7ed7..674a22a 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: [],
+		auditTrailItem: null,
 	}),
 	actions: {
 		setKlantItem(klantItem) {
@@ -20,6 +21,9 @@ export const useKlantStore = defineStore('klanten', {
 			)
 			console.log('Klanten list set to ' + klantenList.length + ' items')
 		},
+		setAuditTrailItem(auditTrailItem) {
+			this.auditTrailItem = auditTrailItem
+		},
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
 		async refreshKlantenList(search = null) {
 			let endpoint = apiEndpoint
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 1249faf..84c25da 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -8,6 +8,7 @@ export const useTaakStore = defineStore('taken', {
 	state: () => ({
 		taakItem: false,
 		takenList: [],
+		auditTrailItem: null,
 	}),
 	actions: {
 		setTaakItem(taakItem) {
@@ -20,6 +21,9 @@ export const useTaakStore = defineStore('taken', {
 			)
 			console.log('Taken list set to ' + takenList.length + ' items')
 		},
+		setAuditTrailItem(auditTrailItem) {
+			this.auditTrailItem = auditTrailItem
+		},
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
 		async refreshTakenList(search = null) {
 			let endpoint = apiEndpoint
diff --git a/src/store/modules/zaken.ts b/src/store/modules/zaken.ts
index 95e3abc..d9937f6 100644
--- a/src/store/modules/zaken.ts
+++ b/src/store/modules/zaken.ts
@@ -14,6 +14,7 @@ export const useZaakStore = defineStore('zaken', {
 	state: () => ({
 		zaakItem: null,
 		zakenList: [],
+		auditTrailItem: null,
 	}),
 	actions: {
 		setZaakItem(zaakItem: Zaak | TZaak) {
@@ -26,6 +27,9 @@ export const useZaakStore = defineStore('zaken', {
 			)
 			console.info('Zaken list set to ' + zakenList.length + ' items')
 		},
+		setAuditTrailItem(auditTrailItem: unknown) {
+			this.auditTrailItem = auditTrailItem
+		},
 		/**
 		 * Refresh the list of zaken items.
 		 *
diff --git a/src/views/berichten/BerichtDetails.vue b/src/views/berichten/BerichtDetails.vue
index 284ae86..3f86dcd 100644
--- a/src/views/berichten/BerichtDetails.vue
+++ b/src/views/berichten/BerichtDetails.vue
@@ -76,6 +76,43 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 						<span>{{ berichtStore.berichtItem.volgorde }}</span>
 					</div>
 				</div>
+
+				<div class="tabContainer">
+					<BTabs content-class="mt-3" justified>
+						<BTab title="Audit trail" active>
+							<div v-if="auditTrails.length">
+								<NcListItem v-for="(auditTrail, key) in auditTrails"
+									:key="key"
+									:name="new Date(auditTrail.created).toLocaleString()"
+									:bold="false"
+									:details="auditTrail.action"
+									:counter-number="Object.keys(auditTrail.changed).length"
+									:force-display-actions="true">
+									<template #icon>
+										<TimelineQuestionOutline disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ auditTrail.userName }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="berichtStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewBerichtAuditTrail')">
+											<template #icon>
+												<Eye :size="20" />
+											</template>
+											View details
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-history" title="Geen audit trail gevonden">
+								<template #description>
+									Er is geen audit trail gevonden voor deze bericht.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+					</BTabs>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -83,12 +120,15 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 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'
 
 export default {
 	name: 'BerichtDetails',
@@ -101,6 +141,35 @@ export default {
 		DotsHorizontal,
 		TrashCanOutline,
 	},
+	data() {
+		return {
+			currentActiveBericht: null,
+			auditTrails: [],
+		}
+	},
+	mounted() {
+		if (berichtStore.berichtItem?.id) {
+			this.currentActiveBericht = berichtStore.berichtItem
+			this.fetchAuditTrails(berichtStore.berichtItem.id)
+		}
+	},
+	updated() {
+		if (berichtStore.berichtItem?.id && JSON.stringify(this.currentActiveBericht) !== JSON.stringify(berichtStore.berichtItem)) {
+			this.currentActiveBericht = berichtStore.berichtItem
+			this.fetchAuditTrails(berichtStore.berichtItem.id)
+		}
+	},
+	methods: {
+		fetchAuditTrails(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/berichten/${id}/audit_trail`)
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data)) {
+						this.auditTrails = data
+					}
+				})
+		},
+	},
 }
 </script>
 
diff --git a/src/views/klanten/KlantDetails.vue b/src/views/klanten/KlantDetails.vue
index 4c8462c..32725fa 100644
--- a/src/views/klanten/KlantDetails.vue
+++ b/src/views/klanten/KlantDetails.vue
@@ -232,7 +232,7 @@ import { navigationStore, klantStore, taakStore, berichtStore, zaakStore } from
 										{{ auditTrail.userName }}
 									</template>
 									<template #actions>
-										<NcActionButton @click="objectStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewObjectAuditTrail')">
+										<NcActionButton @click="klantStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewKlantAuditTrail')">
 											<template #icon>
 												<Eye :size="20" />
 											</template>
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index e34e778..fcc659c 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -35,6 +35,43 @@ import { navigationStore, taakStore } from '../../store/store.js'
 						<span>{{ taakStore.taakItem.onderwerp }}</span>
 					</div>
 				</div>
+
+				<div class="tabContainer">
+					<BTabs content-class="mt-3" justified>
+						<BTab title="Audit trail" active>
+							<div v-if="auditTrails.length">
+								<NcListItem v-for="(auditTrail, key) in auditTrails"
+									:key="key"
+									:name="new Date(auditTrail.created).toLocaleString()"
+									:bold="false"
+									:details="auditTrail.action"
+									:counter-number="Object.keys(auditTrail.changed).length"
+									:force-display-actions="true">
+									<template #icon>
+										<TimelineQuestionOutline disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ auditTrail.userName }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="taakStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewTaakAuditTrail')">
+											<template #icon>
+												<Eye :size="20" />
+											</template>
+											View details
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-history" title="Geen audit trail gevonden">
+								<template #description>
+									Er is geen audit trail gevonden voor deze taak.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+					</BTabs>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -42,12 +79,15 @@ import { navigationStore, taakStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 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'
 
 export default {
 	name: 'TaakDetails',
@@ -57,6 +97,35 @@ export default {
 		DotsHorizontal,
 		TrashCanOutline,
 	},
+	data() {
+		return {
+			currentActiveTaak: null,
+			auditTrails: [],
+		}
+	},
+	mounted() {
+		if (taakStore.taakItem?.id) {
+			this.currentActiveTaak = taakStore.taakItem
+			this.fetchAuditTrails(taakStore.taakItem.id)
+		}
+	},
+	updated() {
+		if (taakStore.taakItem?.id && JSON.stringify(this.currentActiveTaak) !== JSON.stringify(taakStore.taakItem)) {
+			this.currentActiveTaak = taakStore.taakItem
+			this.fetchAuditTrails(taakStore.taakItem.id)
+		}
+	},
+	methods: {
+		fetchAuditTrails(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/taken/${id}/audit_trail`)
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data)) {
+						this.auditTrails = data
+					}
+				})
+		},
+	},
 }
 </script>
 
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/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 78b2851..5212b71 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -133,6 +133,38 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 						<BTab title="Synchronisaties">
 							Todo: Koppelings info met DSO
 						</BTab>
+						<BTab title="Audit trail" active>
+							<div v-if="auditTrails.length">
+								<NcListItem v-for="(auditTrail, key) in auditTrails"
+									:key="key"
+									:name="new Date(auditTrail.created).toLocaleString()"
+									:bold="false"
+									:details="auditTrail.action"
+									:counter-number="Object.keys(auditTrail.changed).length"
+									:force-display-actions="true">
+									<template #icon>
+										<TimelineQuestionOutline disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ auditTrail.userName }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="zaakStore.setAuditTrailItem(auditTrail); navigationStore.setModal('viewZaakAuditTrail')">
+											<template #icon>
+												<Eye :size="20" />
+											</template>
+											View details
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-history" title="Geen audit trail gevonden">
+								<template #description>
+									Er is geen audit trail gevonden voor deze zaak.
+								</template>
+							</NcEmptyContent>
+						</BTab>
 					</BTabs>
 				</div>
 			</div>
@@ -147,7 +179,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcLoadingIcon, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcLoadingIcon, NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -157,6 +189,8 @@ import CalendarPlus from 'vue-material-design-icons/CalendarPlus.vue'
 import MessagePlus from 'vue-material-design-icons/MessagePlus.vue'
 import FileDocumentPlusOutline from 'vue-material-design-icons/FileDocumentPlusOutline.vue'
 import VectorPolylineEdit from 'vue-material-design-icons/VectorPolylineEdit.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
 
 // Views
 import ZaakEigenschappen from '../eigenschappen/ZaakEigenschappen.vue'
@@ -191,7 +225,35 @@ export default {
 		CalendarPlus,
 		FileDocumentPlusOutline,
 		VectorPolylineEdit,
-
+	},
+	data() {
+		return {
+			currentActiveZaak: null,
+			auditTrails: [],
+		}
+	},
+	mounted() {
+		if (zaakStore.zaakItem?.id) {
+			this.currentActiveZaak = zaakStore.zaakItem
+			this.fetchAuditTrails(zaakStore.zaakItem.id)
+		}
+	},
+	updated() {
+		if (zaakStore.zaakItem?.id && JSON.stringify(this.currentActiveZaak) !== JSON.stringify(zaakStore.zaakItem)) {
+			this.currentActiveZaak = zaakStore.zaakItem
+			this.fetchAuditTrails(zaakStore.zaakItem.id)
+		}
+	},
+	methods: {
+		fetchAuditTrails(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/zaken/${id}/audit_trail`)
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data)) {
+						this.auditTrails = data
+					}
+				})
+		},
 	},
 }
 </script>