diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 2e4ebf2..f944cfe 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -32,6 +32,8 @@ import { navigationStore } from '../store/store.js'
 		<DeleteJobArgument />
 		<EditSourceConfiguration />
 		<DeleteSourceConfiguration />
+		<EditSourceConfigurationAuthentication v-if="navigationStore.modal === 'editSourceConfigurationAuthentication'" />
+		<DeleteSourceConfigurationAuthentication v-if="navigationStore.modal === 'deleteSourceConfigurationAuthentication'" />
 		<ViewSourceLog />
 		<ViewJobLog />
 		<ViewSynchronizationLog />
@@ -62,6 +64,8 @@ import EditJobArgument from './JobArgument/EditJobArgument.vue'
 import DeleteJobArgument from './JobArgument/DeleteJobArgument.vue'
 import EditSourceConfiguration from './SourceConfiguration/EditSourceConfiguration.vue'
 import DeleteSourceConfiguration from './SourceConfiguration/DeleteSourceConfiguration.vue'
+import EditSourceConfigurationAuthentication from './SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue'
+import DeleteSourceConfigurationAuthentication from './SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue'
 import ViewSourceLog from './Log/ViewSourceLog.vue'
 import EditMappingMapping from './mappingMapping/EditMappingMapping.vue'
 import DeleteMappingMapping from './mappingMapping/DeleteMappingMapping.vue'
@@ -98,6 +102,8 @@ export default {
 		DeleteJobArgument,
 		EditSourceConfiguration,
 		DeleteSourceConfiguration,
+		EditSourceConfigurationAuthentication,
+		DeleteSourceConfigurationAuthentication,
 		ViewSourceLog,
 		EditMappingMapping,
 		DeleteMappingMapping,
diff --git a/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue b/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue
new file mode 100644
index 0000000..f319319
--- /dev/null
+++ b/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { navigationStore, sourceStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Source Authentication"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted source authentication</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the source authentication</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ sourceStore.sourceConfigurationKey.replace(/^authentication\./g, '') }}</b> from Source Authentication?
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Delete v-if="!loading" :size="20" />
+				</template>
+				Delete
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'DeleteSourceConfigurationAuthentication',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		deleteSourceConfiguration() {
+			this.loading = true
+
+			const sourceItemClone = { ...sourceStore.sourceItem }
+			delete sourceItemClone?.configuration[sourceStore.sourceConfigurationKey]
+
+			const sourceItem = {
+				...sourceStore.sourceItem,
+			}
+
+			sourceStore.saveSource(sourceItem)
+				.then(() => {
+					this.loading = false
+					this.success = true
+
+					// Wait for the user to read the feedback then close the model
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+    margin: var(--OC-margin-50);
+    text-align: center;
+}
+
+.zaakDetailsContainer {
+    margin-block-start: var(--OC-margin-20);
+    margin-inline-start: var(--OC-margin-20);
+    margin-inline-end: var(--OC-margin-20);
+}
+
+.success {
+    color: green;
+}
+</style>
diff --git a/src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue b/src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue
new file mode 100644
index 0000000..b12a1e1
--- /dev/null
+++ b/src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { sourceStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editSourceConfigurationAuthentication"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ isEdit ? 'Edit' : 'Add' }} Authentication</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Authentication successfully added</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+
+			<form v-if="!success" @submit.prevent="handleSubmit">
+				<div class="form-group">
+					<NcTextField
+						id="key"
+						label="Key*"
+						required
+						:error="checkIfKeyIsUnique(configurationItem.key)"
+						:helper-text="checkIfKeyIsUnique(configurationItem.key) ? 'This key is already in use. Please choose a different key name.' : ''"
+						:value.sync="configurationItem.key" />
+					<NcTextField
+						id="value"
+						label="Value"
+						:value.sync="configurationItem.value" />
+				</div>
+			</form>
+
+			<NcButton
+				v-if="!success"
+				:disabled="loading || !configurationItem.key || checkIfKeyIsUnique(configurationItem.key)"
+				type="primary"
+				@click="editSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Save
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcModal,
+	NcLoadingIcon,
+	NcNoteCard,
+	NcTextField,
+} from '@nextcloud/vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+export default {
+	name: 'EditSourceConfigurationAuthentication',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			configurationItem: {
+				key: '',
+				value: '',
+			},
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			closeTimeoutFunc: null,
+			oldKey: '',
+			isEdit: false,
+		}
+	},
+	mounted() {
+		this.initializeSourceConfiguration()
+	},
+	methods: {
+		initializeSourceConfiguration() {
+			if (!sourceStore.sourceConfigurationKey) {
+				return
+			}
+			const configurationItem = Object.entries(sourceStore.sourceItem.configuration).find(([key]) => key === sourceStore.sourceConfigurationKey)
+			if (configurationItem) {
+				this.configurationItem = {
+					key: configurationItem[0].replace(/^authentication\./g, '') || '',
+					value: configurationItem[1] || '',
+				}
+				this.oldKey = configurationItem[0]
+				this.isEdit = true
+			}
+		},
+		checkIfKeyIsUnique(key) {
+			if (!sourceStore.sourceItem.configuration) return false
+			const fullKey = `authentication.${key}`
+			const keys = Object.keys(sourceStore.sourceItem.configuration)
+			if (this.oldKey === fullKey) return false
+			if (keys.includes(fullKey)) return true
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		async editSourceConfiguration() {
+			this.loading = true
+
+			const newSourceItem = {
+				...sourceStore.sourceItem,
+				configuration: {
+					...sourceStore.sourceItem.configuration,
+					[`authentication.${this.configurationItem.key}`]: this.configurationItem.value,
+				},
+			}
+
+			if (this.oldKey !== '' && this.oldKey !== `authentication.${this.configurationItem.key}`) {
+				delete newSourceItem.configuration[this.oldKey]
+			}
+
+			try {
+				await sourceStore.saveSource(newSourceItem)
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the authentication configuration'
+			}
+		},
+	},
+}
+</script>
diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index f5eb3b5..cbaebb5 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -33,6 +33,12 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 							</template>
 							Add Configuration
 						</NcActionButton>
+						<NcActionButton @click="sourceStore.setSourceConfigurationKey(null); navigationStore.setModal('editSourceConfigurationAuthentication')">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Add Authentication
+						</NcActionButton>
 						<NcActionButton @click="navigationStore.setDialog('deleteSource')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
@@ -56,8 +62,8 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 				<div class="tabContainer">
 					<BTabs content-class="mt-3" justified>
 						<BTab title="Configurations">
-							<div v-if="sourceStore.sourceItem?.configuration !== null && Object.keys(sourceStore.sourceItem?.configuration).length > 0">
-								<NcListItem v-for="(value, key, i) in sourceStore.sourceItem?.configuration"
+							<div v-if="Object.keys(configuration)?.length">
+								<NcListItem v-for="(value, key, i) in configuration"
 									:key="`${key}${i}`"
 									:name="key"
 									:bold="false"
@@ -89,7 +95,44 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 									</template>
 								</NcListItem>
 							</div>
-							<div v-if="sourceStore.sourceItem?.configuration === null || Object.keys(sourceStore.sourceItem?.configuration).length === 0" class="tabPanel">
+							<div v-if="!Object.keys(configuration)?.length" class="tabPanel">
+								No configurations found
+							</div>
+						</BTab>
+						<BTab title="Authentication">
+							<div v-if="Object.keys(configurationAuthentication)?.length">
+								<NcListItem v-for="(value, key, i) in configurationAuthentication"
+									:key="`${key}${i}`"
+									:name="key"
+									:bold="false"
+									:force-display-actions="true"
+									:active="sourceStore.sourceConfigurationKey === key">
+									<template #icon>
+										<FileCogOutline
+											:class="sourceStore.sourceConfigurationKey === key && 'selectedZaakIcon'"
+											disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ value }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="sourceStore.setSourceConfigurationKey(key); navigationStore.setModal('editSourceConfigurationAuthentication')">
+											<template #icon>
+												<Pencil :size="20" />
+											</template>
+											Edit
+										</NcActionButton>
+										<NcActionButton @click="sourceStore.setSourceConfigurationKey(key); navigationStore.setModal('deleteSourceConfigurationAuthentication')">
+											<template #icon>
+												<Delete :size="20" />
+											</template>
+											Delete
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<div v-if="!Object.keys(configurationAuthentication)?.length" class="tabPanel">
 								No configurations found
 							</div>
 						</BTab>
@@ -168,6 +211,28 @@ export default {
 		TrashCanOutline,
 		Sync,
 	},
+	computed: {
+		/**
+		 * Returns the configuration without the authentication configuration
+		 */
+		configuration() {
+			const filteredObj = Object.fromEntries(
+				Object.entries(sourceStore.sourceItem?.configuration)
+					.filter(([key]) => !key.startsWith('authentication.')),
+			)
+			return filteredObj
+		},
+		/**
+		 * Returns the authentication configuration
+		 */
+		configurationAuthentication() {
+			const filteredObj = Object.fromEntries(
+				Object.entries(sourceStore.sourceItem?.configuration)
+					.filter(([key]) => key.startsWith('authentication.')),
+			)
+			return filteredObj
+		},
+	},
 	mounted() {
 		this.refreshSourceLogs()
 	},
@@ -202,7 +267,6 @@ export default {
 		},
 		refreshSourceLogs() {
 			sourceStore.refreshSourceLogs()
-
 		},
 		checkIfStatusIsOk(statusCode) {
 			if (statusCode > 199 && statusCode < 300) {
@@ -220,8 +284,8 @@ export default {
 	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;
+	margin-inline-start: 0 !important;
+	margin-inline-end: 0 !important;
 	font-weight: bold !important;
 	unicode-bidi: isolate !important;
 }