diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index 36700f83e..e5116b95d 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -552,12 +552,6 @@ $color-error: #e9322d;
 		display: none;
 		position: relative;
 
-		&.error input.edit {
-			color: var(--color-error);
-			border-color: var(--color-error) !important;
-			box-shadow: 0 0 6px transparentize( $color-error, .7 );
-		}
-
 		form {
 			display: flex;
 
diff --git a/src/components/AppSidebar/Alarm/AlarmList.vue b/src/components/AppSidebar/Alarm/AlarmList.vue
index 029ca5ec7..ec3780479 100644
--- a/src/components/AppSidebar/Alarm/AlarmList.vue
+++ b/src/components/AppSidebar/Alarm/AlarmList.vue
@@ -9,7 +9,7 @@
 			<slot name="icon" />
 		</div>
 		<div class="component__items">
-			<AlarmListItem v-for="(alarm, index) in alarmComponents"
+			<AlarmListItem v-for="(alarm, index) in alarms"
 				:key="index"
 				:index="index"
 				:alarm="alarm"
@@ -24,37 +24,44 @@
 					</p>
 				</div>
 				<AlarmListNew v-if="!readOnly"
-					:has-start-date="hasStartDate"
-					:has-due-date="hasDueDate"
+					:has-start-date="!!startDate"
+					:has-due-date="!!dueDate"
 					:is-all-day="allDay"
 					@add-alarm="addAlarm" />
 			</div>
 		</div>
+		<AlarmRelationDeletionModal v-if="alarmRelationDeletionModalIsOpen"
+			:alarms="relatedAlarms"
+			@keep="keepAlarms"
+			@discard="discardAlarms"
+			@close="restoreRelatedDate" />
 	</div>
 </template>
 
 <script>
 import AlarmListNew from './AlarmListNew.vue'
 import AlarmListItem from './AlarmListItem.vue'
-import { mapAlarmComponentToAlarmObject } from '../../../models/alarm.js'
 
 import { translate as t } from '@nextcloud/l10n'
-import { AlarmComponent } from '@nextcloud/calendar-js'
 import ICAL from 'ical.js'
+import AlarmRelationDeletionModal from './AlarmRelationDeletionModal.vue'
+import { calculateAbsoluteDateFromRelativeTrigger } from '../../../utils/alarms.js'
+import { toRaw } from 'vue'
 
 export default {
 	name: 'AlarmList',
 	components: {
+		AlarmRelationDeletionModal,
 		AlarmListItem,
 		AlarmListNew,
 	},
 	props: {
-		hasStartDate: {
-			type: Boolean,
+		startDate: {
+			type: [Date, null],
 			required: true,
 		},
-		hasDueDate: {
-			type: Boolean,
+		dueDate: {
+			type: [Date, null],
 			required: true,
 		},
 		readOnly: {
@@ -74,19 +81,22 @@ export default {
 		'addAlarm',
 		'removeAlarm',
 		'updateAlarm',
+		'restoreDate',
 	],
-	computed: {
-		alarmComponents() {
-			return this.alarms.map((alarm) => {
-				try {
-					return mapAlarmComponentToAlarmObject(AlarmComponent.fromICALJs(alarm))
-				} catch (e) {
-					// Instead of breaking the whole page when parsing an invalid alarm,
-					// we just print a warning on the console.
-					console.warn(e)
-					return false
-				}
-			}).filter(Boolean)
+	data() {
+		return {
+			alarmRelationDeletionModalIsOpen: false,
+			relatedAlarms: [],
+			relatedDate: null,
+			relatedDateIsRelatedToStart: null,
+		}
+	},
+	watch: {
+		startDate(newDate, oldDate) {
+			this.openModalIfAlarmsAreRelated(newDate, oldDate, true)
+		},
+		dueDate(newDueDate, oldDate) {
+			this.openModalIfAlarmsAreRelated(newDueDate, oldDate, false)
 		},
 	},
 	methods: {
@@ -104,7 +114,7 @@ export default {
 				action: 'DISPLAY',
 				// When the action is "DISPLAY", the alarm MUST also include a "DESCRIPTION" property
 				description: t('tasks', 'This is a todo reminder.'),
-				// The "REPEAT" property is only valid in combination with a "DURATION" propery
+				// The "REPEAT" property is only valid in combination with a "DURATION" property
 				repeat: 1,
 				duration: 'PT10M',
 				trigger: { value: undefined, parameter },
@@ -141,10 +151,68 @@ export default {
 		/**
 		 * Removes an alarm from this event
 		 *
-		 * @param {number} index The index of the alarm-list
+		 * @param {number|number[]} indexes The indexes of the alarm-list
+		 */
+		removeAlarm(indexes) {
+			this.$emit('removeAlarm', Array.isArray(indexes) ? indexes : [indexes])
+		},
+
+		/**
+		 * Convert relative alarms to absolute alarms if related date is deleted
+		 */
+		keepAlarms() {
+			this.relatedAlarms.forEach((relatedAlarm) => {
+				const alarm = {
+					value: calculateAbsoluteDateFromRelativeTrigger(this.relatedDate, relatedAlarm.alarm.relativeTrigger),
+					parameter: undefined, // ical.js sets the correct parameter for us when using a `ICAL.Time`-object
+				}
+				this.updateAlarm(alarm, relatedAlarm.index)
+			})
+			this.completeRelationDeletionModal()
+		},
+
+		/**
+		 * Discard all alarms if related date is deleted
+		 */
+		discardAlarms() {
+			this.removeAlarm(this.relatedAlarms.map((relatedAlarm) => relatedAlarm.index))
+			this.completeRelationDeletionModal()
+		},
+
+		/**
+		 * Restore related date if modal was cancelled
 		 */
-		removeAlarm(index) {
-			this.$emit('removeAlarm', index)
+		restoreRelatedDate() {
+			this.$emit('restoreDate', this.relatedDate, this.relatedDateIsRelatedToStart)
+			this.completeRelationDeletionModal()
+		},
+
+		/**
+		 * @param {Date|null} newDate The new date
+		 * @param {ICAL.Time|null} oldDate The old date
+		 * @param {boolean} isRelatedToStart If the date is related to the start
+		 */
+		openModalIfAlarmsAreRelated(newDate, oldDate, isRelatedToStart) {
+			const relatedAlarms = this.alarms.map((alarm, index) => {
+				if (alarm.isRelative && (alarm.relativeIsRelatedToStart === isRelatedToStart)) {
+					return { alarm, index }
+				}
+				return false
+			}).filter(Boolean)
+
+			if (newDate === null && relatedAlarms.length > 0) {
+				this.relatedAlarms = relatedAlarms
+				this.relatedDate = toRaw(oldDate).toJSDate()
+				this.relatedDateIsRelatedToStart = isRelatedToStart
+				this.alarmRelationDeletionModalIsOpen = true
+			}
+		},
+
+		completeRelationDeletionModal() {
+			this.alarmRelationDeletionModalIsOpen = false
+			this.relatedAlarms = []
+			this.relatedDate = null
+			this.relatedDateIsRelatedToStart = null
 		},
 	},
 }
@@ -185,6 +253,8 @@ export default {
 
 			.new {
 				display: flex;
+				flex-wrap: wrap;
+				gap: 6px;
 				align-items: center;
 				justify-content: space-between;
 				width: 100%;
diff --git a/src/components/AppSidebar/Alarm/AlarmListNew.vue b/src/components/AppSidebar/Alarm/AlarmListNew.vue
index 2d51fd986..91c62271d 100644
--- a/src/components/AppSidebar/Alarm/AlarmListNew.vue
+++ b/src/components/AppSidebar/Alarm/AlarmListNew.vue
@@ -4,7 +4,8 @@
 -->
 
 <template>
-	<NcActions type="tertiary"
+	<NcActions ref="actions"
+		type="tertiary"
 		:force-name="true"
 		:force-menu="true"
 		:menu-name="t('tasks', 'Add reminder')">
@@ -208,13 +209,12 @@ export default {
 		},
 
 		onBackToMenuClick() {
-			this.startDateMenuIsOpen = false
-			this.dueDateMenuIsOpen = false
-			this.chooseDateTimeMenuIsOpen = false
+			this.resetState()
 		},
 
 		onAlarmOptionClick(alarm) {
 			this.$emit('addAlarm', alarm)
+			this.resetState()
 		},
 
 		onChooseDateAndTime(date) {
@@ -224,6 +224,16 @@ export default {
 			}
 
 			this.$emit('addAlarm', alarm)
+			this.resetState()
+
+			// We have to close the menu manually because the `NcActions`-component isn't aware of what happens in
+			// the `AlarmDateTimePickerModal`-component and would stay open until one of its buttons are pressed.
+			this.$refs.actions.closeMenu()
+		},
+
+		resetState() {
+			this.startDateMenuIsOpen = false
+			this.dueDateMenuIsOpen = false
 			this.chooseDateTimeMenuIsOpen = false
 		},
 	},
diff --git a/src/components/AppSidebar/Alarm/AlarmRelationDeletionModal.vue b/src/components/AppSidebar/Alarm/AlarmRelationDeletionModal.vue
new file mode 100644
index 000000000..49996607a
--- /dev/null
+++ b/src/components/AppSidebar/Alarm/AlarmRelationDeletionModal.vue
@@ -0,0 +1,85 @@
+<template>
+	<NcModal @close="onClose()">
+		<form class="content" @submit.prevent="onSubmit">
+			<h3 class="content__heading">
+				{{ t('tasks', 'Do you want to keep related reminders?') }}
+			</h3>
+			<p>
+				{{ n(
+					'tasks',
+					'This task has %n reminder. Would you like to keep it?',
+					'This task has %n reminders. Would you like to keep them?',
+					alarms.length
+				) }}
+			</p>
+			<div class="content__buttons">
+				<NcButton @click="onClose()">
+					{{ t('tasks', 'Cancel') }}
+				</NcButton>
+				<NcButton variant="warning" @click="onDiscard()">
+					{{ t('tasks', 'Discard reminders') }}
+				</NcButton>
+				<NcButton variant="primary" type="submit">
+					{{ t('tasks', 'Keep reminders') }}
+				</NcButton>
+			</div>
+		</form>
+	</NcModal>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcModal } from '@nextcloud/vue'
+
+export default {
+	name: 'AlarmRelationDeletionModal',
+	components: {
+		NcButton,
+		NcModal,
+	},
+	props: {
+		alarms: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: [
+		'close',
+		'discard',
+		'keep',
+	],
+	methods: {
+		t,
+		n,
+
+		onSubmit() {
+			this.$emit('keep')
+		},
+
+		onDiscard() {
+			this.$emit('discard')
+		},
+
+		onClose() {
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+	padding: 14px;
+
+	&__heading {
+		margin-top: 0;
+	}
+
+	&__buttons {
+		display: flex;
+		gap: 8px;
+		margin-top: 28px;
+		justify-content: flex-end;
+	}
+}
+</style>
diff --git a/src/models/alarm.js b/src/models/alarm.js
index b10543976..2f932e6bc 100644
--- a/src/models/alarm.js
+++ b/src/models/alarm.js
@@ -8,6 +8,7 @@ import {
 	getDateFromDateTimeValue,
 } from '../utils/alarms.js'
 import { AlarmComponent } from '@nextcloud/calendar-js'
+import ICAL from 'ical.js'
 
 /**
  * Creates a complete alarm object based on given props
@@ -97,6 +98,22 @@ const mapAlarmComponentToAlarmObject = (alarmComponent) => {
 	}
 }
 
+/**
+ * @param {Array<ICAL.Component>} alarms ICAL.js alarms
+ */
+export function mapICALAlarmsToAlarmObjects(alarms) {
+	return alarms.map((alarm) => {
+		try {
+			return mapAlarmComponentToAlarmObject(AlarmComponent.fromICALJs(alarm))
+		} catch (e) {
+			// Instead of breaking the whole page when parsing an invalid alarm,
+			// we just print a warning on the console.
+			console.warn(e)
+			return false
+		}
+	}).filter(Boolean)
+}
+
 /**
  * @param {number} time Total amount of seconds for the trigger
  * @param {boolean} relatedToStart If the alarm is related to the start of the event
diff --git a/src/models/task.js b/src/models/task.js
index dedbc0667..e3652b25b 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -626,18 +626,21 @@ export default class Task {
 	/**
 	 * Remove an alarm
 	 *
-	 * @param {number} index The index of the alarm-list
+	 * @param {number[]} indexes The indexes of the alarm-list
 	 */
-	removeAlarm(index) {
+	removeAlarm(indexes) {
 		const valarms = this.vtodo.getAllSubcomponents('valarm')
-		const valarmToDelete = valarms[index]
 
-		if (valarmToDelete) {
-			this.vtodo.removeSubcomponent(valarms[index])
+		for (const index of indexes) {
+			const valarmToDelete = valarms[index]
 
-			this.updateLastModified()
-			this._alarms = this.getAlarms()
+			if (valarmToDelete) {
+				this.vtodo.removeSubcomponent(valarmToDelete)
+			}
 		}
+
+		this.updateLastModified()
+		this._alarms = this.getAlarms()
 	}
 
 	/**
diff --git a/src/store/tasks.js b/src/store/tasks.js
index 362d0afff..4b33b7dc4 100644
--- a/src/store/tasks.js
+++ b/src/store/tasks.js
@@ -502,10 +502,10 @@ const mutations = {
 	 * @param {object} state The store data
 	 * @param {object} data Destructuring object
 	 * @param {Task} data.task The task
-	 * @param {number} data.index The index of the alarm-item to remove
+	 * @param {number[]} data.indexes The indexes of the alarm-items to remove
 	 */
-	removeAlarm(state, { task, index }) {
-		task.removeAlarm(index)
+	removeAlarm(state, { task, indexes }) {
+		task.removeAlarm(indexes)
 	},
 
 	/**
@@ -1282,10 +1282,10 @@ const actions = {
 	 * Removes an alarm from a task
 	 *
 	 * @param {object} context The store context
-	 * @param {Task} task The task to update
+	 * @param {Task} task The task to remove
 	 */
-	async removeAlarm(context, { task, index }) {
-		context.commit('removeAlarm', { task, index })
+	async removeAlarm(context, { task, indexes }) {
+		context.commit('removeAlarm', { task, indexes })
 		context.dispatch('updateTask', task)
 	},
 
diff --git a/src/utils/alarms.js b/src/utils/alarms.js
index 88bbab968..6acbeda8f 100644
--- a/src/utils/alarms.js
+++ b/src/utils/alarms.js
@@ -258,3 +258,14 @@ export function getDateFromDateTimeValue(dateTimeValue) {
 		0,
 	)
 }
+
+/**
+ * Takes the related date and the relative trigger of an alarm and
+ * calculates the absolute date-time when the alarm will trigger.
+ *
+ * @param {Date} relatedDate Related date
+ * @param {number} relativeTrigger Relative trigger in seconds
+ */
+export function calculateAbsoluteDateFromRelativeTrigger(relatedDate, relativeTrigger) {
+	return new Date(((relatedDate.valueOf() / 1000) + relativeTrigger) * 1000)
+}
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 5e2e43019..ca93aff9e 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -234,14 +234,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					icon="TagMultiple"
 					@add-tag="updateTag"
 					@set-tags="updateTags" />
-				<AlarmList :alarms="task.alarms"
-					:has-start-date="hasStartDate"
-					:has-due-date="hasDueDate"
+				<AlarmList :alarms="alarms"
+					:start-date="task.start"
+					:due-date="task.due"
 					:all-day="allDay"
 					:read-only="readOnly"
 					@add-alarm="addAlarmItem"
 					@update-alarm="updateAlarmItem"
-					@remove-alarm="removeAlarmItem">
+					@remove-alarm="removeAlarmItem"
+					@restore-date="restoreDate">
 					<template #icon>
 						<Bell :size="20" />
 					</template>
@@ -282,7 +283,7 @@ import TagsItem from '../components/AppSidebar/TagsItem.vue'
 import TextItem from '../components/AppSidebar/TextItem.vue'
 import NotesItem from '../components/AppSidebar/NotesItem.vue'
 import TaskCheckbox from '../components/TaskCheckbox.vue'
-// import TaskStatusDisplay from '../components/TaskStatusDisplay'
+import { mapICALAlarmsToAlarmObjects } from '../models/alarm.js'
 import Task from '../models/task.js'
 import { startDateString, dueDateString } from '../utils/dateStrings.js'
 
@@ -354,7 +355,6 @@ export default {
 		CalendarPickerItem,
 		NotesItem,
 		TaskCheckbox,
-		// TaskStatusDisplay,
 	},
 	/**
 	 * Before we navigate to a new task, we save possible edits to the task summary.
@@ -410,6 +410,9 @@ export default {
 		task() {
 			return this.getTaskByRoute(this.$route)
 		},
+		alarms() {
+			return mapICALAlarmsToAlarmObjects(this.task.alarms)
+		},
 		summary() {
 			return this.task ? this.task.summary : ''
 		},
@@ -601,12 +604,6 @@ export default {
 				return !!this.$store.state.settings.settings.allDay
 			}
 		},
-		hasStartDate() {
-			return !!this.task.start
-		},
-		hasDueDate() {
-			return !!this.task.due
-		},
 		showInCalendar() {
 			// Only tasks with a due date show up in the calendar
 			return !!this.showTaskInCalendar && this.task.dueMoment.isValid()
@@ -916,12 +913,30 @@ export default {
 		},
 
 		/**
-		 * Removes an alarm
+		 * Removes one or more alarms
 		 *
-		 * @param {number} index The index of the alarm-item to remove
+		 * @param {number[]} indexes The indexes of the alarm-items to remove
 		 */
-		removeAlarmItem(index) {
-			this.removeAlarm({ task: this.task, index })
+		removeAlarmItem(indexes) {
+			this.removeAlarm({ task: this.task, indexes })
+		},
+
+		/**
+		 * Restores the start or due-date
+		 *
+		 * This can happen if a start or due-date is deleted while there are still
+		 * alarms relating to it. In case the user cancels the triggered modal, we
+		 * have to restore the date.
+		 *
+		 * @param {Date} date The date previously deleted
+		 * @param {boolean} isRelatedToStart True if the date is a start-date
+		 */
+		restoreDate(date, isRelatedToStart) {
+			if (isRelatedToStart) {
+				this.setStartDate({ task: this.task, value: date })
+			} else {
+				this.setDueDate({ task: this.task, value: date })
+			}
 		},
 
 		async changeCalendar(calendar) {