diff --git a/src/entities/rol/rol.types.ts b/src/entities/rol/rol.types.ts
index e0fbff9..c1b7920 100644
--- a/src/entities/rol/rol.types.ts
+++ b/src/entities/rol/rol.types.ts
@@ -4,7 +4,7 @@ export type TRol = {
     omschrijving: string;
     omschrijvingGeneriek: string;
     url: string;
-    zaak: string;
+    zaak: string; // zaak id
     betrokkene: string;
     betrokkeneType: string;
     afwijkendeNaamBetrokkene: string;
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index f83fda0..b7c4943 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -11,6 +11,7 @@ import { navigationStore } from '../store/store.js'
 		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
 		<AddBerichtToZaak v-if="navigationStore.modal === 'addBerichtToZaak'" />
 		<AddTaakToZaak v-if="navigationStore.modal === 'addTaakToZaak'" />
+		<AddRolToZaak v-if="navigationStore.modal === 'addRolToZaak'" />
 		<!-- ==== -->
 		<EditZaakType />
 		<EditKlant />
@@ -43,6 +44,7 @@ import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
 import EditMedewerker from './medewerkers/EditMedewerker.vue'
 import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
 import AddTaakToZaak from './zaken/AddTaakToZaak.vue'
+import AddRolToZaak from './zaken/AddRolToZaak.vue'
 
 export default {
 	name: 'Modals',
@@ -63,6 +65,7 @@ export default {
 		EditMedewerker,
 		AddBerichtToZaak,
 		AddTaakToZaak,
+		AddRolToZaak,
 	},
 }
 </script>
diff --git a/src/modals/zaken/AddRolToZaak.vue b/src/modals/zaken/AddRolToZaak.vue
new file mode 100644
index 0000000..b62c9e7
--- /dev/null
+++ b/src/modals/zaken/AddRolToZaak.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { zaakStore, navigationStore, rolStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addRolToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Rol toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Rol succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="rollen"
+					v-model="rollen.value"
+					input-label="Rol"
+					:loading="rollenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!rollen?.value || loading"
+				type="primary"
+				@click="addRolToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Rol } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddRolToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			rollenLoading: false,
+			rollen: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.fetchRollenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchRollenData() {
+			this.rollenLoading = true
+
+			rolStore.refreshRollenList()
+				.then(({ data }) => {
+					this.rollen = {
+						options: data
+							// zaak is stored on the rol itself as a singular id, indicating that only rollen without a zaak can be used
+							.filter((rol) => !rol.zaak)
+							.map((rol) => ({
+								id: rol.id,
+								label: rol.title,
+							})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.rollenLoading = false
+				})
+		},
+		addRolToZaak() {
+			this.loading = true
+			this.error = false
+
+			const rolItem = rolStore.rollenList.find((rol) => rol.id === this.rollen.value.id)
+			if (!rolItem) {
+				this.error = 'something went majorly wrong'
+				this.loading = false
+				return
+			}
+
+			const rolItemCopy = _.cloneDeep(rolItem)
+
+			rolItemCopy.zaak = zaakStore.zaakItem.id
+
+			const newRolItem = new Rol(rolItemCopy)
+
+			rolStore.saveRol(newRolItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/views/rollen/ZaakRollen.vue b/src/views/rollen/ZaakRollen.vue
index fc400fe..1807174 100644
--- a/src/views/rollen/ZaakRollen.vue
+++ b/src/views/rollen/ZaakRollen.vue
@@ -4,8 +4,8 @@ import { navigationStore, rolStore } from '../../store/store.js'
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(rollen, i) in rollenList"
+		<div v-if="filteredRollenList?.length">
+			<NcListItem v-for="(rollen, i) in filteredRollenList"
 				:key="`${rollen}${i}`"
 				:name="rollen?.omschrijving"
 				:active="rolStore.rolItem?.id === rollen.id"
@@ -22,21 +22,33 @@ import { navigationStore, rolStore } from '../../store/store.js'
 					{{ rollen?.omschrijving }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="editRol(rollen)">
-						Bewerken
+					<NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setSelected('rollen')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
 					</NcActionButton>
+					<!-- <NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setModal('rollen')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton> -->
 					<NcActionButton>
-						Verwijderen
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!rollenList?.length && !loading">
+		<div v-if="!filteredRollenList?.length && !loading">
 			Geen rollen gevonden.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!filteredRollenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -66,43 +78,40 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			rollenList: [],
 		}
 	},
+	computed: {
+		filteredRollenList() {
+			return rolStore.rollenList.filter((rol) => rol.zaak === this.zaakId)
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
 		editRol(rol) {
 			rolStore.setRolItem(rol)
 			navigationStore.setModal('editRol')
 		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/zrc/rollen?zaak.id=${zaakId}`,
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.rollenList = data.results
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			rolStore.refreshRollenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
 		toggleRol(rol) {
-			// TODO: toggle rol
+			if (rolStore.rolItem?.id === rol.id) {
+				rolStore.setRolItem(null)
+			} else {
+				rolStore.setRolItem(rol)
+			}
 		},
 		clearText() {
 			this.search = ''
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 50fc0c0..48703ca 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -28,7 +28,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 							</template>
 							Document toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addRol')">
+						<NcActionButton @click="navigationStore.setModal('addRolToZaak')">
 							<template #icon>
 								<AccountPlus :size="20" />
 							</template>