diff --git a/appinfo/routes.php b/appinfo/routes.php
index ea0d3c27f2..a2137f9e13 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -58,6 +58,6 @@
 		['name' => 'email#sendEmailPublicLink', 'url' => '/v1/public/sendmail', 'verb' => 'POST'],
 	],
 	'resources' => [
-		'appointmentConfig' => ['url' => 'v1/appointment_configs']
+		'appointmentConfig' => ['url' => '/v1/appointment_configs']
 	]
 ];
diff --git a/css/app-modal.scss b/css/app-modal.scss
new file mode 100644
index 0000000000..b4ea5bd8a1
--- /dev/null
+++ b/css/app-modal.scss
@@ -0,0 +1,76 @@
+/**
+ * Calendar App
+ *
+ * @copyright 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.appointment-config-modal {
+	overflow: auto;
+	padding: 2vw;
+	max-width: 900px;
+
+	// Subtract padding twice from max height of modal
+	max-height: calc(90vh - 4vw);
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		fieldset {
+			padding: 20px 0;
+
+			header {
+				font-size: 16px;
+				margin-bottom: 3px;
+			}
+		}
+
+		.availability-select, .calendar-select {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&__row {
+			&--wrapped {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 10px 50px;
+
+				> div {
+					flex: 1 200px;
+				}
+			}
+		}
+
+		&__row + &__row {
+			margin-top: 10px;
+		}
+
+		// Fix calendar picker styling
+		.multiselect__tags {
+			height: unset !important;
+			margin: 0 !important;
+		}
+	}
+
+	&__submit-button {
+		margin-top: 20px;
+	}
+}
diff --git a/css/app-navigation.scss b/css/app-navigation.scss
index fe546e0d4f..aabdc2f5d9 100644
--- a/css/app-navigation.scss
+++ b/css/app-navigation.scss
@@ -8,6 +8,7 @@
  * @author Raghu Nayyar
  * @author Georg Ehrke
  * @author John Molakvoæ
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
@@ -308,5 +309,11 @@
 				}
 			}
 		}
+
+		.appointment-config-list {
+			.app-navigation-caption {
+				margin-top: 22px;
+			}
+		}
 	}
 }
diff --git a/css/calendar.scss b/css/calendar.scss
index f8ebf8d1b1..ae20147350 100644
--- a/css/calendar.scss
+++ b/css/calendar.scss
@@ -22,6 +22,7 @@
 @import 'app-navigation.scss';
 @import 'app-sidebar.scss';
 @import 'app-settings.scss';
+@import 'app-modal.scss';
 @import 'freebusy.scss';
 @import 'fullcalendar.scss';
 @import 'global.scss';
diff --git a/lib/Controller/AppointmentConfigController.php b/lib/Controller/AppointmentConfigController.php
index 7db543d3c2..3ba64c503e 100644
--- a/lib/Controller/AppointmentConfigController.php
+++ b/lib/Controller/AppointmentConfigController.php
@@ -100,17 +100,17 @@ public function show(int $id): JsonResponse {
 	 * @param int $followupDuration
 	 * @param int $timeToNextSlot
 	 * @param int|null $dailyMax
-	 * @param string[] $freebusyUris
+	 * @param string[]|null $freebusyUris
 	 * @param int|null $start
 	 * @param int|null $end
 	 * @return JsonResponse
 	 */
 	public function create(
-		string  $name,
-		string  $description,
-		string  $location,
-		string  $visibility,
-		string  $targetCalendarUri,
+		string $name,
+		string $description,
+		string $location,
+		string $visibility,
+		string $targetCalendarUri,
 		?string $availability,
 		int $length,
 		int $increment,
@@ -118,7 +118,7 @@ public function create(
 		int $followupDuration = 0,
 		int $timeToNextSlot = 0,
 		?int $dailyMax = null,
-		array $freebusyUris = null,
+		?array $freebusyUris = null,
 		?int $start = null,
 		?int $end = null): JsonResponse {
 
@@ -160,14 +160,14 @@ public function create(
 	 * @param string $location
 	 * @param string $visibility
 	 * @param string $targetCalendarUri
-	 * @param string $availability
+	 * @param string|null $availability
 	 * @param int $length
 	 * @param int $increment
 	 * @param int $preparationDuration
 	 * @param int $followupDuration
-	 * @param int $buffer
+	 * @param int $timeToNextSlot
 	 * @param int|null $dailyMax
-	 * @param string|null $freebusyUris
+	 * @param string[] $freebusyUris
 	 * @param int|null $start
 	 * @param int|null $end
 	 * @return JsonResponse
@@ -179,14 +179,14 @@ public function update(
 		string $location,
 		string $visibility,
 		string $targetCalendarUri,
-		string $availability,
+		?string $availability,
 		int $length,
 		int $increment,
 		int $preparationDuration = 0,
 		int $followupDuration = 0,
-		int $buffer = 0,
+		int $timeToNextSlot = 0,
 		?int $dailyMax = null,
-		?string $freebusyUris = null,
+		?array $freebusyUris = null,
 		?int $start = null,
 		?int $end = null): JsonResponse {
 		if ($this->userId === null) {
@@ -210,9 +210,9 @@ public function update(
 		$appointmentConfig->setIncrement($increment);
 		$appointmentConfig->setPreparationDuration($preparationDuration);
 		$appointmentConfig->setFollowupDuration($followupDuration);
-		$appointmentConfig->setTimeBeforeNextSlot($buffer);
+		$appointmentConfig->setTimeBeforeNextSlot($timeToNextSlot);
 		$appointmentConfig->setDailyMax($dailyMax);
-		$appointmentConfig->setCalendarFreebusyUris($freebusyUris);
+		$appointmentConfig->setCalendarFreeBusyUrisAsArray($freebusyUris ?? []);
 		$appointmentConfig->setStart($start);
 		$appointmentConfig->setEnd($end);
 
diff --git a/lib/Controller/ViewController.php b/lib/Controller/ViewController.php
index affb65bb48..9f8b930732 100644
--- a/lib/Controller/ViewController.php
+++ b/lib/Controller/ViewController.php
@@ -23,59 +23,44 @@
  */
 namespace OCA\Calendar\Controller;
 
+use OCA\Calendar\Service\Appointments\AppointmentConfigService;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
-use OCP\IInitialStateService;
 use OCP\IRequest;
 
-/**
- * Class ViewController
- *
- * @package OCA\Calendar\Controller
- */
 class ViewController extends Controller {
 
-	/**
-	 * @var IConfig
-	 */
+	/** @var IConfig */
 	private $config;
 
-	/**
-	 * @var string
-	 */
-	private $userId;
+	/** @var AppointmentConfigService */
+	private $appointmentConfigService;
 
-	/**
-	 * @var IInitialStateService
-	 */
+	/** @var IInitialState */
 	private $initialStateService;
 
-	/**
-	 * @var IAppManager
-	 */
+	/** @var IAppManager */
 	private $appManager;
 
-	/**
-	 * @param string $appName
-	 * @param IRequest $request an instance of the request
-	 * @param IConfig $config
-	 * @param IInitialStateService $initialStateService
-	 * @param IAppManager $appManager
-	 * @param string $userId
-	 */
+	/** @var string */
+	private $userId;
+
 	public function __construct(string $appName,
 								IRequest $request,
 								IConfig $config,
-								IInitialStateService $initialStateService,
+								AppointmentConfigService $appointmentConfigService,
+								IInitialState $initialStateService,
 								IAppManager $appManager,
 								?string $userId) {
 		parent::__construct($appName, $request);
 		$this->config = $config;
-		$this->userId = $userId;
+		$this->appointmentConfigService = $appointmentConfigService;
 		$this->initialStateService = $initialStateService;
 		$this->appManager = $appManager;
+		$this->userId = $userId;
 	}
 
 	/**
@@ -113,20 +98,24 @@ public function index():TemplateResponse {
 		$talkApiVersion = version_compare($this->appManager->getAppVersion('spreed'), '12.0.0', '>=') ? 'v4' : 'v1';
 		$tasksEnabled = $this->appManager->isEnabledForUser('tasks');
 
-		$this->initialStateService->provideInitialState($this->appName, 'app_version', $appVersion);
-		$this->initialStateService->provideInitialState($this->appName, 'event_limit', $eventLimit);
-		$this->initialStateService->provideInitialState($this->appName, 'first_run', $firstRun);
-		$this->initialStateService->provideInitialState($this->appName, 'initial_view', $initialView);
-		$this->initialStateService->provideInitialState($this->appName, 'show_weekends', $showWeekends);
-		$this->initialStateService->provideInitialState($this->appName, 'show_week_numbers', $showWeekNumbers);
-		$this->initialStateService->provideInitialState($this->appName, 'skip_popover', $skipPopover);
-		$this->initialStateService->provideInitialState($this->appName, 'talk_enabled', $talkEnabled);
-		$this->initialStateService->provideInitialState($this->appName, 'talk_api_version', $talkApiVersion);
-		$this->initialStateService->provideInitialState($this->appName, 'timezone', $timezone);
-		$this->initialStateService->provideInitialState($this->appName, 'slot_duration', $slotDuration);
-		$this->initialStateService->provideInitialState($this->appName, 'default_reminder', $defaultReminder);
-		$this->initialStateService->provideInitialState($this->appName, 'show_tasks', $showTasks);
-		$this->initialStateService->provideInitialState($this->appName, 'tasks_enabled', $tasksEnabled);
+		$this->initialStateService->provideInitialState('app_version', $appVersion);
+		$this->initialStateService->provideInitialState('event_limit', $eventLimit);
+		$this->initialStateService->provideInitialState('first_run', $firstRun);
+		$this->initialStateService->provideInitialState('initial_view', $initialView);
+		$this->initialStateService->provideInitialState('show_weekends', $showWeekends);
+		$this->initialStateService->provideInitialState('show_week_numbers', $showWeekNumbers);
+		$this->initialStateService->provideInitialState('skip_popover', $skipPopover);
+		$this->initialStateService->provideInitialState('talk_enabled', $talkEnabled);
+		$this->initialStateService->provideInitialState('talk_api_version', $talkApiVersion);
+		$this->initialStateService->provideInitialState('timezone', $timezone);
+		$this->initialStateService->provideInitialState('slot_duration', $slotDuration);
+		$this->initialStateService->provideInitialState('default_reminder', $defaultReminder);
+		$this->initialStateService->provideInitialState('show_tasks', $showTasks);
+		$this->initialStateService->provideInitialState('tasks_enabled', $tasksEnabled);
+		$this->initialStateService->provideInitialState(
+			'appointmentConfigs',
+			$this->appointmentConfigService->getAllAppointmentConfigurations($this->userId),
+		);
 
 		return new TemplateResponse($this->appName, 'main');
 	}
diff --git a/src/components/AppNavigation/AppointmentConfigList.vue b/src/components/AppNavigation/AppointmentConfigList.vue
new file mode 100644
index 0000000000..33b959f83c
--- /dev/null
+++ b/src/components/AppNavigation/AppointmentConfigList.vue
@@ -0,0 +1,138 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<!--
+	 The appointments feature requires at least one calendar in the vuex store.
+	 Trying to use it before calendars are loaded will result in an error.
+	-->
+	<div
+		v-if="hasAtLeastOneCalendar"
+		class="appointment-config-list">
+		<AppNavigationCaption
+			class="appointment-config-list__caption"
+			:title="t('calendar', 'Appointments')">
+			<template
+				v-if="hasUserEmailAddress"
+				#actions>
+				<ActionButton
+					:close-after-click="true"
+					@click="showModalForNewConfig = true">
+					<PlusIcon slot="icon" :size="20" decorative />
+					{{ t('calendar', 'Add new') }}
+				</ActionButton>
+			</template>
+		</AppNavigationCaption>
+
+		<template v-if="hasUserEmailAddress">
+			<template v-if="configs.length > 0">
+				<AppointmentConfigListItem
+					v-for="config in configs"
+					:key="config.id"
+					:config="config"
+					@delete="deleteConfig(config)" />
+			</template>
+
+			<AppointmentConfigModal
+				v-if="showModalForNewConfig"
+				:is-new="true"
+				:config="defaultConfig"
+				@save="saveNewConfig"
+				@close="closeModal" />
+		</template>
+		<NoEmailAddressWarning v-else />
+	</div>
+</template>
+
+<script>
+import AppointmentConfigListItem from './AppointmentConfigList/AppointmentConfigListItem'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import PlusIcon from 'vue-material-design-icons/Plus'
+import AppointmentConfigModal from '../AppointmentConfigModal'
+import AppointmentConfig from '../../models/appointmentConfig'
+import logger from '../../utils/logger'
+import { mapGetters } from 'vuex'
+import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning'
+
+export default {
+	name: 'AppointmentConfigList',
+	components: {
+		AppointmentConfigListItem,
+		AppNavigationCaption,
+		ActionButton,
+		PlusIcon,
+		AppointmentConfigModal,
+		NoEmailAddressWarning,
+	},
+	data() {
+		return {
+			showModalForNewConfig: false,
+		}
+	},
+	computed: {
+		...mapGetters({
+			configs: 'allConfigs',
+		}),
+		defaultConfig() {
+			return AppointmentConfig.createDefault(this.$store)
+		},
+		hasAtLeastOneCalendar() {
+			return !!this.$store.getters.sortedCalendars[0]
+		},
+		hasUserEmailAddress() {
+			const principal = this.$store.getters.getCurrentUserPrincipal
+			if (!principal) {
+				return false
+			}
+
+			return !!principal.emailAddress
+		},
+	},
+	methods: {
+		closeModal() {
+			this.showModalForNewConfig = false
+		},
+		async saveNewConfig(config) {
+			logger.info('Saving new config', { config })
+
+			try {
+				await this.$store.dispatch('createConfig', { config })
+				this.closeModal()
+			} catch (error) {
+				logger.error('Creating appointment config failed', { error, config })
+			}
+		},
+		async deleteConfig(config) {
+			logger.info('Deleting config', { config })
+
+			try {
+				await this.$store.dispatch('deleteConfig', config)
+
+				logger.info('Config deleted', { config })
+			} catch (error) {
+				logger.error('Deleting appointment config failed', { config })
+			}
+		},
+	},
+}
+</script>
diff --git a/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
new file mode 100644
index 0000000000..b462e9aebc
--- /dev/null
+++ b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
@@ -0,0 +1,99 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<AppNavigationItem
+			:title="config.name">
+			<template #actions>
+				<ActionButton
+					:close-after-click="true"
+					@click="showModal = true">
+					<PencilIcon slot="icon" :size="20" decorative />
+					{{ t('calendar', 'Edit') }}
+				</ActionButton>
+				<ActionButton
+					:close-after-click="true"
+					@click="$emit('delete', $event)">
+					<TrashCanIcon slot="icon" :size="20" decorative />
+					{{ t('calendar', 'Delete') }}
+				</ActionButton>
+			</template>
+		</AppNavigationItem>
+		<AppointmentConfigModal
+			v-if="showModal"
+			:is-new="false"
+			:config="config"
+			@save="save"
+			@close="closeModal" />
+	</div>
+</template>
+
+<script>
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import PencilIcon from 'vue-material-design-icons/Pencil'
+import TrashCanIcon from 'vue-material-design-icons/TrashCan'
+import AppointmentConfig from '../../../models/appointmentConfig'
+import AppointmentConfigModal from '../../AppointmentConfigModal'
+import logger from '../../../utils/logger'
+
+export default {
+	name: 'AppointmentConfigListItem',
+	components: {
+		AppointmentConfigModal,
+		AppNavigationItem,
+		ActionButton,
+		PencilIcon,
+		TrashCanIcon,
+	},
+	props: {
+		config: {
+			type: AppointmentConfig,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			showModal: false,
+			loading: false,
+		}
+	},
+	methods: {
+		closeModal() {
+			this.showModal = false
+		},
+		async save(config) {
+			logger.info('Saving existing config', { config })
+			this.loading = true
+			try {
+				await this.$store.dispatch('updateConfig', { config })
+				this.closeModal()
+			} catch (error) {
+				logger.error('Creating appointment config failed', { error, config })
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue
new file mode 100644
index 0000000000..06a6f53788
--- /dev/null
+++ b/src/components/AppointmentConfigModal.vue
@@ -0,0 +1,224 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Modal
+		size="large"
+		@close="$emit('close')">
+		<!-- Wait for the config to become available before rendering the form. -->
+		<div v-if="editing" class="appointment-config-modal">
+			<h2>{{ title }}</h2>
+
+			<div class="appointment-config-modal__form">
+				<fieldset>
+					<TextInput
+						class="appointment-config-modal__form__row"
+						:label="t('calendar', 'Name')"
+						:value.sync="editing.name" />
+					<TextInput
+						class="appointment-config-modal__form__row"
+						:label="t('calendar', 'Location')"
+						:value.sync="editing.location" />
+					<TextArea
+						class="appointment-config-modal__form__row"
+						:label="t('calendar', 'Description')"
+						:value.sync="editing.description" />
+
+					<div class="appointment-config-modal__form__row appointment-config-modal__form__row--wrapped">
+						<div class="calendar-select">
+							<label>{{ t('calendar', 'Calendar') }}</label>
+							<CalendarPicker
+								:calendar="calendar"
+								:calendars="sortedCalendars"
+								:show-calendar-on-select="false"
+								@select-calendar="changeCalendar" />
+						</div>
+						<VisibilitySelect
+							:label="t('calendar', 'Visibility')"
+							:value.sync="editing.visibility" />
+					</div>
+
+					<div class="appointment-config-modal__form__row appointment-config-modal__form__row--wrapped">
+						<DurationInput
+							:label="t('calendar', 'Duration')"
+							:value.sync="editing.length" />
+						<DurationSelect
+							:label="t('calendar', 'Increments')"
+							:value.sync="editing.increment" />
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<header>{{ t('calendar', 'Add time before and after the event') }}</header>
+
+					<div class="appointment-config-modal__form__row appointment-config-modal__form__row--wrapped">
+						<CheckedDurationSelect
+							:label="t('calendar', 'Before the event')"
+							:enabled.sync="enablePreparationDuration"
+							:value.sync="editing.preparationDuration" />
+						<CheckedDurationSelect
+							:label="t('calendar', 'After the event')"
+							:enabled.sync="enableFollowupDuration"
+							:value.sync="editing.followupDuration" />
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<header>{{ t('calendar', 'Planning restrictions') }}</header>
+
+					<div class="appointment-config-modal__form__row appointment-config-modal__form__row--wrapped">
+						<DurationSelect
+							:label="t('calendar', 'Minimum time before next available slot')"
+							:value.sync="editing.buffer" />
+						<NumberInput
+							:label="t('calendar','Max slots per day')"
+							:value.sync="editing.dailyMax" />
+					</div>
+				</fieldset>
+			</div>
+			<button
+				class="primary appointment-config-modal__submit-button"
+				:disabled="!editing.name"
+				@click="save">
+				{{ saveButtonText }}
+			</button>
+		</div>
+	</Modal>
+</template>
+
+<script>
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import TextInput from './AppointmentConfigModal/TextInput'
+import TextArea from './AppointmentConfigModal/TextArea'
+import AppointmentConfig from '../models/appointmentConfig'
+import { getRFCProperties } from '../models/rfcProps'
+import { mapGetters } from 'vuex'
+import CalendarPicker from './Shared/CalendarPicker'
+import DurationInput from './AppointmentConfigModal/DurationInput'
+import NumberInput from './AppointmentConfigModal/NumberInput'
+import DurationSelect from './AppointmentConfigModal/DurationSelect'
+import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelect'
+import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect'
+
+export default {
+	name: 'AppointmentConfigModal',
+	components: {
+		CheckedDurationSelect,
+		CalendarPicker,
+		DurationInput,
+		Modal,
+		NumberInput,
+		TextInput,
+		TextArea,
+		DurationSelect,
+		VisibilitySelect,
+	},
+	props: {
+		config: {
+			type: AppointmentConfig,
+			required: true,
+		},
+		isNew: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			editing: undefined,
+			enablePreparationDuration: false,
+			enableFollowupDuration: false,
+		}
+	},
+	computed: {
+		...mapGetters([
+			'sortedCalendars',
+		]),
+		title() {
+			if (this.isNew) {
+				return this.$t('calendar', 'Create appointment')
+			}
+
+			return this.$t('calendar', 'Edit appointment')
+		},
+		saveButtonText() {
+			if (this.isNew) {
+				return this.$t('calendar', 'Save')
+			}
+
+			return this.$t('calendar', 'Update')
+		},
+		availabilityModel() {
+			return getRFCProperties().timeTransparency
+		},
+		availability() {
+			const availability = this.editing.availability ?? this.availabilityModel.defaultValue
+			return this.availabilityModel.options.find(opt => opt.value === availability)
+		},
+		calendar() {
+			if (!this.editing.targetCalendarUri) {
+				return this.sortedCalendars[0]
+			}
+
+			const url = this.editing.targetCalendarUri
+			return this.sortedCalendars.find(cal => cal.url === url)
+		},
+		defaultConfig() {
+			return AppointmentConfig.createDefault(this.$store)
+		},
+	},
+	watch: {
+		config() {
+			this.cloneConfig()
+		},
+	},
+	created() {
+		this.cloneConfig()
+	},
+	methods: {
+		cloneConfig() {
+			this.editing = this.config?.clone() ?? new AppointmentConfig()
+			this.enablePreparationDuration = !!this.editing.preparationDuration
+			this.enableFollowupDuration = !!this.editing.followupDuration
+		},
+		changeAvailability(value) {
+			this.editing.availability = value.value
+		},
+		changeCalendar(calendar) {
+			this.editing.targetCalendarUri = calendar.url
+		},
+		save() {
+			if (!this.enablePreparationDuration) {
+				this.editing.preparationDuration = this.defaultConfig.preparationDuration
+			}
+
+			if (!this.enableFollowupDuration) {
+				this.editing.followupDuration = this.defaultConfig.followupDuration
+			}
+
+			this.editing.targetCalendarUri ??= this.defaultConfig.targetCalendarUri
+
+			this.$emit('save', this.editing)
+		},
+	},
+}
+</script>
diff --git a/src/components/AppointmentConfigModal/CheckedDurationSelect.vue b/src/components/AppointmentConfigModal/CheckedDurationSelect.vue
new file mode 100644
index 0000000000..c7a9eb0202
--- /dev/null
+++ b/src/components/AppointmentConfigModal/CheckedDurationSelect.vue
@@ -0,0 +1,99 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="checked-duration-select">
+		<div class="checked-duration-select__checkbox-row">
+			<div class="checked-duration-select__checkbox-row__input-wrapper">
+				<input
+					:id="id"
+					:checked="enabled"
+					type="checkbox"
+					@input="$emit('update:enabled', $event.target.checked)">
+			</div>
+			<label :for="id">{{ label }}</label>
+		</div>
+		<DurationSelect
+			class="checked-duration-select__duration"
+			:disabled="!enabled"
+			:value="value"
+			@update:value="$emit('update:value', $event)" />
+	</div>
+</template>
+
+<script>
+import DurationSelect from './DurationSelect'
+import { randomId } from '../../utils/randomId'
+
+export default {
+	name: 'CheckedDurationSelect',
+	components: {
+		DurationSelect,
+	},
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: Number,
+			default: undefined,
+		},
+		enabled: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.checked-duration-select {
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+
+		&__input-wrapper {
+			flex: 0 0 20px;
+
+			input[type=checkbox] {
+				margin: 0;
+				min-height: unset;
+				cursor: pointer;
+			}
+		}
+
+		input, label {
+			display: block;
+		}
+	}
+
+	&__duration {
+		//margin-left: 20px;
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/DurationInput.vue b/src/components/AppointmentConfigModal/DurationInput.vue
new file mode 100644
index 0000000000..414b64409a
--- /dev/null
+++ b/src/components/AppointmentConfigModal/DurationInput.vue
@@ -0,0 +1,84 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="duration-input">
+		<label :for="id">{{ label }}</label>
+		<div class="input">
+			<input
+				:id="id"
+				type="number"
+				min="0"
+				:value="valueInMinutes"
+				@input="change">
+			<span>{{ t('calendar', 'minutes') }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { randomId } from '../../utils/randomId'
+
+export default {
+	name: 'DurationInput',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+	computed: {
+		valueInMinutes() {
+			return Math.round(this.value / 60)
+		},
+	},
+	methods: {
+		change(e) {
+			this.$emit('update:value', e.target.value * 60)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// TODO: move to global scss file
+.duration-input {
+	.input {
+		display: flex;
+		align-items: center;
+
+		input {
+			flex: 1 auto;
+			//max-width: 15em;
+		}
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/DurationSelect.vue b/src/components/AppointmentConfigModal/DurationSelect.vue
new file mode 100644
index 0000000000..1e3f33a7d9
--- /dev/null
+++ b/src/components/AppointmentConfigModal/DurationSelect.vue
@@ -0,0 +1,67 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Select
+		:label="label"
+		:value="value"
+		:disabled="disabled"
+		:options="options"
+		@update:value="$emit('update:value', parseInt($event))" />
+</template>
+
+<script>
+import Select from './Select'
+
+export default {
+	name: 'DurationSelect',
+	components: {
+		Select,
+	},
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		value: {
+			type: Number,
+			default: 5 * 60,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			options: [
+				{ value: 5 * 60, label: this.t('calendar', '5 minutes') },
+				{ value: 10 * 60, label: this.t('calendar', '10 minutes') },
+				{ value: 15 * 60, label: this.t('calendar', '15 minutes') },
+				{ value: 30 * 60, label: this.t('calendar', '30 minutes') },
+				{ value: 45 * 60, label: this.t('calendar', '45 minutes') },
+				{ value: 60 * 60, label: this.t('calendar', '1 hour') },
+			],
+		}
+	},
+}
+</script>
diff --git a/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
new file mode 100644
index 0000000000..18ebadd54b
--- /dev/null
+++ b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<AppNavigationItem
+		:title="title"
+		@click="openUserSettings">
+		<AlertCircleIcon slot="icon" :size="20" decorative />
+	</AppNavigationItem>
+</template>
+
+<script>
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import AlertCircleIcon from 'vue-material-design-icons/AlertCircle'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'NoEmailAddressWarning',
+	components: {
+		AppNavigationItem,
+		AlertCircleIcon,
+	},
+	computed: {
+		title() {
+			return this.t('calendar', 'To configure appointments, add your email address in personal settings.')
+		},
+	},
+	methods: {
+		openUserSettings() {
+			const url = generateUrl('settings/user')
+			window.open(url, '_blank').focus()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+	.app-navigation-entry-link {
+		align-items: center;
+		line-height: unset;
+		white-space: unset;
+	}
+
+	.app-navigation-entry__title {
+		overflow: unset !important;
+		white-space: unset !important;
+		text-overflow: unset !important;
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/NumberInput.vue b/src/components/AppointmentConfigModal/NumberInput.vue
new file mode 100644
index 0000000000..1f34004202
--- /dev/null
+++ b/src/components/AppointmentConfigModal/NumberInput.vue
@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="number-input">
+		<label :for="id">{{ label }}</label>
+		<input
+			:id="id"
+			type="number"
+			min="0"
+			:value="value"
+			@input="change">
+	</div>
+</template>
+
+<script>
+import { randomId } from '../../utils/randomId'
+
+export default {
+	name: 'NumberInput',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+	methods: {
+		change(e) {
+			this.$emit('update:value', e.target.value)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// TODO: move to global scss file
+.number-input {
+	input {
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/Select.vue b/src/components/AppointmentConfigModal/Select.vue
new file mode 100644
index 0000000000..0d0853b1fe
--- /dev/null
+++ b/src/components/AppointmentConfigModal/Select.vue
@@ -0,0 +1,81 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<label v-if="label" :for="id">{{ label }}</label>
+		<select
+			:id="id"
+			:disabled="disabled"
+			@change="onSelect">
+			<option
+				v-for="option in options"
+				:key="option.value"
+				:value="option.value"
+				v-bind="{ selected: option.value === value }">
+				{{ option.label }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<script>
+import { randomId } from '../../utils/randomId'
+
+export default {
+	name: 'Select',
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		value: {
+			type: [String, Number],
+			required: true,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		options: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+	methods: {
+		onSelect(e) {
+			this.$emit('update:value', e.target.value)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+select {
+	width: 100%;
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/TextArea.vue b/src/components/AppointmentConfigModal/TextArea.vue
new file mode 100644
index 0000000000..cf0394c48f
--- /dev/null
+++ b/src/components/AppointmentConfigModal/TextArea.vue
@@ -0,0 +1,71 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="text-area">
+		<label :for="id">{{ label }}</label>
+		<textarea
+			:id="id"
+			v-autosize="true"
+			:value="value"
+			:rows="2"
+			@input="$emit('update:value', $event.target.value)" />
+	</div>
+</template>
+
+<script>
+import { randomId } from '../../utils/randomId'
+import autosize from '../../directives/autosize'
+
+export default {
+	name: 'TextArea',
+	directives: {
+		autosize,
+	},
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// TODO: move to global scss file
+.text-area {
+	textarea {
+		display: block;
+		width: 100%;
+		resize: none;
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/TextInput.vue b/src/components/AppointmentConfigModal/TextInput.vue
new file mode 100644
index 0000000000..8b71837009
--- /dev/null
+++ b/src/components/AppointmentConfigModal/TextInput.vue
@@ -0,0 +1,69 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="text-input">
+		<label :for="id">{{ label }}</label>
+		<input
+			:id="id"
+			type="text"
+			:value="value"
+			@input="change">
+	</div>
+</template>
+
+<script>
+import { randomId } from '../../utils/randomId'
+
+export default {
+	name: 'TextInput',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			id: randomId(),
+		}
+	},
+	methods: {
+		change(e) {
+			this.$emit('update:value', e.target.value)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// TODO: move to global scss file
+.text-input {
+	input {
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/components/AppointmentConfigModal/VisibilitySelect.vue b/src/components/AppointmentConfigModal/VisibilitySelect.vue
new file mode 100644
index 0000000000..db8a3e14e1
--- /dev/null
+++ b/src/components/AppointmentConfigModal/VisibilitySelect.vue
@@ -0,0 +1,64 @@
+<!--
+  - @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Select
+		:label="label"
+		:value="value"
+		:disabled="disabled"
+		:options="options"
+		@update:value="$emit('update:value', $event)" />
+</template>
+
+<script>
+import Select from './Select'
+
+export default {
+	name: 'VisibilitySelect',
+	components: {
+		Select,
+	},
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		value: {
+			type: String,
+			default: 'PUBLIC',
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			options: [
+				{ value: 'PUBLIC', label: this.t('calendar', 'Public') },
+				{ value: 'PRIVATE', label: this.t('calendar', 'Private') },
+				{ value: 'REGISTERED', label: this.t('calendar', 'Registered users') },
+			],
+		}
+	},
+}
+</script>
diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue
index a3ec777424..ac608b38b3 100644
--- a/src/components/Appointments/AppointmentDetails.vue
+++ b/src/components/Appointments/AppointmentDetails.vue
@@ -118,15 +118,17 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .modal-container {
-  width: calc(100vw - 120px) !important;
-  height: calc(100vh - 120px) !important;
-  max-width: 600px !important;
-  max-height: 500px !important;
+	width: calc(100vw - 120px) !important;
+	height: calc(100vh - 120px) !important;
+	max-width: 600px !important;
+	max-height: 500px !important;
 }
+
 .booking-appointment-details {
 	display: flex;
 	flex-direction: row;
 }
+
 .booking-details {
 	padding-left: 30px;
 	padding-top: 80px;
@@ -137,34 +139,37 @@ export default {
 	padding-left: 120px;
 	padding-top: 40px;
 }
+
 .add-guest {
 	display: block;
 	color: var(--color-primary);
 	background-color: transparent;
 }
+
 .meeting-info {
-padding-right: 10px;
+	padding-right: 10px;
 }
+
 .meeting-text {
 	display: grid;
 	align-items: center;
 
 	textarea {
-	  resize: vertical;
-	  grid-area: 1 / 1;
-	  width: 100%;
-	  margin: 3px 3px 3px 0;
-	  padding: 7px 6px;
-	  color: var(--color-main-text);
-	  border: 1px solid var(--color-border-dark);
-	  border-radius: var(--border-radius);
-	  background-color: var(--color-main-background);
-	  cursor: text;
+		resize: vertical;
+		grid-area: 1 / 1;
+		width: 100%;
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
+		cursor: text;
 
-	  &:hover {
-		border-color: var(--color-primary-element) !important;
-		outline: none !important;
-	  }
+		&:hover {
+			border-color: var(--color-primary-element) !important;
+			outline: none !important;
+		}
 	}
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 50b6daf5e7..678c5afa89 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,7 +34,9 @@ import store from './store'
 import { sync } from 'vuex-router-sync'
 import { getRequestToken } from '@nextcloud/auth'
 import { linkTo } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
 import { translate, translatePlural } from '@nextcloud/l10n'
+import AppointmentConfig from './models/appointmentConfig'
 import ClickOutside from 'vue-click-outside'
 import VueClipboard from 'vue-clipboard2'
 import VTooltip from 'v-tooltip'
@@ -69,6 +71,11 @@ Vue.prototype.n = translatePlural
 
 windowTitleService(router, store)
 
+store.commit(
+	'addInitialConfigs',
+	loadState('calendar', 'appointmentConfigs', []).map(config => new AppointmentConfig(config))
+)
+
 export default new Vue({
 	el: '#content',
 	router,
diff --git a/src/models/appointmentConfig.js b/src/models/appointmentConfig.js
new file mode 100644
index 0000000000..b00026ad30
--- /dev/null
+++ b/src/models/appointmentConfig.js
@@ -0,0 +1,142 @@
+/**
+ * @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/** @class */
+export default class AppointmentConfig {
+
+	/** @member {?number} */
+	id
+
+	/** @member {string} */
+	name
+
+	/** @member {string} */
+	description
+
+	/** @member {string} */
+	location
+
+	/** @member {string} */
+	visibility
+
+	/** @member {string} */
+	targetCalendarUri
+
+	/** @member {string} */
+	availability
+
+	/** @member {number} */
+	length
+
+	/** @member {number} */
+	increment
+
+	/** @member {number} */
+	preparationDuration
+
+	/** @member {number} */
+	followupDuration
+
+	/** @member {number} */
+	buffer
+
+	/** @member {?number} */
+	dailyMax
+
+	/** @member {?string} */
+	freebusyUris
+
+	/**
+	 * Create a new AppointmentConfig from the given plain object data
+	 *
+	 * @param {{dailyMax: ?number, visibility: string, preparationDuration: number, length: number, description: string, increment: number, availability: string, followupDuration: number, name: string, location: string, id: ?number, buffer: number, targetCalendarUri: string, freebusyUris: ?string}} data The plain object containing the data from this instance
+	 */
+	constructor(data) {
+		data ??= {}
+		this.id = data.id
+		this.name = data.name
+		this.description = data.description
+		this.location = data.location
+		this.visibility = data.visibility
+		this.targetCalendarUri = data.targetCalendarUri
+		this.availability = data.availability
+		this.length = tryParseInt(data.length) ?? 0
+		this.increment = tryParseInt(data.increment) ?? 0
+		this.preparationDuration = tryParseInt(data.preparationDuration)
+		this.followupDuration = tryParseInt(data.followupDuration)
+		this.buffer = tryParseInt(data.buffer)
+		this.dailyMax = tryParseInt(data.dailyMax)
+		this.freebusyUris = data.freebusyUris
+	}
+
+	static createDefault(store) {
+		return new AppointmentConfig({
+			name: '',
+			description: '',
+			location: '',
+			targetCalendarUri: store.getters.sortedCalendars[0].url,
+			availability: '',
+			visibility: 'PUBLIC',
+			length: 5 * 60,
+			increment: 15 * 60,
+			preparationDuration: 0,
+			followupDuration: 0,
+			buffer: 0,
+			freebusyUris: [],
+		})
+
+	}
+
+	/**
+	 * Clone this instance
+	 *
+	 * @return {AppointmentConfig} A cloned version of this instance
+	 */
+	clone() {
+		return AppointmentConfig.fromJSON(JSON.stringify(this))
+	}
+
+	/**
+	 * Parse a JSON string into a new AppointmentConfig instance
+	 *
+	 * @param {string} jsonString The JSON string to parse
+	 * @return {AppointmentConfig} New instance parsed from given JSON string
+	 */
+	static fromJSON(jsonString) {
+		return new AppointmentConfig(JSON.parse(jsonString))
+	}
+
+}
+
+/**
+ * Try to parse an int from the given value or return undefined
+ *
+ * @param {string|null|undefined} value The value to parse
+ * @return {number|undefined} Parsed number or undefined
+ */
+function tryParseInt(value) {
+	if (value === null || value === undefined) {
+		return undefined
+	}
+
+	return parseInt(value)
+}
diff --git a/src/services/appointmentConfigService.js b/src/services/appointmentConfigService.js
new file mode 100644
index 0000000000..f112d2cb0a
--- /dev/null
+++ b/src/services/appointmentConfigService.js
@@ -0,0 +1,69 @@
+/**
+ * @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import AppointmentConfig from '../models/appointmentConfig'
+import logger from '../utils/logger'
+
+/**
+ * Create a new appointment config in the backend
+ *
+ * @param {AppointmentConfig} config The config to save
+ * @return {Promise<AppointmentConfig>} Full appointment config with an id
+ */
+export async function createConfig(config) {
+	const url = generateUrl('/apps/calendar/v1/appointment_configs')
+
+	const response = await axios.post(url, config)
+	return new AppointmentConfig(response.data.data)
+}
+
+/**
+ * Delete a stored appointment config from the backend
+ *
+ * @param {number} id The id of the config
+ * @return {Promise<void>}
+ */
+export async function deleteConfig(id) {
+	const url = generateUrl('/apps/calendar/v1/appointment_configs/{id}', {
+		id,
+	})
+
+	await axios.delete(url)
+}
+
+/**
+ * Update an appointment config in the backend
+ *
+ * @param {AppointmentConfig} config The config to update
+ * @return {Promise<AppointmentConfig>} Updated appointment config as stored in the backend
+ */
+export async function updateConfig(config) {
+	logger.info('Deleting config', { config, id: config.id })
+	const url = generateUrl('/apps/calendar/v1/appointment_configs/{id}', {
+		id: config.id,
+	})
+
+	const response = await axios.put(url, config)
+	return new AppointmentConfig(response.data.data)
+}
diff --git a/src/store/appointmentConfigs.js b/src/store/appointmentConfigs.js
new file mode 100644
index 0000000000..1faf0bc3e6
--- /dev/null
+++ b/src/store/appointmentConfigs.js
@@ -0,0 +1,92 @@
+/**
+ * @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { createConfig, deleteConfig, updateConfig } from '../services/appointmentConfigService'
+import logger from '../utils/logger'
+
+const state = {
+	configs: {},
+}
+
+const mutations = {
+	addInitialConfigs(state, configs) {
+		for (const config of configs) {
+			Vue.set(state.configs, config.id, config)
+		}
+	},
+	updateConfig(state, { config }) {
+		if (!state.configs[config.id]) {
+			return
+		}
+
+		Vue.set(state.configs, config.id, config.clone())
+	},
+	addConfig(state, { config }) {
+		Vue.set(state.configs, config.id, config)
+	},
+	deleteConfig(state, { id }) {
+		if (!state.configs[id]) {
+			return
+		}
+
+		Vue.delete(state.configs, id)
+	},
+}
+
+const getters = {
+	allConfigs(state) {
+		return Object.values(state.configs)
+	},
+}
+
+const actions = {
+	async updateConfig({ commit }, { config }) {
+		try {
+			const updatedConfig = await updateConfig(config)
+			commit('updateConfig', { config: updatedConfig })
+		} catch (error) {
+			logger.error('Failed to update config', { error })
+			throw error
+		}
+	},
+	async createConfig({ commit }, { config }) {
+		try {
+			const fullConfig = await createConfig(config)
+			commit('addConfig', { config: fullConfig })
+		} catch (error) {
+			logger.error('Failed to create config', { error })
+			throw error
+		}
+	},
+	async deleteConfig({ commit }, { id }) {
+		try {
+			await deleteConfig(id)
+			commit('deleteConfig', { id })
+		} catch (error) {
+			logger.error('Failed to delete config', { error })
+			throw error
+		}
+	},
+}
+
+export default { state, mutations, getters, actions }
diff --git a/src/store/index.js b/src/store/index.js
index c514632258..400b977365 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -36,11 +36,13 @@ import importFiles from './importFiles'
 import importState from './importState'
 import principals from './principals.js'
 import settings from './settings.js'
+import appointmentConfigs from './appointmentConfigs'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
 	modules: {
+		appointmentConfigs,
 		calendarObjectInstance,
 		calendarObjects,
 		calendars,
diff --git a/src/utils/randomId.js b/src/utils/randomId.js
new file mode 100644
index 0000000000..b35c385132
--- /dev/null
+++ b/src/utils/randomId.js
@@ -0,0 +1,33 @@
+/**
+ * @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * Generate a random hex id to use with vue components.
+ *
+ * WARNING: This method does not use a secure random generator and isn't suited for
+ * cryptographic purposes.
+ *
+ * @return {string} A random hex id
+ */
+export function randomId() {
+	return Math.random().toString(16).slice(2)
+}
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 0fc483e0c4..106a648137 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -26,6 +26,7 @@
 			<AppNavigationHeader :is-public="!isAuthenticatedUser" />
 			<template #list>
 				<AppNavigationSpacer />
+
 				<!-- Calendar / Subscription List -->
 				<CalendarList
 					:is-public="!isAuthenticatedUser"
@@ -33,6 +34,12 @@
 				<CalendarListNew
 					v-if="!loadingCalendars && isAuthenticatedUser"
 					:disabled="loadingCalendars" />
+
+				<!-- Appointment Configuration List -->
+				<AppNavigationSpacer />
+				<AppointmentConfigList />
+
+				<!-- Trashbin -->
 				<Trashbin v-if="hasTrashBin" />
 			</template>
 			<!-- Settings and import -->
@@ -94,10 +101,12 @@ import {
 } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
 import Trashbin from '../components/AppNavigation/CalendarList/Trashbin'
+import AppointmentConfigList from '../components/AppNavigation/AppointmentConfigList'
 
 export default {
 	name: 'Calendar',
 	components: {
+		AppointmentConfigList,
 		CalendarGrid,
 		EmptyCalendar,
 		EmbedTopNavigation,
diff --git a/tests/javascript/unit/utils/randomId.test.js b/tests/javascript/unit/utils/randomId.test.js
new file mode 100644
index 0000000000..9e84e136aa
--- /dev/null
+++ b/tests/javascript/unit/utils/randomId.test.js
@@ -0,0 +1,31 @@
+/**
+ * @copyright Copyright (c) 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randomId } from '../../../../src/utils/randomId'
+
+describe('utils/randomId test suite', () => {
+	it('should generate hex strings', () => {
+		for (let i = 0; i < 10; i++) {
+			expect(randomId()).toMatch(/^[a-f0-9]+$/)
+		}
+	})
+})
diff --git a/tests/php/unit/Controller/ViewControllerTest.php b/tests/php/unit/Controller/ViewControllerTest.php
index 09cdc70fb0..7de9fef908 100755
--- a/tests/php/unit/Controller/ViewControllerTest.php
+++ b/tests/php/unit/Controller/ViewControllerTest.php
@@ -1,6 +1,7 @@
 <?php
 
 declare(strict_types=1);
+
 /**
  * Calendar App
  *
@@ -24,10 +25,12 @@
 
 namespace OCA\Calendar\Controller;
 
+use OCA\Calendar\Db\AppointmentConfig;
+use OCA\Calendar\Service\Appointments\AppointmentConfigService;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
-use OCP\IInitialStateService;
 use OCP\IRequest;
 use ChristophWurst\Nextcloud\Testing\TestCase;
 use PHPUnit\Framework\MockObject\MockObject;
@@ -46,7 +49,10 @@ class ViewControllerTest extends TestCase {
 	/** @var IConfig|MockObject */
 	private $config;
 
-	/** @var IInitialStateService|MockObject */
+	/** @var AppointmentConfigService|MockObject */
+	private $appointmentContfigService;
+
+	/** @var IInitialState|MockObject */
 	private $initialStateService;
 
 	/** @var string */
@@ -60,11 +66,19 @@ protected function setUp(): void {
 		$this->request = $this->createMock(IRequest::class);
 		$this->appManager = $this->createMock(IAppManager::class);
 		$this->config = $this->createMock(IConfig::class);
-		$this->initialStateService = $this->createMock(IInitialStateService::class);
+		$this->appointmentContfigService = $this->createMock(AppointmentConfigService::class);
+		$this->initialStateService = $this->createMock(IInitialState::class);
 		$this->userId = 'user123';
 
-		$this->controller = new ViewController($this->appName, $this->request,
-			$this->config, $this->initialStateService, $this->appManager, $this->userId);
+		$this->controller = new ViewController(
+			$this->appName,
+			$this->request,
+			$this->config,
+			$this->appointmentContfigService,
+			$this->initialStateService,
+			$this->appManager,
+			$this->userId,
+		);
 	}
 
 	public function testIndex(): void {
@@ -107,24 +121,29 @@ public function testIndex(): void {
 			->willReturnMap([
 				['spreed', true, '12.0.0'],
 			]);
+		$this->appointmentContfigService->expects(self::once())
+			->method('getAllAppointmentConfigurations')
+			->with($this->userId)
+			->willReturn([new AppointmentConfig()]);
 
 		$this->initialStateService
 			->method('provideInitialState')
 			->withConsecutive(
-				['calendar', 'app_version', '1.0.0'],
-				['calendar', 'event_limit', true],
-				['calendar', 'first_run', true],
-				['calendar', 'initial_view', 'timeGridWeek'],
-				['calendar', 'show_weekends', true],
-				['calendar', 'show_week_numbers', true],
-				['calendar', 'skip_popover', true],
-				['calendar', 'talk_enabled', true],
-				['calendar', 'talk_api_version', 'v4'],
-				['calendar', 'timezone', 'Europe/Berlin'],
-				['calendar', 'slot_duration', '00:15:00'],
-				['calendar', 'default_reminder', '00:10:00'],
-				['calendar', 'show_tasks', false],
-				['calendar', 'tasks_enabled', true]
+				['app_version', '1.0.0'],
+				['event_limit', true],
+				['first_run', true],
+				['initial_view', 'timeGridWeek'],
+				['show_weekends', true],
+				['show_week_numbers', true],
+				['skip_popover', true],
+				['talk_enabled', true],
+				['talk_api_version', 'v4'],
+				['timezone', 'Europe/Berlin'],
+				['slot_duration', '00:15:00'],
+				['default_reminder', '00:10:00'],
+				['show_tasks', false],
+				['tasks_enabled', true],
+				['appointmentConfigs', [new AppointmentConfig()]],
 			);
 
 		$response = $this->controller->index();
@@ -185,20 +204,20 @@ public function testIndexViewFix(string $savedView, string $expectedView): void
 		$this->initialStateService
 			->method('provideInitialState')
 			->withConsecutive(
-				['calendar', 'app_version', '1.0.0'],
-				['calendar', 'event_limit', true],
-				['calendar', 'first_run', true],
-				['calendar', 'initial_view', $expectedView],
-				['calendar', 'show_weekends', true],
-				['calendar', 'show_week_numbers', true],
-				['calendar', 'skip_popover', true],
-				['calendar', 'talk_enabled', false],
-				['calendar', 'talk_api_version', 'v1'],
-				['calendar', 'timezone', 'Europe/Berlin'],
-				['calendar', 'slot_duration', '00:15:00'],
-				['calendar', 'default_reminder', '00:10:00'],
-				['calendar', 'show_tasks', false],
-				['calendar', 'tasks_enabled', false]
+				['app_version', '1.0.0'],
+				['event_limit', true],
+				['first_run', true],
+				['initial_view', $expectedView],
+				['show_weekends', true],
+				['show_week_numbers', true],
+				['skip_popover', true],
+				['talk_enabled', false],
+				['talk_api_version', 'v1'],
+				['timezone', 'Europe/Berlin'],
+				['slot_duration', '00:15:00'],
+				['default_reminder', '00:10:00'],
+				['show_tasks', false],
+				['tasks_enabled', false]
 			);
 
 		$response = $this->controller->index();