diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 260f2be49..15c22a129 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -6,11 +6,9 @@ import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
 import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
-  bookingStatus,
   ColorSchemes,
   dateFormatStrings,
   defaultSlotDuration,
-  qalendarSlotDurations,
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
@@ -38,6 +36,25 @@ const {
   events, appointments, schedules, isBookingRoute, currentDate, fixedDuration,
 } = toRefs(props);
 
+const bookingStatus = {
+  none: 1,
+  requested: 2,
+  booked: 3,
+};
+
+/**
+ * Only available duration values supported for Qalendar
+ * This defines basically the number of intervals there will be.
+ * See: https://tomosterlund.github.io/qalendar/guide.html#intervals
+ * @enum
+ * @readonly
+ */
+const qalendarSlotDurations = {
+  15: 15,
+  30: 30,
+  60: 60,
+};
+
 const qalendarRef = ref();
 
 const isValidMode = (mode) => ['#day', '#week', '#month'].indexOf(mode) !== -1;
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index d31d93a53..63ff0d5e5 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -1,406 +1,30 @@
-<template>
-  <div class="sticky top-24 flex flex-col gap-4 rounded-2xl bg-zinc-100 dark:bg-gray-600">
-    <div class="flex flex-col gap-4 px-1 py-4">
-      <div class="flex items-center justify-around text-center text-xl font-semibold text-teal-500">
-        <span class="pl-3">{{ t("heading.generalAvailability") }}</span>
-        <switch-toggle
-          v-if="existing"
-          class="mt-0.5 pr-3"
-          :active="schedule.active"
-          no-legend
-          @changed="toggleActive"
-          :title="t(schedule.active ? 'label.deactivateSchedule' : 'label.activateSchedule')"
-        />
-      </div>
-      <alert-box
-        @close="scheduleCreationError = ''"
-        v-if="scheduleCreationError"
-      >
-        {{ scheduleCreationError }}
-      </alert-box>
-
-      <div class="px-4">
-        <label for="scheduleName" class="flex-column flex">
-          <input
-            id="scheduleName"
-            type="text"
-            v-model="scheduleInput.name"
-            :placeholder="t('placeholder.mySchedule')"
-            :disabled="!scheduleInput.active"
-            class="place-holder w-full rounded-none border-0 border-b bg-transparent px-0 dark:bg-transparent"
-            required
-          />
-          <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
-        </label>
-      </div>
-      <!-- step 1 -->
-      <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep1}"
-        id="schedule-availability"
-      >
-        <div
-          @click="state = scheduleCreationState.availability"
-          class="btn-step-1 flex cursor-pointer items-center justify-between"
-        >
-          <div class="flex flex-col gap-1">
-            <h2>
-              {{ t("label.chooseYourAvailability") }}
-            </h2>
-            <h3 class="text-xs">
-              {{ t('label.scheduleSettings.availabilitySubHeading') }}
-            </h3>
-          </div>
-          <icon-chevron-down
-            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
-            :class="{ '!rotate-0': activeStep1 }"
-          />
-        </div>
-        <div v-show="activeStep1" class="flex flex-col gap-3">
-          <hr/>
-          <div class="flex w-full flex-col justify-between gap-2 md:flex-row lg:gap-4">
-            <label class="w-full">
-              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-                {{ t("label.startTime") }}
-              </div>
-              <input
-                type="time"
-                v-model="scheduleInput.start_time"
-                :disabled="!scheduleInput.active"
-                class="text-md min-h-10 w-full rounded-lg leading-4 tracking-tight"
-              />
-            </label>
-            <label class="w-full">
-              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-                {{ t("label.endTime") }}
-              </div>
-              <input
-                type="time"
-                v-model="scheduleInput.end_time"
-                :disabled="!scheduleInput.active"
-                class="text-md min-h-10 w-full rounded-lg leading-4 tracking-tight"
-              />
-            </label>
-          </div>
-          <div>
-            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.availableDays") }}
-            </div>
-            <div class="grid grid-flow-col grid-cols-2 grid-rows-4 gap-2 rounded-lg p-4">
-              <label
-                v-for="w in isoWeekdays"
-                :key="w.iso"
-                class="flex cursor-pointer select-none items-center gap-2 text-sm"
-              >
-                <input
-                  type="checkbox"
-                  v-model="scheduleInput.weekdays"
-                  :value="w.iso"
-                  :disabled="!scheduleInput.active"
-                  class="size-5 text-teal-500"
-                />
-                <span>{{ w.long }}</span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- step 2 -->
-      <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50':activeStep2}"
-        id="schedule-settings"
-      >
-        <div
-          @click="state = scheduleCreationState.settings"
-          class="btn-step-2 flex cursor-pointer items-center justify-between"
-        >
-          <div class="flex flex-col gap-1">
-            <h2>
-              {{ t("label.scheduleDetails") }}
-            </h2>
-            <h3 class="text-xs">
-              {{ t('label.scheduleSettings.schedulingDetailsSubHeading') }}
-            </h3>
-          </div>
-          <icon-chevron-down
-            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
-            :class="{ '!rotate-0': activeStep2 }"
-          />
-        </div>
-        <div v-show="activeStep2" class="flex flex-col gap-3">
-          <hr/>
-          <label>
-            <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.selectCalendar") }}
-            </div>
-            <select v-model="scheduleInput.calendar_id" class="w-full rounded-md" :disabled="!scheduleInput.active">
-              <option
-                v-for="calendar in calendars"
-                :key="calendar.id"
-                :value="calendar.id"
-              >
-                {{ calendar.title }}
-              </option>
-            </select>
-          </label>
-          <div class="grid grid-cols-2 gap-4">
-            <label>
-              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-                {{ t("label.earliestBooking") }}
-              </div>
-              <select
-                v-model="scheduleInput.earliest_booking"
-                class="w-full rounded-md capitalize"
-                :disabled="!scheduleInput.active"
-              >
-                <option
-                  v-for="(label, value) in earliestOptions"
-                  :key="value"
-                  :value="value"
-                >
-                  {{ label }}
-                </option>
-              </select>
-            </label>
-            <label>
-              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-                {{ t("label.farthestBooking") }}
-              </div>
-              <select
-                v-model="scheduleInput.farthest_booking"
-                class="w-full rounded-md"
-                :disabled="!scheduleInput.active"
-              >
-                <option
-                  v-for="(label, value) in farthestOptions"
-                  :key="value"
-                  :value="value"
-                >
-                  {{ label }}
-                </option>
-              </select>
-            </label>
-            <label class="col-span-2">
-              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
-                {{ t("label.slotLength") }}
-              </div>
-              <select
-                v-model="scheduleInput.slot_duration"
-                :disabled="!scheduleInput.active"
-                class="w-7/12 rounded-md"
-              >
-                <option
-                  v-for="(label, value) in durationOptions"
-                  :key="value"
-                  :value="value"
-                >
-                  {{ label }}
-                </option>
-              </select>
-            </label>
-          </div>
-          <div class="flex-center rounded-lg bg-white px-4 py-6 text-center text-sm dark:bg-gray-800">
-            <div>{{
-                t('text.recipientsCanScheduleBetween', {
-                  duration: duration,
-                  earliest: earliest,
-                  farthest: farthest
-                })
-              }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- step 3 -->
-      <div
-        @click="state = scheduleCreationState.details"
-        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep3}"
-        id="schedule-details"
-      >
-        <div class="flex cursor-pointer items-center justify-between">
-          <div class="flex flex-col gap-1">
-            <h2>
-              {{ t("label.meetingDetails") }}
-            </h2>
-            <h3 class="text-xs">
-              {{ t('label.scheduleSettings.meetingDetailsSubHeading') }}
-            </h3>
-          </div>
-          <icon-chevron-down
-            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
-            :class="{ '!rotate-0': activeStep3 }"
-          />
-        </div>
-        <div v-show="activeStep3" class="flex flex-col gap-2">
-          <hr/>
-          <label class="tooltip-label">
-            <div class="relative mb-1 flex flex-row items-center gap-2 font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.videoLink") }}
-              <span class="relative cursor-help" role="tooltip" aria-labelledby="video-link-tooltip">
-              <icon-info-circle class="tooltip-icon w-4" aria-hidden="true"/>
-                <span class="tooltip hidden">
-                  <transition>
-                      <tool-tip id="video-link-tooltip" class="tooltip left-[-8.5rem]  w-72" :content="t('text.videoLinkNotice')"/>
-                  </transition>
-                </span>
-            </span>
-            </div>
-            <input
-              type="text"
-              v-model="scheduleInput.location_url"
-              v-if="scheduleInput.meeting_link_provider === meetingLinkProviderType.none"
-              :placeholder="t('placeholder.zoomCom')"
-              :disabled="!scheduleInput.active || scheduleInput.meeting_link_provider !== meetingLinkProviderType.none"
-              class="place-holder w-full rounded-md disabled:cursor-not-allowed"
-            />
-          </label>
-          <label class="flex items-center gap-2">
-            <input
-              type="checkbox"
-              :checked="scheduleInput.meeting_link_provider === meetingLinkProviderType.zoom"
-              :disabled="!scheduleInput.active || !hasZoomAccount"
-              @change="toggleZoomLinkCreation"
-              class="size-5 rounded-md"
-            />
-            <div class="font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.generateZoomLink") }}
-            </div>
-          </label>
-          <label class="relative flex flex-col gap-1">
-            <div class="font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.notes") }}
-            </div>
-            <textarea
-              v-model="scheduleInput.details"
-              :placeholder="t('placeholder.writeHere')"
-              :disabled="!scheduleInput.active"
-              class="place-holder h-24 w-full resize-none rounded-md text-sm"
-              :maxlength="charLimit"
-            ></textarea>
-            <div
-              class="absolute bottom-3 right-3 text-xs"
-              :class="{
-              'text-orange-500': charCount >= charLimit * 0.92,
-              '!text-rose-600': charCount === charLimit,
-            }"
-            >
-              {{ charCount }}/{{ charLimit }}
-            </div>
-          </label>
-        </div>
-      </div>
-      <!-- option to deactivate confirmation -->
-      <div class="px-4">
-        <switch-toggle
-          class="my-1 pr-3 text-sm font-medium text-gray-500 dark:text-gray-300"
-          :active="schedule.booking_confirmation"
-          :label="t('label.bookingConfirmation')"
-          :disabled="!scheduleInput.active"
-          @changed="toggleBookingConfirmation"
-          no-legend
-        />
-        <div class="text-xs">
-          {{ t('text.ownerNeedsToConfirmBooking') }}
-        </div>
-      </div>
-    </div>
-    <!-- Snack-ish Bar - The dark info bubble at the bottom of this form -->
-    <!-- First time no calendars -->
-    <snackish-bar :show-icon=true v-if="!calendarStore.hasConnectedCalendars">
-      <div class="flex flex-col gap-2">
-        <p>{{ t('text.scheduleSettings.noCalendars') }}</p>
-        <u><a href="/settings/calendar">{{ t('text.scheduleSettings.clickHereToConnect') }}</a></u>
-      </div>
-    </snackish-bar>
-    <!-- No schedule? Create one please! -->
-    <snackish-bar v-else-if="!existing">
-      <div class="flex flex-col items-center justify-center gap-2">
-        <p>{{ t('text.scheduleSettings.create') }}</p>
-        <primary-button
-          :label="t('label.save')"
-          class="btn-save w-1/2"
-          @click="saveSchedule(!existing)"
-          :waiting="savingInProgress"
-          :disabled="!scheduleInput.active"
-          :title="t('label.save')"
-        />
-      </div>
-    </snackish-bar>
-    <!-- Schedule is not active -->
-    <snackish-bar :show-icon=true v-else-if="!scheduleInput.active">
-      <p>{{ t('text.scheduleSettings.notActive') }}</p>
-    </snackish-bar>
-    <!-- Form is dirty, please clean it -->
-    <snackish-bar v-else-if="isFormDirty">
-      <div class="flex flex-col gap-2">
-      <p>{{ t('text.scheduleSettings.formDirty') }}</p>
-      <div class="flex gap-4">
-          <secondary-button
-            :label="t('label.revert')"
-            class="btn-revert w-1/2"
-            @click="resetSchedule()"
-            :disabled="!scheduleInput.active"
-            :title="t('label.revert')"
-          />
-          <primary-button
-            :label="t('label.save')"
-            class="btn-save w-1/2"
-            @click="saveSchedule(!existing)"
-            :waiting="savingInProgress"
-            :disabled="!scheduleInput.active"
-            :title="t('label.save')"
-          />
-        </div>
-        </div>
-    </snackish-bar>
-    <div v-else>
-      <div class="my-8 flex justify-center gap-4">
-        <primary-button
-          v-if="user.myLink && existing"
-          :label="t('label.shareMyLink')"
-          class="btn-copy"
-          :copy="user.myLink"
-          :title="t('label.copy')"
-        />
-      </div>
-    </div>
-  </div>
-  <!-- modals -->
-  <appointment-created-modal
-    :open="savedConfirmation.show"
-    :is-schedule="true"
-    :title="savedConfirmation.title"
-    :public-link="user.data.signedUrl"
-    @close="closeCreatedModal"
-  />
-</template>
-
-<script setup>
+<script setup lang="ts">
 import {
-  dateFormatStrings, defaultSlotDuration, locationTypes, meetingLinkProviderType, scheduleCreationState,
-} from '@/definitions.ts';
+  DateFormatStrings, defaultSlotDuration, EventLocationType, MeetingLinkProviderType, ScheduleCreationState,
+} from '@/definitions';
+import { Calendar, Schedule, Slot, ScheduleAppointment, Error } from "@/models";
 import {
-  ref, reactive, computed, inject, watch, onMounted,
+  ref, reactive, computed, inject, watch, onMounted, Ref
 } from 'vue';
+import { Dayjs } from 'dayjs';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
-import AppointmentCreatedModal from '@/components/AppointmentCreatedModal';
-import PrimaryButton from '@/elements/PrimaryButton';
-import SecondaryButton from '@/elements/SecondaryButton';
+import { dayjsKey, callKey, isoWeekdaysKey } from '@/keys';
+
+import AppointmentCreatedModal from '@/components/AppointmentCreatedModal.vue';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+import AlertBox from '@/elements/AlertBox.vue';
+import SwitchToggle from '@/elements/SwitchToggle.vue';
+import ToolTip from '@/elements/ToolTip.vue';
+import SnackishBar from '@/elements/SnackishBar.vue';
 
 // icons
 import { IconChevronDown, IconInfoCircle } from '@tabler/icons-vue';
 
-import AlertBox from '@/elements/AlertBox';
-import SwitchToggle from '@/elements/SwitchToggle';
-import ToolTip from '@/elements/ToolTip.vue';
+// stores
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useExternalConnectionsStore } from '@/stores/external-connections-store';
-
-import SnackishBar from '@/elements/SnackishBar.vue';
-import { dayjsKey } from '@/keys';
 import { useScheduleStore } from '@/stores/schedule-store';
 
 // component constants
@@ -410,11 +34,10 @@ const externalConnectionStore = useExternalConnectionsStore();
 const scheduleStore = useScheduleStore();
 const { t } = useI18n();
 const dj = inject(dayjsKey);
-const call = inject('call');
-const isoWeekdays = inject('isoWeekdays');
-const dateFormat = dateFormatStrings.qalendarFullDay;
-
-const firstStep = scheduleCreationState.availability;
+const call = inject(callKey);
+const isoWeekdays = inject(isoWeekdaysKey);
+const dateFormat = DateFormatStrings.QalendarFullDay;
+const firstStep = ScheduleCreationState.Availability;
 
 // component emits
 const emit = defineEmits(['created', 'updated']);
@@ -422,11 +45,12 @@ const emit = defineEmits(['created', 'updated']);
 const hasZoomAccount = computed(() => externalConnectionStore.zoom[0]);
 
 // component properties
-const props = defineProps({
-  calendars: Array, // list of user defined calendars
-  schedule: Object, // existing schedule to update or null
-  activeDate: Object, // dayjs object indicating the currently active calendar view date
-});
+interface Props {
+  calendars: Calendar[], // list of user defined calendars
+  schedule: Schedule, // existing schedule to update or null
+  activeDate: Dayjs, // dayjs object indicating the currently active calendar view date
+}
+const props = defineProps<Props>();
 
 // check if existing schedule is given
 const existing = computed(() => Boolean(props.schedule) && Boolean(props.schedule.calendar.connected));
@@ -439,8 +63,8 @@ const state = ref(firstStep);
 // second step is the availability configuration
 // third step are the booking settings
 const activeStep1 = computed(() => state.value === firstStep);
-const activeStep2 = computed(() => state.value === scheduleCreationState.settings);
-const activeStep3 = computed(() => state.value === scheduleCreationState.details);
+const activeStep2 = computed(() => state.value === ScheduleCreationState.Settings);
+const activeStep3 = computed(() => state.value === ScheduleCreationState.Details);
 const visitedStep1 = ref(false);
 
 // calculate calendar titles
@@ -453,11 +77,11 @@ const calendarTitles = computed(() => {
 });
 
 // default schedule object (for start and reset) and schedule form data
-const defaultSchedule = {
+const defaultSchedule: Schedule = {
   active: calendarStore.hasConnectedCalendars,
   name: `${user.data.name}'s Availability`,
   calendar_id: props.calendars[0]?.id,
-  location_type: locationTypes.inPerson,
+  location_type: EventLocationType.InPerson,
   location_url: '',
   details: '',
   start_date: dj().format(dateFormat),
@@ -468,7 +92,7 @@ const defaultSchedule = {
   farthest_booking: 20160,
   weekdays: [1, 2, 3, 4, 5],
   slot_duration: defaultSlotDuration,
-  meeting_link_provider: meetingLinkProviderType.none,
+  meeting_link_provider: MeetingLinkProviderType.None,
   booking_confirmation: true,
 };
 const scheduleInput = ref({ ...defaultSchedule });
@@ -513,7 +137,7 @@ const scheduledRangeMinutes = computed(() => {
 
 // generate time slots from current schedule configuration for the displayed month
 const getSlotPreviews = () => {
-  const slots = [];
+  const slots: Slot[] = [];
   // Add 1 week to the end of month here to display slots in displayed next month days too
   const end = scheduleInput.value.end_date
     ? dj.min(dj(scheduleInput.value.end_date), dj(props.activeDate).endOf('month').add(1, 'week'))
@@ -534,7 +158,7 @@ const getSlotPreviews = () => {
   return slots;
 };
 // generate an appointment object with slots from current schedule data
-const getScheduleAppointment = () => ({
+const getScheduleAppointment = (): ScheduleAppointment => ({
   title: scheduleInput.value.name,
   calendar_id: scheduleInput.value.calendar_id,
   calendar_title: calendarTitles.value[scheduleInput.value.calendar_id],
@@ -573,8 +197,10 @@ const durationOptions = {};
 });
 
 // humanize selected durations
-const earliest = computed(() => (parseInt(scheduleInput.value.earliest_booking, 10) === 0
-  ? t('label.now') : dj.duration(scheduleInput.value.earliest_booking, 'minutes').humanize()));
+const earliest = computed(() => scheduleInput.value.earliest_booking === 0
+  ? t('label.now')
+  : dj.duration(scheduleInput.value.earliest_booking, 'minutes').humanize()
+);
 const farthest = computed(() => dj.duration(scheduleInput.value.farthest_booking, 'minutes').humanize());
 const duration = computed(() => t('units.minutes', { value: scheduleInput.value.slot_duration }));
 
@@ -595,6 +221,7 @@ const resetSchedule = (resetData = true) => {
   }
 };
 
+// TODO: Is this function still needed? It's currently unused.
 const handleErrorResponse = (responseData) => {
   scheduleCreationError.value = null;
 
@@ -664,9 +291,9 @@ const saveSchedule = async (withConfirmation = true) => {
     ? await scheduleStore.updateSchedule(call, props.schedule.id, obj)
     : await scheduleStore.createSchedule(call, obj);
 
-  if (response.error) {
+  if (response.hasOwnProperty('error')) {
     // error message is in data
-    scheduleCreationError.value = response.message;
+    scheduleCreationError.value = (response as Error).message;
     // go back to the start
     savingInProgress.value = false;
     window.scrollTo(0, 0);
@@ -674,7 +301,7 @@ const saveSchedule = async (withConfirmation = true) => {
   }
 
   // Otherwise it's just data!
-  const { data } = response;
+  const data = response as Ref<Schedule>;
 
   if (withConfirmation) {
     // show confirmation
@@ -690,23 +317,23 @@ const saveSchedule = async (withConfirmation = true) => {
 };
 
 // handle schedule activation / deactivation
-const toggleActive = async (newValue) => {
+const toggleActive = async (newValue: boolean) => {
   scheduleInput.value.active = newValue;
   await saveSchedule(false);
 };
 
 // Work-around for v-model and value not working for some reason...
 const toggleZoomLinkCreation = () => {
-  if (scheduleInput.value.meeting_link_provider === meetingLinkProviderType.none) {
-    scheduleInput.value.meeting_link_provider = meetingLinkProviderType.zoom;
+  if (scheduleInput.value.meeting_link_provider === MeetingLinkProviderType.None) {
+    scheduleInput.value.meeting_link_provider = MeetingLinkProviderType.Zoom;
     return;
   }
 
-  scheduleInput.value.meeting_link_provider = meetingLinkProviderType.none;
+  scheduleInput.value.meeting_link_provider = MeetingLinkProviderType.None;
 };
 
 // handle schedule booking confirmation activation / deactivation
-const toggleBookingConfirmation = (newValue) => {
+const toggleBookingConfirmation = (newValue: boolean) => {
   scheduleInput.value.booking_confirmation = newValue;
 };
 
@@ -723,34 +350,414 @@ watch(
   () => state.value,
   (_, oldValue) => {
     if (scheduleInput.value.active) {
-      if (oldValue === 1) visitedStep1.value = true;
+      if (oldValue === ScheduleCreationState.Availability) visitedStep1.value = true;
+      emit('updated', getScheduleAppointment());
+    }
+  },
+);
+
+// track changes and send schedule updates
+watch(
+  () => [
+    scheduleInput.value.name,
+    scheduleInput.value.calendar_id,
+    scheduleInput.value.start_date,
+    scheduleInput.value.end_date,
+    scheduleInput.value.start_time,
+    scheduleInput.value.end_time,
+    scheduleInput.value.weekdays,
+    scheduleInput.value.booking_confirmation,
+    props.activeDate,
+  ],
+  () => {
+    // if an existing schedule was given update anyway
+    // if a new schedule gets created, only update on step 2
+    if ((props.schedule && props.schedule.active) || (!props.schedule && visitedStep1.value)) {
       emit('updated', getScheduleAppointment());
     }
   },
 );
+</script>
+
+<template>
+  <div class="sticky top-24 flex flex-col gap-4 rounded-2xl bg-zinc-100 dark:bg-gray-600">
+    <div class="flex flex-col gap-4 px-1 py-4">
+      <div class="flex items-center justify-around text-center text-xl font-semibold text-teal-500">
+        <span class="pl-3">{{ t("heading.generalAvailability") }}</span>
+        <switch-toggle
+          v-if="existing"
+          class="mt-0.5 pr-3"
+          :active="schedule.active"
+          no-legend
+          @changed="toggleActive"
+          :title="t(schedule.active ? 'label.deactivateSchedule' : 'label.activateSchedule')"
+        />
+      </div>
+      <alert-box
+        @close="scheduleCreationError = ''"
+        v-if="scheduleCreationError"
+      >
+        {{ scheduleCreationError }}
+      </alert-box>
+
+      <div class="px-4">
+        <label for="scheduleName" class="flex-column flex">
+          <input
+            id="scheduleName"
+            type="text"
+            v-model="scheduleInput.name"
+            :placeholder="t('placeholder.mySchedule')"
+            :disabled="!scheduleInput.active"
+            class="place-holder w-full rounded-none border-0 border-b bg-transparent px-0 dark:bg-transparent"
+            required
+          />
+          <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
+        </label>
+      </div>
+      <!-- step 1 -->
+      <div
+        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50': activeStep1}"
+        id="schedule-availability"
+      >
+        <div
+          @click="state = ScheduleCreationState.Availability"
+          class="btn-step-1 flex cursor-pointer items-center justify-between"
+        >
+          <div class="flex flex-col gap-1">
+            <h2>
+              {{ t("label.chooseYourAvailability") }}
+            </h2>
+            <h3 class="text-xs">
+              {{ t('label.scheduleSettings.availabilitySubHeading') }}
+            </h3>
+          </div>
+          <icon-chevron-down
+            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
+            :class="{ '!rotate-0': activeStep1 }"
+          />
+        </div>
+        <div v-show="activeStep1" class="flex flex-col gap-3">
+          <hr/>
+          <div class="flex w-full flex-col justify-between gap-2 md:flex-row lg:gap-4">
+            <label class="w-full">
+              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+                {{ t("label.startTime") }}
+              </div>
+              <input
+                type="time"
+                v-model="scheduleInput.start_time"
+                :disabled="!scheduleInput.active"
+                class="text-md min-h-10 w-full rounded-lg leading-4 tracking-tight"
+              />
+            </label>
+            <label class="w-full">
+              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+                {{ t("label.endTime") }}
+              </div>
+              <input
+                type="time"
+                v-model="scheduleInput.end_time"
+                :disabled="!scheduleInput.active"
+                class="text-md min-h-10 w-full rounded-lg leading-4 tracking-tight"
+              />
+            </label>
+          </div>
+          <div>
+            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
+              {{ t("label.availableDays") }}
+            </div>
+            <div class="grid grid-flow-col grid-cols-2 grid-rows-4 gap-2 rounded-lg p-4">
+              <label
+                v-for="w in isoWeekdays"
+                :key="w.iso"
+                class="flex cursor-pointer select-none items-center gap-2 text-sm"
+              >
+                <input
+                  type="checkbox"
+                  v-model="scheduleInput.weekdays"
+                  :value="w.iso"
+                  :disabled="!scheduleInput.active"
+                  class="size-5 text-teal-500"
+                />
+                <span>{{ w.long }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- step 2 -->
+      <div
+        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50':activeStep2}"
+        id="schedule-settings"
+      >
+        <div
+          @click="state = ScheduleCreationState.Settings"
+          class="btn-step-2 flex cursor-pointer items-center justify-between"
+        >
+          <div class="flex flex-col gap-1">
+            <h2>
+              {{ t("label.scheduleDetails") }}
+            </h2>
+            <h3 class="text-xs">
+              {{ t('label.scheduleSettings.schedulingDetailsSubHeading') }}
+            </h3>
+          </div>
+          <icon-chevron-down
+            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
+            :class="{ '!rotate-0': activeStep2 }"
+          />
+        </div>
+        <div v-show="activeStep2" class="flex flex-col gap-3">
+          <hr/>
+          <label>
+            <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+              {{ t("label.selectCalendar") }}
+            </div>
+            <select v-model="scheduleInput.calendar_id" class="w-full rounded-md" :disabled="!scheduleInput.active">
+              <option
+                v-for="calendar in calendars"
+                :key="calendar.id"
+                :value="calendar.id"
+              >
+                {{ calendar.title }}
+              </option>
+            </select>
+          </label>
+          <div class="grid grid-cols-2 gap-4">
+            <label>
+              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+                {{ t("label.earliestBooking") }}
+              </div>
+              <select
+                v-model="scheduleInput.earliest_booking"
+                class="w-full rounded-md capitalize"
+                :disabled="!scheduleInput.active"
+              >
+                <option
+                  v-for="(label, value) in earliestOptions"
+                  :key="value"
+                  :value="value"
+                >
+                  {{ label }}
+                </option>
+              </select>
+            </label>
+            <label>
+              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+                {{ t("label.farthestBooking") }}
+              </div>
+              <select
+                v-model="scheduleInput.farthest_booking"
+                class="w-full rounded-md"
+                :disabled="!scheduleInput.active"
+              >
+                <option
+                  v-for="(label, value) in farthestOptions"
+                  :key="value"
+                  :value="value"
+                >
+                  {{ label }}
+                </option>
+              </select>
+            </label>
+            <label class="col-span-2">
+              <div class="mb-1 font-medium text-gray-500 dark:text-gray-300">
+                {{ t("label.slotLength") }}
+              </div>
+              <select
+                v-model="scheduleInput.slot_duration"
+                :disabled="!scheduleInput.active"
+                class="w-7/12 rounded-md"
+              >
+                <option
+                  v-for="(label, value) in durationOptions"
+                  :key="value"
+                  :value="value"
+                >
+                  {{ label }}
+                </option>
+              </select>
+            </label>
+          </div>
+          <div class="flex-center rounded-lg bg-white px-4 py-6 text-center text-sm dark:bg-gray-800">
+            <div>{{
+                t('text.recipientsCanScheduleBetween', {
+                  duration: duration,
+                  earliest: earliest,
+                  farthest: farthest
+                })
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- step 3 -->
+      <div
+        @click="state = ScheduleCreationState.Details"
+        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50': activeStep3}"
+        id="schedule-details"
+      >
+        <div class="flex cursor-pointer items-center justify-between">
+          <div class="flex flex-col gap-1">
+            <h2>
+              {{ t("label.meetingDetails") }}
+            </h2>
+            <h3 class="text-xs">
+              {{ t('label.scheduleSettings.meetingDetailsSubHeading') }}
+            </h3>
+          </div>
+          <icon-chevron-down
+            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
+            :class="{ '!rotate-0': activeStep3 }"
+          />
+        </div>
+        <div v-show="activeStep3" class="flex flex-col gap-2">
+          <hr/>
+          <label class="tooltip-label">
+            <div class="relative mb-1 flex flex-row items-center gap-2 font-medium text-gray-500 dark:text-gray-300">
+              {{ t("label.videoLink") }}
+              <span class="relative cursor-help" role="tooltip" aria-labelledby="video-link-tooltip">
+              <icon-info-circle class="tooltip-icon w-4" aria-hidden="true"/>
+                <span class="tooltip hidden">
+                  <transition>
+                      <tool-tip id="video-link-tooltip" class="tooltip left-[-8.5rem]  w-72" :content="t('text.videoLinkNotice')"/>
+                  </transition>
+                </span>
+            </span>
+            </div>
+            <input
+              type="text"
+              v-model="scheduleInput.location_url"
+              v-if="scheduleInput.meeting_link_provider === MeetingLinkProviderType.None"
+              :placeholder="t('placeholder.zoomCom')"
+              :disabled="!scheduleInput.active || scheduleInput.meeting_link_provider !== MeetingLinkProviderType.None"
+              class="place-holder w-full rounded-md disabled:cursor-not-allowed"
+            />
+          </label>
+          <label class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              :checked="scheduleInput.meeting_link_provider === MeetingLinkProviderType.Zoom"
+              :disabled="!scheduleInput.active || !hasZoomAccount"
+              @change="toggleZoomLinkCreation"
+              class="size-5 rounded-md"
+            />
+            <div class="font-medium text-gray-500 dark:text-gray-300">
+              {{ t("label.generateZoomLink") }}
+            </div>
+          </label>
+          <label class="relative flex flex-col gap-1">
+            <div class="font-medium text-gray-500 dark:text-gray-300">
+              {{ t("label.notes") }}
+            </div>
+            <textarea
+              v-model="scheduleInput.details"
+              :placeholder="t('placeholder.writeHere')"
+              :disabled="!scheduleInput.active"
+              class="place-holder h-24 w-full resize-none rounded-md text-sm"
+              :maxlength="charLimit"
+            ></textarea>
+            <div
+              class="absolute bottom-3 right-3 text-xs"
+              :class="{
+              'text-orange-500': charCount >= charLimit * 0.92,
+              '!text-rose-600': charCount === charLimit,
+            }"
+            >
+              {{ charCount }}/{{ charLimit }}
+            </div>
+          </label>
+        </div>
+      </div>
+      <!-- option to deactivate confirmation -->
+      <div class="px-4">
+        <switch-toggle
+          class="my-1 pr-3 text-sm font-medium text-gray-500 dark:text-gray-300"
+          :active="schedule.booking_confirmation"
+          :label="t('label.bookingConfirmation')"
+          :disabled="!scheduleInput.active"
+          @changed="toggleBookingConfirmation"
+          no-legend
+        />
+        <div class="text-xs">
+          {{ t('text.ownerNeedsToConfirmBooking') }}
+        </div>
+      </div>
+    </div>
+    <!-- Snack-ish Bar - The dark info bubble at the bottom of this form -->
+    <!-- First time no calendars -->
+    <snackish-bar :show-icon=true v-if="!calendarStore.hasConnectedCalendars">
+      <div class="flex flex-col gap-2">
+        <p>{{ t('text.scheduleSettings.noCalendars') }}</p>
+        <u><a href="/settings/calendar">{{ t('text.scheduleSettings.clickHereToConnect') }}</a></u>
+      </div>
+    </snackish-bar>
+    <!-- No schedule? Create one please! -->
+    <snackish-bar v-else-if="!existing">
+      <div class="flex flex-col items-center justify-center gap-2">
+        <p>{{ t('text.scheduleSettings.create') }}</p>
+        <primary-button
+          :label="t('label.save')"
+          class="btn-save w-1/2"
+          @click="saveSchedule(!existing)"
+          :waiting="savingInProgress"
+          :disabled="!scheduleInput.active"
+          :title="t('label.save')"
+        />
+      </div>
+    </snackish-bar>
+    <!-- Schedule is not active -->
+    <snackish-bar :show-icon=true v-else-if="!scheduleInput.active">
+      <p>{{ t('text.scheduleSettings.notActive') }}</p>
+    </snackish-bar>
+    <!-- Form is dirty, please clean it -->
+    <snackish-bar v-else-if="isFormDirty">
+      <div class="flex flex-col gap-2">
+      <p>{{ t('text.scheduleSettings.formDirty') }}</p>
+      <div class="flex gap-4">
+          <secondary-button
+            :label="t('label.revert')"
+            class="btn-revert w-1/2"
+            @click="resetSchedule()"
+            :disabled="!scheduleInput.active"
+            :title="t('label.revert')"
+          />
+          <primary-button
+            :label="t('label.save')"
+            class="btn-save w-1/2"
+            @click="saveSchedule(!existing)"
+            :waiting="savingInProgress"
+            :disabled="!scheduleInput.active"
+            :title="t('label.save')"
+          />
+        </div>
+        </div>
+    </snackish-bar>
+    <div v-else>
+      <div class="my-8 flex justify-center gap-4">
+        <primary-button
+          v-if="user.myLink && existing"
+          :label="t('label.shareMyLink')"
+          class="btn-copy"
+          :copy="user.myLink"
+          :title="t('label.copy')"
+        />
+      </div>
+    </div>
+  </div>
+  <!-- modals -->
+  <appointment-created-modal
+    :open="savedConfirmation.show"
+    :is-schedule="true"
+    :title="savedConfirmation.title"
+    :public-link="user.data.signedUrl"
+    @close="closeCreatedModal"
+  />
+</template>
 
-// track changes and send schedule updates
-watch(
-  () => [
-    scheduleInput.value.name,
-    scheduleInput.value.calendar_id,
-    scheduleInput.value.start_date,
-    scheduleInput.value.end_date,
-    scheduleInput.value.start_time,
-    scheduleInput.value.end_time,
-    scheduleInput.value.weekdays,
-    scheduleInput.value.booking_confirmation,
-    props.activeDate,
-  ],
-  () => {
-    // if an existing schedule was given update anyway
-    // if a new schedule gets created, only update on step 2
-    if ((props.schedule && props.schedule.active) || (!props.schedule && visitedStep1.value)) {
-      emit('updated', getScheduleAppointment());
-    }
-  },
-);
-</script>
 <style scoped>
 input[type="time"]::-webkit-calendar-picker-indicator {
   margin-right: -0.5rem;
diff --git a/frontend/src/components/bookingView/BookingViewSlotSelection.vue b/frontend/src/components/bookingView/BookingViewSlotSelection.vue
index a40d017c4..5fc7d60ac 100644
--- a/frontend/src/components/bookingView/BookingViewSlotSelection.vue
+++ b/frontend/src/components/bookingView/BookingViewSlotSelection.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useScheduleStore } from '@/stores/schedule-store';
-import { dateFormatStrings } from '@/definitions';
+import { DateFormatStrings } from '@/definitions';
 import { Slot } from '@/models';
 import { dayjsKey } from "@/keys";
 
@@ -33,7 +33,7 @@ const selectEvent = (day: String) => {
   // set event selected
   for (let i = 0; i < appointment.value.slots.length; i += 1) {
     const slot: Slot = appointment.value.slots[i];
-    if (slot.start.format(dateFormatStrings.qalendar) === day) {
+    if (slot.start.format(DateFormatStrings.Qalendar) === day) {
       slot.selected = true;
       const e = { ...appointment.value, ...slot };
       delete e.slots;
diff --git a/frontend/src/composables/dayjs.ts b/frontend/src/composables/dayjs.ts
index bed7cccc5..a5f90c503 100644
--- a/frontend/src/composables/dayjs.ts
+++ b/frontend/src/composables/dayjs.ts
@@ -13,7 +13,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekday from 'dayjs/plugin/weekday';
 import 'dayjs/locale/de';
-import { dayjsKey, durationHumanizedKey } from '@/keys';
+import { dayjsKey, durationHumanizedKey, isoWeekdaysKey } from '@/keys';
 
 export type IsoWeekday = {
   iso: number,
@@ -67,5 +67,6 @@ export default function useDayJS(app: App<Element>, locale: string) {
     });
   });
 
-  app.provide('isoWeekdays', isoWeekdays);
+  app.provide('isoWeekdays', isoWeekdays); // TODO: remove if all components are typed
+  app.provide(isoWeekdaysKey, isoWeekdays);
 }
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index acc996208..676235745 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -1,7 +1,5 @@
 /**
- * Available date format strings
- * @readonly
- * @enum
+ * @deprecated Use DateFormatStrings enum instead
  */
 export const dateFormatStrings = {
   // Qalendar specific formats (These have to be in this format for qalendar to understand them)
@@ -11,73 +9,54 @@ export const dateFormatStrings = {
   display12Hour: 'hh:mma',
   display24Hour: 'HH:mm',
 };
+/**
+ * Available date format strings
+ */
+export enum DateFormatStrings {
+  // Qalendar specific formats (These have to be in this format for qalendar to understand them)
+  Qalendar = 'YYYY-MM-DD HH:mm',
+  QalendarFullDay = 'YYYY-MM-DD',
+  // Time display formats
+  Display12Hour = 'hh:mma',
+  Display24Hour = 'HH:mm',
+}
 
 /**
  * The amount of time in minutes a schedule's slot duration will default to
- * @type {number}
  */
 export const defaultSlotDuration = 30;
 
 /**
  * Appointment subscriber levels
- * @enum
- * @readonly
  */
-export const subscriberLevels = {
-  basic: 1,
-  plus: 2,
-  pro: 3,
-  admin: 99,
-};
+export enum SubscriberLevels {
+  Basic = 1,
+  Plus = 2,
+  Pro = 3,
+  Admin = 99,
+}
 
 /**
- * Appointment location types for schedules
- * @enum
- * @readonly
+ * @deprecated use EventLocationType
  */
 export const locationTypes = {
   inPerson: 1,
   online: 2,
 };
 
-/**
- * Appointment creation state
- * @enum
- * @readonly
- */
-export const appointmentCreationState = {
-  hidden: 0,
-  details: 1,
-  availability: 2,
-  finished: 3,
-};
-
 /**
  * Schedule creation state
- * @enum
- * @readonly
  */
-export const scheduleCreationState = {
-  availability: 1,
-  settings: 2,
-  details: 3,
-};
-
-/**
- * Calendar view mode
- * @enum
- * @readonly
- */
-export const calendarViews = {
-  day: 1,
-  week: 2,
-  month: 3,
-};
+export enum ScheduleCreationState {
+  Availability = 1,
+  Settings = 2,
+  Details = 3,
+}
 
 /**
  * Booking calendar view modes
  */
-export enum BookingCalendarViews {
+export enum BookingCalendarView {
   Day = 1,
   Week = 2,
   Month = 3,
@@ -87,16 +66,6 @@ export enum BookingCalendarViews {
   Invalid = 12,
 }
 
-/**
- * Booking status for slots. This mirrors models.BookingStatus on the backend
- * @deprecated Can be removed if all occurences are TS-ified.
- */
-export const bookingStatus = {
-  none: 1,
-  requested: 2,
-  booked: 3,
-};
-
 /**
  * Booking status for slots. This mirrors models.BookingStatus on the backend
  */
@@ -173,7 +142,7 @@ export enum SettingsSections {
   Calendar = 2,
   Account = 3,
   ConnectedAccounts = 4,
-};
+}
 
 /**
  * Available color schemes for theme
@@ -190,7 +159,7 @@ export enum ColorSchemes {
 export enum CalendarManagementType {
   Connect = 1,
   Edit = 2,
-};
+}
 
 /**
  * Supported calendar providers
@@ -198,7 +167,7 @@ export enum CalendarManagementType {
 export enum CalendarProviders {
   Caldav = 1,
   Google = 2,
-};
+}
 
 /**
  * Supported external connection providers
@@ -207,18 +176,24 @@ export enum ExternalConnectionProviders {
   Fxa = 1,
   Google = 2,
   Zoom = 3,
-};
+}
 
 /**
- * Meeting provider types (matches the backends version)
- * @enum
- * @readonly
+ * @deprecated Use MeetingLinkProviderType instead
  */
 export const meetingLinkProviderType = {
   none: 'none',
   zoom: 'zoom',
   google_meet: 'google_meet',
 };
+/**
+ * Meeting provider types (matches the backends version)
+ */
+export enum MeetingLinkProviderType {
+  None = 'none',
+  Zoom = 'zoom',
+  GoogleMeet = 'google_meet',
+}
 
 /**
  * Model states
@@ -238,19 +213,6 @@ export enum AlertSchemes {
   Warning = 2, // Alert indicates something important
   Success = 3, // Alert indicates something's gone right
   Info = 4, // Alert indicates some neutral information
-}
-
-/**
- * Only available duration values supported for Qalendar
- * This defines basically the number of intervals there will be.
- * See: https://tomosterlund.github.io/qalendar/guide.html#intervals
- * @enum
- * @readonly
- */
-export const qalendarSlotDurations = {
-  15: 15,
-  30: 30,
-  60: 60,
 };
 
 /**
@@ -342,19 +304,17 @@ export enum MetricEvents {
 
 export default {
   AlertSchemes,
-  appointmentCreationState,
-  BookingCalendarViews,
+  BookingCalendarView,
   BookingsTableColumns,
   BookingsTableFilterOptions,
-  bookingStatus,
   BookingStatus,
   BookingsViews,
   BookingsViewTypes,
   CalendarManagementType,
   CalendarProviders,
-  calendarViews,
   ColorSchemes,
   dateFormatStrings,
+  DateFormatStrings,
   defaultSlotDuration,
   EventLocationType,
   ExternalConnectionProviders,
@@ -363,14 +323,13 @@ export default {
   locationTypes,
   loginRedirectKey,
   meetingLinkProviderType,
+  MetricEvents,
   ModalStates,
-  qalendarSlotDurations,
-  scheduleCreationState,
+  ScheduleCreationState,
   SettingsSections,
-  subscriberLevels,
+  SubscriberLevels,
   TableDataButtonType,
   TableDataType,
   tooltipPosition,
   WaitingListAction,
-  MetricEvents,
 };
diff --git a/frontend/src/keys.ts b/frontend/src/keys.ts
index 5cc3d93bc..5588e7a23 100644
--- a/frontend/src/keys.ts
+++ b/frontend/src/keys.ts
@@ -1,16 +1,22 @@
 import { ConfigType, Dayjs, DayjsTimezone } from 'dayjs';
+import { CreateDurationType } from 'dayjs/plugin/duration';
 import { InjectionKey } from 'vue';
 import { Fetch, Refresh } from '@/models';
+import { IsoWeekday } from '@/composables/dayjs';
 
 /**
  * These are typed Symbols for use with inject/provide in VueJS
  */
 
-// Provides Dayjs class functionality as well as the timezone plugin
+// Provides Dayjs class functionality as well as the timezone plugin and related keys
 type DayjsType = ((_?:ConfigType) => Dayjs) & {
-  tz: DayjsTimezone
+  tz: DayjsTimezone,
+  max: (...dayjs: Dayjs[]) => Dayjs | null,
+  min: (...dayjs: Dayjs[]) => Dayjs | null,
+  duration: CreateDurationType
 };
 export const dayjsKey = Symbol('dayjs') as InjectionKey<DayjsType>;
+export const isoWeekdaysKey = Symbol('isoWeekdays') as InjectionKey<IsoWeekday[]>;
 
 // Provide urls for API and booking
 export const apiUrlKey = Symbol('apiUrl') as InjectionKey<string>;
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index 27e61f4ed..d267e9b25 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -18,18 +18,18 @@ export type Attendee = {
 
 export type Slot = {
   id: number;
-  start: Dayjs;
+  start: Dayjs|string;
   duration: number;
   attendee_id: number;
-  booking_tkn: string;
-  booking_expires_at: string;
-  booking_status: number;
-  meeting_link_id: number;
-  meeting_link_url: string;
-  appointment_id: number;
-  subscriber_id: number;
-  time_updated: string;
-  attendee: Attendee;
+  booking_tkn?: string;
+  booking_expires_at?: string;
+  booking_status?: number;
+  meeting_link_id?: number;
+  meeting_link_url?: string;
+  appointment_id?: number;
+  subscriber_id?: number;
+  time_updated?: string;
+  attendee?: Attendee;
   selected?: boolean;
 };
 
@@ -46,13 +46,13 @@ export type Appointment = {
   location_url: string;
   calendar_id: number;
   duration: number;
-  location_type: number;
+  location_type: number; // TODO
   location_suggestions: string;
   location_selected: number;
   location_name: string;
   location_phone: string;
   keep_open: boolean;
-  status: number;
+  status: number; // TODO
   meeting_link_provider: string;
   uuid: string;
   time_created: string;
@@ -66,10 +66,25 @@ export type Appointment = {
   booking_confirmation?: boolean;
 };
 
+/**
+ * Appointment with slots from current schedule data
+ */
+export type ScheduleAppointment = {
+  title: string;
+  calendar_id: number;
+  calendar_title: string;
+  location_type: number; // TODO
+  location_url: string;
+  details: string;
+  status: number; // TODO
+  slots: Slot[];
+  type: string; // TODO
+};
+
 export type CustomEventData = {
   attendee?: Attendee;
-  slot_status: number; // TODO: definitions.bookingStatus
-  booking_status: number; // TODO: definitions.bookingStatus
+  slot_status: number; // TODO: definitions.BookingStatus?
+  booking_status: number; // TODO: definitions.BookingStatus
   calendar_title: string;
   calendar_color: string;
   duration: number;
@@ -162,7 +177,7 @@ export type Availability = {
 export type Schedule = {
   active: boolean;
   name: string;
-  slug: string;
+  slug?: string;
   calendar_id: number;
   location_type: number;
   location_url: string;
@@ -176,11 +191,11 @@ export type Schedule = {
   weekdays: number[];
   slot_duration: number;
   meeting_link_provider: string;
-  id: number;
-  time_created: string;
-  time_updated: string;
+  id?: number;
+  time_created?: string;
+  time_updated?: string;
   availabilities?: Availability[];
-  calendar: Calendar;
+  calendar?: Calendar;
   booking_confirmation: boolean;
 };
 
@@ -250,7 +265,10 @@ export type Signature = {
   url: string;
 };
 
-export type Error = { error: boolean|string|null };
+export type Error = {
+  error: boolean|string|null;
+  message?: string;
+};
 export type ExceptionDetail = {
   id?: string;
   message?: string;
@@ -283,6 +301,7 @@ export type Fetch = (url: string) => UseFetchReturn<any> & PromiseLike<UseFetchR
 export type InviteListResponse = UseFetchReturn<Invite[]|Exception>;
 export type Refresh = () => Promise<void>;
 export type RemoteEventListResponse = UseFetchReturn<RemoteEvent[]>;
+export type ScheduleResponse = UseFetchReturn<Schedule>;
 export type ScheduleListResponse = UseFetchReturn<Schedule[]>;
 export type SignatureResponse = UseFetchReturn<Signature>;
 export type SlotResponse = UseFetchReturn<Slot|Exception>;
diff --git a/frontend/src/stores/booking-view-store.ts b/frontend/src/stores/booking-view-store.ts
index 93e0595f7..9f63e6a47 100644
--- a/frontend/src/stores/booking-view-store.ts
+++ b/frontend/src/stores/booking-view-store.ts
@@ -1,7 +1,7 @@
 import { Dayjs, ConfigType } from 'dayjs';
 import { defineStore } from 'pinia';
 import { ref, inject } from 'vue';
-import { BookingCalendarViews } from '@/definitions';
+import { BookingCalendarView } from '@/definitions';
 import { Appointment, Attendee, Slot } from '@/models';
 import { dayjsKey } from '@/keys';
 
@@ -13,7 +13,7 @@ export const useBookingViewStore = defineStore('bookingView', () => {
   const dj = inject(dayjsKey);
 
   // States
-  const activeView = ref(BookingCalendarViews.Loading);
+  const activeView = ref(BookingCalendarView.Loading);
   const activeDate = ref(dj());
 
   // Data
@@ -25,7 +25,7 @@ export const useBookingViewStore = defineStore('bookingView', () => {
    * Restore default state, set date to today and remove other data
    */
   const $reset = () => {
-    activeView.value = BookingCalendarViews.Loading;
+    activeView.value = BookingCalendarView.Loading;
     activeDate.value = dj();
     selectedEvent.value = null;
     appointment.value = null;
diff --git a/frontend/src/stores/schedule-store.ts b/frontend/src/stores/schedule-store.ts
index b6975e56e..647398aea 100644
--- a/frontend/src/stores/schedule-store.ts
+++ b/frontend/src/stores/schedule-store.ts
@@ -2,8 +2,8 @@ import { i18n } from '@/composables/i18n';
 import { defineStore } from 'pinia';
 import { ref, computed, inject } from 'vue';
 import { useUserStore } from '@/stores/user-store';
-import { dateFormatStrings, MetricEvents } from '@/definitions';
-import { Fetch, Schedule, ScheduleListResponse } from '@/models';
+import { DateFormatStrings, MetricEvents } from '@/definitions';
+import { Error, Fetch, Schedule, ScheduleListResponse, ScheduleResponse } from '@/models';
 import { dayjsKey } from '@/keys';
 import { posthog, usePosthog } from '@/composables/posthog';
 
@@ -92,13 +92,13 @@ export const useScheduleStore = defineStore('schedules', () => {
 
   const createSchedule = async (call: Fetch, scheduleData: object) => {
     // save schedule data
-    const { data, error } = await call('schedule/').post(scheduleData).json();
+    const { data, error }: ScheduleResponse = await call('schedule/').post(scheduleData).json();
 
     if (error.value) {
       return {
         error: true,
         message: handleErrorResponse(data),
-      };
+      } as Error;
     }
 
     // Update the schedule
@@ -113,13 +113,13 @@ export const useScheduleStore = defineStore('schedules', () => {
 
   const updateSchedule = async (call: Fetch, id: number, scheduleData: object) => {
     // save schedule data
-    const { data, error } = await call(`schedule/${id}`).put(scheduleData).json();
+    const { data, error }: ScheduleResponse = await call(`schedule/${id}`).put(scheduleData).json();
 
     if (error.value) {
       return {
         error: true,
         message: handleErrorResponse(data),
-      };
+      } as Error;
     }
 
     // Update the schedule
@@ -137,7 +137,7 @@ export const useScheduleStore = defineStore('schedules', () => {
    * @param {string} time
    */
   const timeToBackendTime = (time) => {
-    const dateFormat = dateFormatStrings.qalendarFullDay;
+    const dateFormat = DateFormatStrings.QalendarFullDay;
 
     const user = useUserStore();
     return dj(`${dj().format(dateFormat)}T${time}:00`)
@@ -151,7 +151,7 @@ export const useScheduleStore = defineStore('schedules', () => {
    * @param {string} time
    */
   const timeToFrontendTime = (time) => {
-    const dateFormat = dateFormatStrings.qalendarFullDay;
+    const dateFormat = DateFormatStrings.QalendarFullDay;
     const user = useUserStore();
 
     return dj(`${dj().format(dateFormat)}T${time}:00`)
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index 05923f82c..33b34ec2f 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BookingCalendarViews, MetricEvents, ModalStates } from '@/definitions';
+import { BookingCalendarView, MetricEvents, ModalStates } from '@/definitions';
 import { inject, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -67,18 +67,18 @@ const getViewBySlotDistribution = (slots: Slot[]) => {
   });
   if (monthChanged) {
     showNavigation.value = true;
-    return BookingCalendarViews.Month;
+    return BookingCalendarView.Month;
   }
   if (weekChanged) {
-    return BookingCalendarViews.Month;
+    return BookingCalendarView.Month;
   }
   if (dayChanged) {
-    return BookingCalendarViews.Week;
+    return BookingCalendarView.Week;
   }
   if (!dayChanged) {
-    return BookingCalendarViews.Day;
+    return BookingCalendarView.Day;
   }
-  return BookingCalendarViews.Invalid;
+  return BookingCalendarView.Invalid;
 };
 
 const handleError = (data: Exception) => {
@@ -151,7 +151,7 @@ const bookEvent = async (attendeeData: Attendee) => {
   // replace calendar view if every thing worked fine
   attendee.value = attendeeData;
   // update view to prevent reselection
-  activeView.value = BookingCalendarViews.Success;
+  activeView.value = BookingCalendarView.Success;
   // update modal view as well
   modalState.value = ModalStates.Finished;
 
@@ -177,7 +177,7 @@ onMounted(async () => {
     // check appointment slots for appropriate view
     activeView.value = getViewBySlotDistribution(appointment.value.slots);
   } else {
-    activeView.value = BookingCalendarViews.Invalid;
+    activeView.value = BookingCalendarView.Invalid;
   }
 });
 </script>
@@ -186,14 +186,14 @@ onMounted(async () => {
   <div>
     <!-- booking page content: loading -->
     <main
-      v-if="activeView === BookingCalendarViews.Loading"
+      v-if="activeView === BookingCalendarView.Loading"
       class="flex-center h-screen select-none"
     >
       <loading-spinner/>
     </main>
     <!-- booking page content: invalid link -->
     <main
-      v-else-if="activeView === BookingCalendarViews.Invalid"
+      v-else-if="activeView === BookingCalendarView.Invalid"
       class="flex-center h-screen select-none flex-col gap-8 px-4"
     >
       <booking-view-error
@@ -203,7 +203,7 @@ onMounted(async () => {
     </main>
     <!-- booking page content: successful booking -->
     <main
-      v-else-if="activeView === BookingCalendarViews.Success"
+      v-else-if="activeView === BookingCalendarView.Success"
       class="flex h-screen select-none flex-col-reverse items-center justify-evenly px-4 md:flex-row"
     >
       <booking-view-success
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index d4c0ab4f1..3a722e575 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -3,7 +3,7 @@ import { inject } from 'vue';
 import { keyByValue } from '@/utils';
 import { callKey, isFxaAuthKey, fxaEditProfileUrlKey } from '@/keys';
 import { useI18n } from 'vue-i18n';
-import { subscriberLevels } from '@/definitions';
+import { SubscriberLevels } from '@/definitions';
 import { useUserStore } from '@/stores/user-store';
 import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
@@ -49,7 +49,7 @@ const editProfile = async () => {
     <div class="text-4xl font-light">{{ user.data.name }}</div>
     <div class="flex items-center gap-4">
       <div class="rounded-full border border-gray-500 px-2 text-xs uppercase text-gray-500">
-        {{ keyByValue(subscriberLevels, user.data.level) }}
+        {{ keyByValue(SubscriberLevels, user.data.level, true) }}
       </div>
       <div class="flex gap-1 text-gray-500">
         {{ user.data.timezone }}
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 899758bec..3de2c17a1 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -1,57 +1,32 @@
-<template>
-  <!-- page title area -->
-  <div class="flex select-none flex-col items-start justify-between lg:flex-row">
-    <div class="text-4xl font-light">{{ t('label.schedule') }}</div>
-  </div>
-  <!-- page content -->
-  <div
-    class="mt-8 flex flex-col-reverse items-stretch gap-2 md:flex-row-reverse lg:gap-4"
-    :class="{ 'lg:mt-10': tabActive === calendarViews.month }"
-  >
-    <!-- schedule creation dialog -->
-    <div class="mx-auto mb-10 w-3/4 min-w-80 sm:w-1/4 md:mb-0 xl:w-1/6">
-      <schedule-creation
-        v-if="schedulesReady"
-        :calendars="connectedCalendars"
-        :schedule="firstSchedule"
-        :active-date="activeDate"
-        @created="getFirstSchedule"
-        @updated="schedulePreview"
-      />
-    </div>
-    <!-- main section: big calendar showing active month, week or day -->
-    <calendar-qalendar
-      class="w-full md:w-9/12 xl:w-10/12"
-      :selected="activeDate"
-      :appointments="pendingAppointments"
-      :events="calendarEvents"
-      :schedules="schedulesPreviews"
-      @date-change="onDateChange"
-    />
-  </div>
-</template>
-
-<script setup>
-import { calendarViews } from '@/definitions';
+<script setup lang="ts">
+import { BookingCalendarView } from '@/definitions';
 import {
   ref, inject, computed, onMounted,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import ScheduleCreation from '@/components/ScheduleCreation';
+import { dayjsKey, callKey, refreshKey } from "@/keys";
+import {
+  RemoteEvent,
+  RemoteEventListResponse,
+  Schedule,
+  ScheduleListResponse,
+  ScheduleAppointment,
+  TimeFormatted,
+} from "@/models";
+import ScheduleCreation from '@/components/ScheduleCreation.vue';
+import CalendarQalendar from '@/components/CalendarQalendar.vue';
 
 // stores
 import { useAppointmentStore } from '@/stores/appointment-store';
 import { useCalendarStore } from '@/stores/calendar-store';
-import CalendarQalendar from '@/components/CalendarQalendar.vue';
-import { dayjsKey } from "@/keys";
 
 const { t } = useI18n();
 const route = useRoute();
 const dj = inject(dayjsKey);
-const call = inject('call');
-const refresh = inject('refresh');
+const call = inject(callKey);
+const refresh = inject(refreshKey);
 
 const appointmentStore = useAppointmentStore();
 const calendarStore = useCalendarStore();
@@ -59,43 +34,48 @@ const { pendingAppointments } = storeToRefs(appointmentStore);
 const { connectedCalendars } = storeToRefs(calendarStore);
 
 // current selected date, if not in route: defaults to now
-const activeDate = ref(route.params.date ? dj(route.params.date) : dj());
+const activeDate = ref(route.params.date ? dj(route.params.date as string) : dj());
 const activeDateRange = ref({
   start: activeDate.value.startOf('month'),
   end: activeDate.value.endOf('month'),
 });
 
 // active menu item for tab navigation of calendar views
-const tabActive = ref(calendarViews.month);
+const tabActive = ref(BookingCalendarView.Month);
 
 // get remote calendar data for current year
-const calendarEvents = ref([]);
-const getRemoteEvents = async (from, to) => {
+const calendarEvents = ref<RemoteEvent[]>([]);
+const getRemoteEvents = async (from: string, to: string) => {
   // Most calendar impl are non-inclusive of the last day, so just add one to the day.
   const inclusiveTo = dj(to).add(1, 'day').format('YYYY-MM-DD');
 
   calendarEvents.value = [];
   await Promise.all(connectedCalendars.value.map(async (calendar) => {
-    const { data } = await call(`rmt/cal/${calendar.id}/${from}/${inclusiveTo}`).get().json();
+    const { data }: RemoteEventListResponse = await call(`rmt/cal/${calendar.id}/${from}/${inclusiveTo}`).get().json();
     if (Array.isArray(data.value)) {
-      calendarEvents.value.push(...data.value.map((e) => ({ ...e, duration: dj(e.end).diff(dj(e.start), 'minutes') })));
+      calendarEvents.value.push(
+        ...data.value.map((event) => ({
+          ...event,
+          duration: dj(event.end).diff(dj(event.start), 'minutes')
+        }))
+      );
     }
   }));
 };
 
 // user configured schedules from db (only the first for now, later multiple schedules will be available)
-const schedules = ref([]);
+const schedules = ref<Schedule[]>([]);
 const firstSchedule = computed(() => (schedules.value?.length > 0 ? schedules.value[0] : null));
 const schedulesReady = ref(false);
 const getFirstSchedule = async () => {
   // trailing slash to prevent fast api redirect which doesn't work great on our container setup
-  const { data } = await call('schedule/').get().json();
+  const { data }: ScheduleListResponse = await call('schedule/').get().json();
   schedules.value = data.value;
 };
 
 // schedule previews for showing corresponding placeholders in calendar views
 const schedulesPreviews = ref([]);
-const schedulePreview = (schedule) => {
+const schedulePreview = (schedule: ScheduleAppointment) => {
   schedulesPreviews.value = schedule ? [schedule] : [];
 };
 
@@ -103,7 +83,7 @@ const schedulePreview = (schedule) => {
  * Retrieve new events if a user navigates to a different month
  * @param dateObj
  */
-const onDateChange = (dateObj) => {
+const onDateChange = (dateObj: TimeFormatted) => {
   const start = dj(dateObj.start);
   const end = dj(dateObj.end);
 
@@ -131,3 +111,36 @@ onMounted(async () => {
   await getRemoteEvents(eventsFrom, eventsTo);
 });
 </script>
+
+<template>
+  <!-- page title area -->
+  <div class="flex select-none flex-col items-start justify-between lg:flex-row">
+    <div class="text-4xl font-light">{{ t('label.schedule') }}</div>
+  </div>
+  <!-- page content -->
+  <div
+    class="mt-8 flex flex-col-reverse items-stretch gap-2 md:flex-row-reverse lg:gap-4"
+    :class="{ 'lg:mt-10': tabActive === BookingCalendarView.Month }"
+  >
+    <!-- schedule creation dialog -->
+    <div class="mx-auto mb-10 w-3/4 min-w-80 sm:w-1/4 md:mb-0 xl:w-1/6">
+      <schedule-creation
+        v-if="schedulesReady"
+        :calendars="connectedCalendars"
+        :schedule="firstSchedule"
+        :active-date="activeDate"
+        @created="getFirstSchedule"
+        @updated="schedulePreview"
+      />
+    </div>
+    <!-- main section: big calendar showing active month, week or day -->
+    <calendar-qalendar
+      class="w-full md:w-9/12 xl:w-10/12"
+      :selected="activeDate"
+      :appointments="pendingAppointments"
+      :events="calendarEvents"
+      :schedules="schedulesPreviews"
+      @date-change="onDateChange"
+    />
+  </div>
+</template>
diff --git a/frontend/test/stores/appointment-store.test.js b/frontend/test/stores/appointment-store.test.js
index 2ecb09585..7898e4f9c 100644
--- a/frontend/test/stores/appointment-store.test.js
+++ b/frontend/test/stores/appointment-store.test.js
@@ -12,7 +12,7 @@ import { createPinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { HttpResponse, http } from 'msw';
 import { createFetch } from '@vueuse/core';
-import { bookingStatus } from '@/definitions';
+import { BookingStatus } from '@/definitions';
 import withSetup from '../utils/with-setup';
 
 const API_URL = 'http://localhost';
@@ -25,7 +25,7 @@ const restHandlers = [
       duration: 180,
       location_type: 2,
       slots: [
-        { start: '3000-01-01T09:00:00Z', duration: 60, booking_status: bookingStatus.none },
+        { start: '3000-01-01T09:00:00Z', duration: 60, booking_status: BookingStatus.None },
       ],
     },
     {
@@ -35,7 +35,7 @@ const restHandlers = [
       location_type: 2,
       slots: [
         {
-          start: '2024-01-01T09:00:00Z', duration: 60, attendee_id: 1, booking_status: bookingStatus.requested,
+          start: '2024-01-01T09:00:00Z', duration: 60, attendee_id: 1, booking_status: BookingStatus.Requested,
         },
       ],
     },
@@ -43,9 +43,6 @@ const restHandlers = [
 ];
 
 const server = setupServer(...restHandlers);
-/* server.events.on('request:start', ({ request }) => {
-  console.log('Outgoing:', request.method, request.url);
-}); */
 
 describe('Appointment Store', () => {
   let app = null;
@@ -76,6 +73,7 @@ describe('Appointment Store', () => {
   test('fetch', async () => {
     const apmt = useAppointmentStore();
     await apmt.fetch(createFetch({ baseUrl: API_URL }));
+    console.log(apmt.appointments);
     expect(apmt.appointments.length).toBe(2);
     expect(apmt.appointments[0].slots.length).toBe(1);
   });