diff --git a/frappe-ui b/frappe-ui
index 29c3c3a80..8feaedcef 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 29c3c3a808bdf583408ba13e2484206f8a21e0c0
+Subproject commit 8feaedcefced2ac341ec2390757fed84bfca6ffa
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 460b4f652..81a844a2f 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -31,6 +31,8 @@ declare module 'vue' {
     AttachmentCapsule: typeof import('./src/components/AttachmentCapsule.vue')['default']
     AttachmentViewer: typeof import('./src/components/AttachmentViewer.vue')['default']
     AudioIcon: typeof import('./src/components/Icons/AudioIcon.vue')['default']
+    CalendarLogo: typeof import('./src/components/Icons/CalendarLogo.vue')['default']
+    CalendarSidebar: typeof import('./src/components/CalendarSidebar.vue')['default']
     ChangePasswordModal: typeof import('./src/components/Modals/ChangePasswordModal.vue')['default']
     ComposeMailEditor: typeof import('./src/components/ComposeMailEditor.vue')['default']
     ComposeMailToolbar: typeof import('./src/components/ComposeMailToolbar.vue')['default']
@@ -50,6 +52,11 @@ declare module 'vue' {
     EditSignatureModal: typeof import('./src/components/Modals/EditSignatureModal.vue')['default']
     EmailContent: typeof import('./src/components/EmailContent.vue')['default']
     EmojiPicker: typeof import('./src/components/EmojiPicker.vue')['default']
+    EventAlertList: typeof import('./src/components/EventAlertList.vue')['default']
+    EventModal: typeof import('./src/components/Modals/EventModal.vue')['default']
+    EventParticipantList: typeof import('./src/components/EventParticipantList.vue')['default']
+    EventPopoverContent: typeof import('./src/components/EventPopoverContent.vue')['default']
+    EventRepeatSettingsModal: typeof import('./src/components/Modals/EventRepeatSettingsModal.vue')['default']
     ExportSettings: typeof import('./src/components/Settings/ExportSettings.vue')['default']
     FrappeLogo: typeof import('./src/components/Icons/FrappeLogo.vue')['default']
     HeaderActions: typeof import('./src/components/HeaderActions.vue')['default']
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 23dbafa9f..ac5bc3ff7 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -75,8 +75,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStorage } from '@vueuse/core'
 import { Button, Dropdown, Sidebar, SidebarItem, createResource } from 'frappe-ui'
 
-import { toTitleCase } from '@/utils'
 import { useScreenSize, useSidebar } from '@/utils/composables'
+import { toTitleCase } from '@/utils/format'
 import { sessionStore } from '@/stores/session'
 import { userStore } from '@/stores/user'
 import MailLogo from '@/components/Icons/MailLogo.vue'
diff --git a/frontend/src/components/CalendarSidebar.vue b/frontend/src/components/CalendarSidebar.vue
new file mode 100644
index 000000000..7c5cadd4c
--- /dev/null
+++ b/frontend/src/components/CalendarSidebar.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, h, inject } from 'vue'
+import { Eye, EyeOff, LayoutGrid, LogOut } from 'lucide-vue-next'
+import { Sidebar, createResource } from 'frappe-ui'
+
+import { toTitleCase } from '@/utils/format'
+import { sessionStore } from '@/stores/session'
+import CalendarLogo from '@/components/Icons/CalendarLogo.vue'
+
+const { calendars, visibleCalendars } = defineProps<{
+	calendars: any[]
+	visibleCalendars: string[]
+}>()
+
+const emit = defineEmits(['update:visibleCalendars'])
+
+const { branding, logout } = sessionStore()
+
+const user = inject('$user')
+
+const title = computed(() =>
+	branding.data?.brand_name && branding.data?.brand_name != 'Frappe'
+		? branding.data.brand_name
+		: 'Calendar',
+)
+
+const apps = createResource({ url: 'mail.api.get_apps', cache: 'otherApps', auto: true })
+
+const menuItems = computed(() => [
+	{
+		icon: LayoutGrid,
+		label: __('Apps'),
+		submenu: apps.data?.map?.((app) => ({
+			label: app.title,
+			icon: app.logo,
+			component: h(
+				'a',
+				{
+					class: 'flex items-center gap-2 p-1.5 rounded hover:bg-surface-gray-2',
+					href: app.route,
+				},
+				[
+					h('img', { src: app.logo, class: 'size-6' }),
+					h('span', { class: 'max-w-18 text-sm w-full truncate' }, app.title),
+				],
+			),
+		})),
+		condition: () => user.data.is_system_manager,
+	},
+	{
+		icon: LogOut,
+		label: __('Log Out'),
+		onClick: logout.submit,
+	},
+])
+
+const sidebarItems = computed(() => [
+	{
+		label: __('Calendars'),
+		items:
+			calendars.map((calendar) => ({
+				label: calendar._name,
+				icon: visibleCalendars.includes(calendar.name) ? Eye : EyeOff,
+				onClick: () => emit('update:visibleCalendars', calendar.name),
+			})) || [],
+	},
+])
+</script>
+
+<template>
+	<Sidebar
+		:header="{
+			title,
+			subtitle: toTitleCase(user.data.full_name),
+			menuItems,
+			logo: branding.data?.brand_html || CalendarLogo,
+		}"
+		:sections="sidebarItems"
+		:disable-collapse="true"
+	/>
+</template>
diff --git a/frontend/src/components/ComposeMailEditor.vue b/frontend/src/components/ComposeMailEditor.vue
index 3d6040606..16b8bcb7a 100644
--- a/frontend/src/components/ComposeMailEditor.vue
+++ b/frontend/src/components/ComposeMailEditor.vue
@@ -268,7 +268,6 @@ import {
 
 import { getAttachmentUrl } from '@/resources'
 import {
-	formatBytes,
 	isOverlayPresent,
 	processInlineImages,
 	raiseToast,
@@ -276,6 +275,7 @@ import {
 	validateEmail,
 } from '@/utils'
 import { useScreenSize, useVisualViewport } from '@/utils/composables'
+import { formatBytes } from '@/utils/format'
 import { CustomParagraphExtension } from '@/utils/text-editor'
 import { userStore } from '@/stores/user'
 import ComposeMailToolbar from '@/components/ComposeMailToolbar.vue'
diff --git a/frontend/src/components/Controls/MultiselectInputControl.vue b/frontend/src/components/Controls/MultiselectInputControl.vue
index 8ee96ecab..e251130f0 100644
--- a/frontend/src/components/Controls/MultiselectInputControl.vue
+++ b/frontend/src/components/Controls/MultiselectInputControl.vue
@@ -153,7 +153,6 @@ const mailContacts = createResource({
 	}),
 	transform: (data) =>
 		data.map((option) => ({ label: option.full_name || option.email, value: option.email })),
-	auto: false,
 })
 
 const debouncedSearch = useDebounceFn((text: string) => mailContacts.reload(text), 300)
diff --git a/frontend/src/components/EventAlertList.vue b/frontend/src/components/EventAlertList.vue
new file mode 100644
index 000000000..bb177783e
--- /dev/null
+++ b/frontend/src/components/EventAlertList.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { Button, FormControl } from 'frappe-ui'
+
+const { alerts } = defineProps<{ alerts: any[] }>()
+
+const emit = defineEmits(['update:alerts'])
+
+const updateAlert = (i: number, field: string, value: any) => {
+	const updated = alerts.map((a, idx) => (idx === i ? { ...a, [field]: value } : a))
+	emit('update:alerts', updated)
+}
+
+const removeAlert = (i: number) => {
+	const updated = alerts.filter((_, idx) => idx !== i)
+	emit('update:alerts', updated)
+}
+
+const ALERT_ACTION_OPTIONS = [
+	{ label: __('Screen Pop-up'), value: 'Display' },
+	{ label: __('Email Notice'), value: 'Email' },
+	{ label: __('Sound Alert'), value: 'Audio' },
+]
+
+const UNIT_OPTIONS = [
+	{ label: __('Minutes'), value: 'minutes' },
+	{ label: __('Hours'), value: 'hours' },
+	{ label: __('Days'), value: 'days' },
+	{ label: __('Weeks'), value: 'weeks' },
+]
+
+const DIRECTION_OPTIONS = [
+	{ label: __('Before'), value: -1 },
+	{ label: __('After'), value: 1 },
+]
+
+const RELATIVE_TO_OPTIONS = [
+	{ label: __('Start'), value: 'Start' },
+	{ label: __('End'), value: 'End' },
+]
+</script>
+
+<template>
+	<div v-for="(alert, i) in alerts" :key="i" class="flex space-x-2">
+		<FormControl
+			:model-value="alert.action"
+			:label="i === 0 ? (alerts.length > 1 ? __('Alerts') : __('Alert')) : ''"
+			type="select"
+			:options="ALERT_ACTION_OPTIONS"
+			class="w-40 shrink-0"
+			@update:model-value="updateAlert(i, 'action', $event)"
+		/>
+		<template v-if="alert.type === 'OffsetTrigger'">
+			<FormControl
+				:model-value="alert.number"
+				type="number"
+				class="mt-auto w-16 shrink-0"
+				@update:model-value="updateAlert(i, 'number', $event)"
+			/>
+			<FormControl
+				:model-value="alert.unit"
+				type="select"
+				:options="UNIT_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'unit', $event)"
+			/>
+			<FormControl
+				:model-value="alert.direction"
+				type="select"
+				:options="DIRECTION_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'direction', $event)"
+			/>
+			<FormControl
+				:model-value="alert.relative_to"
+				type="select"
+				:options="RELATIVE_TO_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'relative_to', $event)"
+			/>
+		</template>
+		<template v-else>
+			<span class="text-ink-gray-8 mb-1.5 mt-auto text-base">{{ __('on') }}</span>
+			<FormControl
+				:model-value="alert.date"
+				type="date"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'date', $event)"
+			/>
+			<span class="text-ink-gray-8 mb-1.5 mt-auto text-base">{{ __('at') }}</span>
+			<FormControl
+				:model-value="alert.time"
+				type="time"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'time', $event)"
+			/>
+		</template>
+		<Button icon="x" class="mt-auto" @click="removeAlert(i)" />
+	</div>
+</template>
diff --git a/frontend/src/components/EventParticipantList.vue b/frontend/src/components/EventParticipantList.vue
new file mode 100644
index 000000000..63d90a934
--- /dev/null
+++ b/frontend/src/components/EventParticipantList.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check, Minus, X } from 'lucide-vue-next'
+import { Avatar, Button } from 'frappe-ui'
+
+import { extractNameFromEmail } from '@/utils/format'
+import { userStore } from '@/stores/user'
+
+const { participants, dontShowRemove } = defineProps<{
+	participants: any[]
+	dontShowRemove?: boolean
+}>()
+
+defineEmits(['removeParticipant'])
+
+const { identities } = userStore()
+
+const organizer = computed(() => participants.find((p) => p.isOrganizer)?.email)
+
+const isUserOrganizer = computed(() =>
+	identities.data.some((id) => id.email === organizer.value?.replace('mailto:', '')),
+)
+
+const showRemoveParticipant = (participant: any) =>
+	!participant.isOrganizer && (isUserOrganizer.value || participant.isNew) && !dontShowRemove
+
+const getParticipantStatusValues = (status: string) => {
+	if (status === 'ACCEPTED') return { icon: Check, class: 'bg-surface-green-1 text-ink-green-3' }
+	if (status === 'TENTATIVE') return { icon: Minus, class: 'bg-surface-gray-1 text-ink-gray-6' }
+	return { icon: X, class: 'bg-surface-red-1 text-ink-red-3' }
+}
+</script>
+<template>
+	<div v-for="p in participants" :key="p.email">
+		<div class="flex items-center justify-between text-left">
+			<div class="flex items-center space-x-2">
+				<Avatar :image="p.user_image" :label="p._name || p.email" size="xl" />
+				<div class="flex flex-col space-y-0.5">
+					<div class="flex items-center space-x-1">
+						<span class="text-sm font-medium">
+							{{ extractNameFromEmail(p._name || p.email) }}
+						</span>
+						<span v-if="p.email === organizer" class="text-ink-gray-4 text-xs">
+							({{ __('Organizer') }})
+						</span>
+
+						<div
+							v-if="
+								p.participation_status && p.participation_status !== 'NEEDS-ACTION'
+							"
+							class="rounded-full p-px"
+							:class="getParticipantStatusValues(p.participation_status).class"
+						>
+							<component
+								:is="getParticipantStatusValues(p.participation_status).icon"
+								class="h-3 w-3"
+							/>
+						</div>
+					</div>
+					<span class="text-ink-gray-4 text-sm">{{ p.email }}</span>
+				</div>
+			</div>
+
+			<Button
+				v-if="showRemoveParticipant(p)"
+				variant="ghost"
+				icon="x"
+				@click="$emit('removeParticipant', p.email)"
+			/>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/components/EventPopoverContent.vue b/frontend/src/components/EventPopoverContent.vue
new file mode 100644
index 000000000..828d49200
--- /dev/null
+++ b/frontend/src/components/EventPopoverContent.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
+import { CalendarDays, Edit2, Globe, MapPin, Repeat, Text, Trash2, Users } from 'lucide-vue-next'
+import { Button, Dropdown, createResource, toast } from 'frappe-ui'
+
+import { getReorderedParticipants, isUrl } from '@/utils'
+import { getRepeatMessage } from '@/utils/format'
+import { userStore } from '@/stores/user'
+
+import EventParticipantList from './EventParticipantList.vue'
+
+const { calendarEvent, close } = defineProps<{ calendarEvent: any; close: () => void }>()
+
+const emit = defineEmits(['edit', 'reloadEvents'])
+
+const user = inject('$user')
+const dayjs = inject('$dayjs')
+
+const { identities } = userStore()
+
+const userParticipant = computed(() =>
+	calendarEvent.participants.find((p) => identities.data.some((id) => id.email === p.email)),
+)
+const userResponse = computed(() => userParticipant.value?.participation_status)
+
+const descriptionExpanded = ref(false)
+const descriptionRef = useTemplateRef('descriptionRef')
+const isDescriptionClamped = ref(false)
+
+onMounted(() => {
+	const el = descriptionRef.value
+	if (el) isDescriptionClamped.value = el.scrollHeight > el.clientHeight
+
+	setTimeout(() => {
+		if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+	}, 0)
+})
+
+const date = computed(() => {
+	const start = dayjs(calendarEvent.start)
+	const duration = dayjs.duration(calendarEvent.duration)
+	const end = start.add(duration)
+	const isFullDay = duration.asHours() % 24 === 0 && start.isSame(start.startOf('day'))
+	const isSameDay =
+		start.isSame(end, 'day') || (isFullDay && start.isSame(end.subtract(1, 'ms'), 'day'))
+
+	const currentYear = dayjs().year()
+	const showYear = start.year() !== currentYear || end.year() !== currentYear
+
+	if (isFullDay) {
+		if (isSameDay) return start.format(showYear ? 'ddd, MMM D, YYYY' : 'ddd, MMM D')
+		else
+			return `${start.format(showYear ? 'MMM D, YYYY' : 'MMM D')} - ${end.subtract(1, 'day').format(showYear ? 'MMM D, YYYY' : 'MMM D')}`
+	} else {
+		if (isSameDay)
+			return `${start.format(showYear ? 'ddd, MMM D, YYYY' : 'ddd, MMM D')} · ${start.format('HH:mm')} - ${end.format('HH:mm')}`
+		else
+			return `${start.format(showYear ? 'MMM D, YYYY' : 'MMM D')}, ${start.format('HH:mm')} - ${end.format(showYear ? 'MMM D, YYYY' : 'MMM D')}, ${end.format('HH:mm')}`
+	}
+})
+
+const participants = computed(() => {
+	const total = new Set(calendarEvent.participants.map((p) => p.email)).size
+	const accepted = calendarEvent.participants.filter(
+		(p) => p.participation_status === 'ACCEPTED',
+	)
+	const declined = calendarEvent.participants.filter(
+		(p) => p.participation_status === 'DECLINED',
+	)
+	const tentative = calendarEvent.participants.filter(
+		(p) => p.participation_status === 'TENTATIVE',
+	)
+	const needsAction = calendarEvent.participants.filter(
+		(p) => p.participation_status === 'NEEDS-ACTION',
+	)
+
+	const parts = [
+		accepted.length && __('{0} yes', [accepted.length]),
+		declined.length && __('{0} no', [declined.length]),
+		tentative.length && __('{0} maybe', [tentative.length]),
+		needsAction.length && __('{0} pending', [needsAction.length]),
+	].filter(Boolean)
+
+	return __('{0} {1} {2}', [
+		total,
+		total === 1 ? __('participant') : __('participants'),
+		parts.length ? `(${parts.join(', ')})` : '',
+	])
+})
+
+const options = computed(() => {
+	const opts = [{ label: __('Edit'), icon: Edit2, onClick: () => openEditModal() }]
+
+	if (calendarEvent.recurrence_id)
+		opts.push({
+			label: __('Delete'),
+			icon: Trash2,
+			submenu: [
+				{ label: __('This instance'), onClick: () => handleDeleteEventInstance() },
+				{
+					label: __('This and following instances'),
+					onClick: () => handleDeleteFollowingEventInstances(),
+				},
+				{ label: __('Entire series'), onClick: () => handleDeleteEvent() },
+			],
+		})
+	else opts.push({ label: __('Delete'), icon: Trash2, onClick: () => handleDeleteEvent() })
+
+	return opts
+})
+
+const openEditModal = () => {
+	emit('edit')
+	close()
+}
+
+const responseOptions = (status: string) => [
+	{ label: __('This instance'), onClick: () => handleSetResponse(status, false) },
+	{ label: __('Entire series'), onClick: () => handleSetResponse(status, true) },
+]
+
+const handleSetResponse = (response: string, updateAllInstances: boolean) => {
+	if (response === userResponse.value) return
+	const participants = calendarEvent.participants.map((p) =>
+		p.email === userParticipant.value?.email ? { ...p, participation_status: response } : p,
+	)
+	const patch = { participants }
+	toast.promise(
+		updateAllInstances ? editEvent.submit({ patch }) : editEventInstance.submit({ patch }),
+		{
+			loading: __('Sending response...'),
+			success: __('Response sent.'),
+			error: __('Action failed. Please try again in some time.'),
+		},
+	)
+}
+
+const editEventInstance = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.update_calendar_event_instance',
+	makeParams: ({ patch }) => ({
+		user: user.data.name,
+		master_id: calendarEvent.master_id,
+		recurrence_id: calendarEvent.recurrence_id,
+		patch,
+		send_scheduling_messages: true,
+	}),
+	onSuccess: () => {
+		emit('reloadEvents')
+		close()
+	},
+})
+
+const editEvent = createResource({
+	url: 'mail.api.calendar.edit_calendar_event',
+	makeParams: ({ patch }) => ({
+		id: calendarEvent.master_id,
+		...patch,
+		send_scheduling_messages: true,
+	}),
+	onSuccess: () => {
+		emit('reloadEvents')
+		close()
+	},
+})
+
+const handleDeleteEventInstance = () =>
+	toast.promise(deleteEventInstance.submit(), {
+		loading: __('Deleting event...'),
+		success: __('Event deleted.'),
+		error: __('Action failed. Please try again in some time.'),
+	})
+
+const handleDeleteFollowingEventInstances = () => {
+	const recurrenceRule = calendarEvent.recurrence_rule
+	recurrenceRule.until = `${calendarEvent.date}T00:00:00Z`
+	const patch = { recurrence_rule: JSON.stringify(recurrenceRule) }
+
+	toast.promise(editEvent.submit({ patch }), {
+		loading: __('Deleting events...'),
+		success: __('Events deleted.'),
+		error: __('Action failed. Please try again in some time.'),
+	})
+}
+
+const handleDeleteEvent = () =>
+	toast.promise(deleteEvent.submit(), {
+		loading: calendarEvent.recurrence_id ? __('Deleting events...') : __('Deleting event...'),
+		success: calendarEvent.recurrence_id ? __('Events deleted.') : __('Event deleted.'),
+		error: __('Action failed. Please try again in some time.'),
+	})
+
+const deleteEventInstance = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.delete_calendar_event_instance',
+	makeParams: () => ({
+		user: user.data.name,
+		master_id: calendarEvent.master_id,
+		recurrence_id: calendarEvent.recurrence_id,
+	}),
+	onSuccess: () => {
+		emit('reloadEvents')
+		close()
+	},
+})
+
+const deleteEvent = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.delete_calendar_events',
+	makeParams: () => ({
+		user: user.data.name,
+		ids: [calendarEvent.master_id],
+	}),
+	onSuccess: () => {
+		emit('reloadEvents')
+		close()
+	},
+})
+
+const openUrl = (location: string) => {
+	if (isUrl(location)) window.open(location, '_blank')
+}
+
+const RESPONSE_STATUS_MAPPING = { ACCEPTED: __('Yes'), TENTATIVE: __('Maybe'), DECLINED: __('No') }
+</script>
+
+<template>
+	<div class="bg-surface-modal text-ink-gray-8 w-[32rem] rounded-md" @click.stop>
+		<!-- Header: title, date, and actions -->
+		<div class="flex justify-between border-b p-5">
+			<div class="space-y-2">
+				<h2 class="flex gap-3 text-left" :class="{ italic: !calendarEvent.title }">
+					{{ calendarEvent.title || __('[No title]') }}
+				</h2>
+				<div class="mt-px min-w-0 break-words text-left text-sm">{{ date }}</div>
+			</div>
+			<Dropdown
+				:options
+				:button="{
+					icon: 'more-vertical',
+					disabled: deleteEventInstance.loading || deleteEvent.loading,
+					variant: 'ghost',
+				}"
+			/>
+		</div>
+		<div class="flex flex-col gap-4 p-5">
+			<!-- Recurrence rule -->
+			<div v-if="calendarEvent.recurrence_id" class="flex gap-3">
+				<Repeat class="stroke-1.5 text-ink-gray-5 h-4 w-4 shrink-0" />
+				<span class="min-w-0 break-words text-left text-sm">
+					{{ getRepeatMessage(calendarEvent.recurrence_rule) }}
+				</span>
+			</div>
+
+			<!-- Locations -->
+			<div v-if="calendarEvent.locations.length" class="flex gap-3">
+				<component
+					:is="isUrl(calendarEvent.locations[0]._name) ? Globe : MapPin"
+					class="stroke-1.5 text-ink-gray-5 h-4 w-4 shrink-0"
+				/>
+				<div class="space-y-2">
+					<div
+						v-for="location in calendarEvent.locations"
+						:key="location.uid"
+						class="mt-px min-w-0 break-words text-left text-sm"
+						:class="{
+							'text-ink-blue-3 cursor-pointer hover:underline': isUrl(
+								location._name,
+							),
+						}"
+						@click="openUrl(location._name)"
+					>
+						{{ location._name }}
+					</div>
+				</div>
+			</div>
+
+			<!-- Participants -->
+			<div class="flex gap-3">
+				<Users class="stroke-1.5 text-ink-gray-5 h-4 w-4 shrink-0" />
+				<span class="mt-px text-sm"> {{ participants }} </span>
+			</div>
+			<div class="max-h-44 space-y-4 overflow-y-scroll pl-7">
+				<EventParticipantList
+					:participants="
+						getReorderedParticipants(
+							calendarEvent.participants,
+							calendarEvent.organizer,
+						)
+					"
+					:dont-show-remove="true"
+				/>
+			</div>
+
+			<!-- Description -->
+			<div v-if="calendarEvent.description" class="flex gap-3">
+				<Text class="stroke-1.5 text-ink-gray-5 h-4 w-4 shrink-0" />
+				<div class="mt-px min-w-0 text-left text-sm">
+					<span
+						ref="descriptionRef"
+						class="break-words"
+						:class="{ 'line-clamp-3': !descriptionExpanded }"
+					>
+						{{ calendarEvent.description }}
+					</span>
+					<button
+						v-if="isDescriptionClamped && !descriptionExpanded"
+						class="text-ink-blue-3 mt-0.5 block"
+						@click="descriptionExpanded = true"
+					>
+						{{ __('Show more') }}
+					</button>
+				</div>
+			</div>
+
+			<!-- Organizer -->
+			<div class="flex gap-3">
+				<CalendarDays class="stroke-1.5 text-ink-gray-5 h-4 w-4 shrink-0" />
+				<span class="mt-px min-w-0 break-words text-left text-sm">
+					{{ calendarEvent.organizer }}
+				</span>
+			</div>
+		</div>
+
+		<!-- RSVP -->
+		<div
+			v-if="userParticipant.expect_reply"
+			class="bg-surface-menu-bar flex items-center justify-between rounded-b border-t p-5"
+		>
+			<div class="text-left text-sm">{{ __('Are you attending?') }}</div>
+			<div class="flex gap-2">
+				<template v-if="calendarEvent.recurrence_id">
+					<Dropdown
+						v-for="(label, status) in RESPONSE_STATUS_MAPPING"
+						:key="status"
+						:options="responseOptions(status)"
+					>
+						<Button
+							:label
+							variant="outline"
+							class="text-xs"
+							:class="{ '!bg-surface-gray-3': userResponse === status }"
+						/>
+					</Dropdown>
+				</template>
+				<template v-else>
+					<Button
+						v-for="(label, status) in RESPONSE_STATUS_MAPPING"
+						:key="status"
+						:label
+						variant="outline"
+						class="text-xs"
+						:class="{ '!bg-surface-gray-3': userResponse === status }"
+						@click="handleSetResponse(status, true)"
+					/>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/components/Icons/CalendarLogo.vue b/frontend/src/components/Icons/CalendarLogo.vue
new file mode 100644
index 000000000..1c22405c8
--- /dev/null
+++ b/frontend/src/components/Icons/CalendarLogo.vue
@@ -0,0 +1,11 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44">
+		<rect width="44" height="44" fill="#08A7D5" rx="12.375" />
+		<path
+			stroke="#fff"
+			stroke-width="3.12"
+			d="M10.498 13.866h5.66m-4.127 5.64v9.227a3 3 0 0 0 3 3h14.658a3 3 0 0 0 3-3V13.866h-3.96m-12.57 0V8.97m0 4.895h12.57m0 0V8.97"
+		/>
+		<path fill="#fff" d="M27.875 23.684h-3.12v3.12h3.12v-3.12Z" />
+	</svg>
+</template>
diff --git a/frontend/src/components/MailThread.vue b/frontend/src/components/MailThread.vue
index c7283165e..a90ba237f 100644
--- a/frontend/src/components/MailThread.vue
+++ b/frontend/src/components/MailThread.vue
@@ -98,6 +98,7 @@
 					<ComposeMailEditor
 						v-if="mail.draft && !isMobile"
 						v-model="mail.show"
+						:disable-outside-click-to-close="true"
 						:reload-mails="reload"
 						:mail-details="draftMails[mail.name]"
 						:is-in-thread="true"
diff --git a/frontend/src/components/Modals/AddAddressBookContactsModal.vue b/frontend/src/components/Modals/AddAddressBookContactsModal.vue
index 9508598ae..131116516 100644
--- a/frontend/src/components/Modals/AddAddressBookContactsModal.vue
+++ b/frontend/src/components/Modals/AddAddressBookContactsModal.vue
@@ -34,7 +34,7 @@ import {
 	createResource,
 } from 'frappe-ui'
 
-import { extractNameFromEmail } from '@/utils'
+import { extractNameFromEmail } from '@/utils/format'
 
 const show = defineModel<boolean>()
 
diff --git a/frontend/src/components/Modals/ContactsModal.vue b/frontend/src/components/Modals/ContactsModal.vue
index a37b6e89f..54dfa581d 100644
--- a/frontend/src/components/Modals/ContactsModal.vue
+++ b/frontend/src/components/Modals/ContactsModal.vue
@@ -43,7 +43,7 @@ import {
 	createResource,
 } from 'frappe-ui'
 
-import { extractNameFromEmail } from '@/utils'
+import { extractNameFromEmail } from '@/utils/format'
 import { userStore } from '@/stores/user'
 
 const show = defineModel<boolean>()
diff --git a/frontend/src/components/Modals/EventModal.vue b/frontend/src/components/Modals/EventModal.vue
new file mode 100644
index 000000000..ddf098ff5
--- /dev/null
+++ b/frontend/src/components/Modals/EventModal.vue
@@ -0,0 +1,608 @@
+<script setup lang="ts">
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Button, Combobox, Dialog, Dropdown, FormControl, createResource, toast } from 'frappe-ui'
+
+import { getReorderedParticipants, raiseToast } from '@/utils'
+import { getRepeatMessage } from '@/utils/format'
+import { userStore } from '@/stores/user'
+import EventAlertList from '@/components/EventAlertList.vue'
+import EventParticipantList from '@/components/EventParticipantList.vue'
+import EventRepeatSettingsModal from '@/components/Modals/EventRepeatSettingsModal.vue'
+
+const show = defineModel<boolean>()
+const { selectedEvent } = defineProps<{ selectedEvent: any }>()
+const emit = defineEmits(['reloadEvents'])
+
+const user = inject('$user')
+const dayjs = inject('$dayjs')
+const { identities } = userStore()
+
+const isNew = computed(() => !selectedEvent?.calendarEvent)
+const showRSVP = computed(() => !isNew.value && selectedEvent.calendarEvent.role !== 'Organizer')
+
+// --- Event initialization ---
+
+const getEventData = () => {
+	if (isNew.value) return getDefaultEventData()
+
+	const { calendarEvent: ev } = selectedEvent
+	const start = dayjs(ev.start)
+	const isAllDay =
+		start.hour() === 0 &&
+		start.minute() === 0 &&
+		start.second() === 0 &&
+		dayjs.duration(ev.duration).days() > 0 &&
+		dayjs.duration(ev.duration).hours() === 0 &&
+		dayjs.duration(ev.duration).minutes() === 0 &&
+		dayjs.duration(ev.duration).seconds() === 0
+	const end = start.add(dayjs.duration(ev.duration))
+	const displayEnd = isAllDay ? end.subtract(1, 'day') : end
+
+	return {
+		title: ev.title || '',
+		organizer: ev.organizer,
+		isAllDay,
+		repeat: !!ev.recurrence_rule?.frequency,
+		startDate: start.format('YYYY-MM-DD'),
+		startTime: start.format('HH:mm'),
+		endDate: displayEnd.format('YYYY-MM-DD'),
+		endTime: end.format('HH:mm'),
+		free_busy_status: ev.free_busy_status,
+		privacy: ev.privacy,
+		locations: ev.locations.length ? ev.locations.map((l) => l._name) : [''],
+		alerts: ev.alerts?.map(parseAlert) ?? [],
+		description: ev.description || '',
+		participants: [...ev.participants],
+		recurrence_rule: ev.recurrence_rule,
+	}
+}
+
+const getDefaultEventData = () => {
+	const startTime = selectedEvent?.time
+		? dayjs(selectedEvent.time, 'h a').format('HH:mm')
+		: dayjs(selectedEvent.date).isToday()
+			? dayjs().add(1, 'hour').startOf('hour').format('HH:mm')
+			: '10:00'
+
+	return {
+		title: '',
+		organizer: user.data.name,
+		isAllDay: !selectedEvent?.time,
+		repeat: false,
+		startDate: dayjs(selectedEvent.date).format('YYYY-MM-DD'),
+		startTime,
+		endDate: dayjs(selectedEvent.date).format('YYYY-MM-DD'),
+		endTime: dayjs(startTime, 'HH:mm').add(1, 'hour').format('HH:mm'),
+		locations: [''],
+		alerts: [],
+		description: '',
+		free_busy_status: 'Busy',
+		privacy: '',
+		participants: [
+			{
+				email: user.data.name,
+				_name: user.data.full_name,
+				participation_status: 'ACCEPTED',
+			},
+		],
+		recurrence_rule: {},
+	}
+}
+
+const event = reactive({})
+let originalParams = {}
+
+// --- Computed params ---
+
+const duration = computed(() => {
+	if (event.isAllDay) {
+		const days = dayjs(event.endDate).diff(dayjs(event.startDate), 'day') + 1
+		return dayjs.duration({ days }).toISOString()
+	}
+
+	const start = dayjs(`${event.startDate}T${event.startTime}`)
+	const end = dayjs(`${event.endDate}T${event.endTime}`)
+	const diff = dayjs.duration(end.diff(start))
+	const hours = Math.floor(diff.asHours())
+	const minutes = diff.minutes()
+	return dayjs.duration({ hours, minutes }).toISOString()
+})
+
+const participants = computed(() =>
+	getReorderedParticipants(
+		event.participants,
+		event.organizer,
+		selectedEvent.calendarEvent?.participants,
+	),
+)
+
+const userParticipant = computed(() =>
+	participants.value.find((p) => identities.data.some((id) => id.email === p.email)),
+)
+
+const eventParams = computed(() => {
+	const params: Record<string, any> = {
+		user: user.data.name,
+		organizer: event.organizer,
+		start: dayjs(`${event.startDate}T${event.isAllDay ? '00:00' : event.startTime}`).format(
+			'YYYY-MM-DD[T]HH:mm:ss',
+		),
+		duration: duration.value,
+	}
+
+	if (selectedEvent.calendarEvent?.recurrence_id && !isUpdateInstance.value) {
+		params.start = selectedEvent.calendarEvent.master_start
+	}
+
+	if (event.title) params.title = event.title
+	if (dayjs?.tz) params.time_zone = dayjs.tz.guess()
+	if (event.recurrence_rule && Object.keys(event.recurrence_rule).length)
+		params.recurrence_rule = event.recurrence_rule
+	if (event.privacy) params.privacy = event.privacy
+	if (event.free_busy_status) params.free_busy_status = event.free_busy_status
+	if (event.description) params.description = event.description
+	if (event.locations?.some((l) => l?.trim()))
+		params.locations = event.locations.filter((l) => l?.trim()).map((name) => ({ name }))
+	if (event.participants?.length) params.participants = event.participants
+	if (event.alerts?.length) {
+		params.alerts = event.alerts.map((a) => {
+			const base = { action: a.action, type: a.type }
+			if (a.type === 'AbsoluteTrigger')
+				return {
+					...base,
+					when: dayjs(`${a.date}T${a.time}`).format('YYYY-MM-DD[T]HH:mm:ss'),
+				}
+
+			return {
+				...base,
+				offset: dayjs.duration({ [a.unit]: a.number * a.direction }).toISOString(),
+				relative_to: a.relative_to,
+			}
+		})
+	}
+
+	return params
+})
+
+const patch = computed(() =>
+	Object.fromEntries(
+		[...new Set([...Object.keys(eventParams.value), ...Object.keys(originalParams)])]
+			.filter(
+				(k) => JSON.stringify(eventParams.value[k]) !== JSON.stringify(originalParams[k]),
+			)
+			.map((k) => [k, eventParams.value[k]]),
+	),
+)
+
+// --- Helpers ---
+
+const parseAlert = (a: any) => {
+	if (a.type === 'AbsoluteTrigger')
+		return {
+			type: a.type,
+			action: a.action,
+			date: dayjs.utc(a.when).format('YYYY-MM-DD'),
+			time: dayjs.utc(a.when).format('HH:mm'),
+		}
+
+	const d = dayjs.duration(a.offset).$d
+	const units = ['weeks', 'days', 'hours', 'minutes']
+	const unit = units.find((u) => d[u]) ?? 'minutes'
+	const number = d[unit]
+
+	return {
+		type: a.type,
+		action: a.action,
+		number: Math.abs(number),
+		unit,
+		direction: a.offset.startsWith('-') ? -1 : 1,
+		relative_to: a.relative_to,
+	}
+}
+
+const hasParticipantsOtherThanUser = (participants: any[]) =>
+	participants?.some((p) => identities.data.every((i) => i.email !== p.email)) ?? false
+
+// --- Watchers ---
+
+watch(show, (val) => {
+	if (!val) return
+	Object.assign(event, getEventData())
+	originalParams = JSON.parse(JSON.stringify(eventParams.value))
+})
+
+const showRepeatSettings = ref(false)
+watch(showRepeatSettings, (val) => {
+	if (!val && !event.recurrence_rule?.frequency) event.repeat = false
+})
+
+// --- Participants ---
+
+const addParticipant = (email: string) => {
+	if (!email?.trim()) return
+	if (!/^\S+@\S+\.\S+$/.test(email)) return raiseToast(__('Invalid email address'), 'error')
+	if (event.participants.some((p) => p.email.toLowerCase() === email.toLowerCase())) return
+	event.participants.push({ email, participation_status: 'NEEDS-ACTION', expect_reply: true })
+}
+
+const handleParticipantEnter = (e: Event) => {
+	const value = (e.target as HTMLInputElement).value.trim()
+	if (!value) return
+	value
+		.split(',')
+		.map((s) => s.trim())
+		.filter(Boolean)
+		.forEach(addParticipant)
+	;(e.target as HTMLInputElement).value = ''
+}
+
+const removeParticipant = (email: string) =>
+	(event.participants = event.participants.filter((p) => p.email !== email))
+
+// --- Save logic ---
+
+const handleSuccess = () => {
+	show.value = false
+	emit('reloadEvents')
+}
+
+const createEvent = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.add_calendar_event',
+	makeParams: ({ sendEmail }: { sendEmail: boolean }) => ({
+		...eventParams.value,
+		send_scheduling_messages: sendEmail,
+	}),
+	onSuccess: handleSuccess,
+})
+
+const editEventInstance = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.update_calendar_event_instance',
+	makeParams: ({ sendEmail }: { sendEmail: boolean }) => ({
+		user: user.data.name,
+		master_id: selectedEvent.calendarEvent.master_id,
+		recurrence_id: selectedEvent.calendarEvent.recurrence_id,
+		patch: patch.value,
+		send_scheduling_messages: sendEmail,
+	}),
+	onSuccess: handleSuccess,
+})
+
+const editEvent = createResource({
+	url: 'mail.client.doctype.calendar_event.calendar_event.update_calendar_event',
+	makeParams: ({ sendEmail }: { sendEmail: boolean }) => ({
+		id: selectedEvent.calendarEvent.master_id,
+		uid: selectedEvent.calendarEvent.uid,
+		...eventParams.value,
+		send_scheduling_messages: sendEmail,
+	}),
+	onSuccess: handleSuccess,
+})
+
+const isUpdateInstance = ref(false)
+
+const submitEvent = (sendEmail: boolean) => {
+	const isInstance = isUpdateInstance.value && selectedEvent.calendarEvent?.recurrence_id
+	const resource = isNew.value ? createEvent : isInstance ? editEventInstance : editEvent
+	const messages = isNew.value
+		? { loading: __('Creating event...'), success: __('Event created.') }
+		: { loading: __('Updating event...'), success: __('Event updated.') }
+
+	toast.promise(resource.submit({ sendEmail }), {
+		...messages,
+		error: __('Action failed. Please try again in some time.'),
+	})
+	showNotifyParticipantsModal.value = false
+}
+
+const showNotifyParticipantsModal = ref(false)
+const showRecurringEventModal = ref(false)
+
+const handleSave = () => {
+	const needsEmail =
+		hasParticipantsOtherThanUser(selectedEvent?.calendarEvent?.participants) ||
+		hasParticipantsOtherThanUser(event.participants)
+	if (needsEmail) showNotifyParticipantsModal.value = true
+	else submitEvent(false)
+}
+
+const handleSaveRecurringEvent = (updateInstance: boolean) => {
+	isUpdateInstance.value = updateInstance
+	showRecurringEventModal.value = false
+	handleSave()
+}
+
+const shouldShowRecurringEventModal = computed(
+	() =>
+		selectedEvent?.calendarEvent?.recurrence_id &&
+		!Object.keys(patch.value).includes('recurrence_rule'),
+)
+
+// --- Alerts ---
+
+const addAlertOptions = computed(() => [
+	{
+		label: __('Relative to event'),
+		onClick: () =>
+			event.alerts.push({
+				type: 'OffsetTrigger',
+				action: 'Display',
+				number: 10,
+				unit: 'minutes',
+				direction: -1,
+				relative_to: 'Start',
+			}),
+	},
+	{
+		label: __('On specific date'),
+		onClick: () =>
+			event.alerts.push({
+				type: 'AbsoluteTrigger',
+				action: 'Display',
+				date: dayjs(event.startDate).subtract(1, 'day').format('YYYY-MM-DD'),
+				time: '09:00',
+			}),
+	},
+])
+
+// --- Contacts search ---
+
+const mailContacts = createResource({
+	url: 'mail.api.contacts.get_contacts',
+	makeParams: (text: string) => ({
+		filter: { operator: 'OR', conditions: [{ text }, { email: text }] },
+	}),
+	transform: (data) => data.map((o) => o.email),
+})
+
+const debouncedSearch = useDebounceFn((text: string) => text && mailContacts.reload(text), 300)
+
+// --- Dialog options ---
+
+const dialogOptions = computed(() => ({
+	title: isNew.value ? __('Add Event') : __('Edit Event'),
+	size: '5xl',
+	actions: [
+		{
+			label: __('Save'),
+			variant: 'solid',
+			disabled:
+				createEvent.loading ||
+				editEvent.loading ||
+				editEventInstance.loading ||
+				(!isNew.value && !Object.keys(patch.value).length),
+			onClick: () =>
+				shouldShowRecurringEventModal.value
+					? (showRecurringEventModal.value = true)
+					: handleSave(),
+		},
+	],
+}))
+
+const RSVP_OPTIONS = [
+	{ label: __(' '), value: 'NEEDS-ACTION' },
+	{ label: __('Yes'), value: 'ACCEPTED' },
+	{ label: __('Maybe'), value: 'TENTATIVE' },
+	{ label: __('No'), value: 'DECLINED' },
+]
+
+const AVAILABILITY_OPTIONS = [
+	{ label: __('Free'), value: 'Free' },
+	{ label: __('Busy'), value: 'Busy' },
+]
+
+const VISIBILITY_OPTIONS = [
+	{ label: __('Public'), value: 'Public' },
+	{ label: __('Private'), value: 'Private' },
+]
+
+const showNotifyParticipantsOptions = computed(() => ({
+	title: __('Notify Participants'),
+	icon: { name: 'bell' },
+	message: isNew.value
+		? __("Send an email to let attendees know they've been invited?")
+		: __('Send an email to let attendees know this event has been updated?'),
+}))
+
+const SHOW_RECURRING_EVENT_MODAL_OPTIONS = {
+	title: __('Update Recurring Event'),
+	icon: { name: 'repeat' },
+	message: __('Do you want to update just this instance, or all events in the series?'),
+}
+</script>
+
+<template>
+	<Dialog v-model="show" :disable-outside-click-to-close="true" :options="dialogOptions">
+		<template #body-content>
+			<div class="grid max-h-[48rem] grid-cols-11 gap-6 overflow-y-auto">
+				<div class="col-span-7 space-y-4">
+					<h3 class="text-base font-medium">{{ __('Event Details') }}</h3>
+					<!-- Title -->
+					<FormControl
+						v-model="event.title"
+						:label="__('Title')"
+						:placeholder="__('Meeting with Team')"
+					/>
+
+					<!-- Date and Time -->
+					<FormControl v-model="event.isAllDay" :label="__('All Day')" type="checkbox" />
+					<div class="flex space-x-4">
+						<FormControl
+							v-model="event.startDate"
+							type="date"
+							:label="__('Start Date')"
+							class="w-full"
+						/>
+						<FormControl
+							v-if="!event.isAllDay"
+							v-model="event.startTime"
+							type="time"
+							:label="__('Start Time')"
+							class="w-full"
+						/>
+					</div>
+					<div class="flex space-x-4">
+						<FormControl
+							v-model="event.endDate"
+							type="date"
+							:label="__('End Date')"
+							class="w-full"
+						/>
+						<FormControl
+							v-if="!event.isAllDay"
+							v-model="event.endTime"
+							type="time"
+							:label="__('End Time')"
+							class="w-full"
+						/>
+					</div>
+
+					<!-- Repeat -->
+					<div class="flex items-center space-x-3">
+						<FormControl
+							v-model="event.repeat"
+							:label="
+								event.recurrence_rule?.frequency
+									? __('Repeat: {0}', [getRepeatMessage(event.recurrence_rule)])
+									: __('Repeat')
+							"
+							type="checkbox"
+							@update:model-value="
+								$event ? (showRepeatSettings = true) : (event.recurrence_rule = {})
+							"
+						/>
+						<span
+							v-if="event.recurrence_rule?.frequency"
+							class="text-ink-gray-4 cursor-pointer text-base hover:underline"
+							@click="showRepeatSettings = true"
+						>
+							{{ __('Edit') }}
+						</span>
+					</div>
+
+					<!-- Locations -->
+					<div class="space-y-2">
+						<div v-for="(_, i) in event.locations" :key="i" class="flex space-x-2">
+							<FormControl
+								v-model="event.locations[i]"
+								:label="
+									i === 0
+										? event.locations.length > 1
+											? __('Locations')
+											: __('Location')
+										: ''
+								"
+								:placeholder="__('Meeting location {0}', [i + 1])"
+								class="w-full"
+							/>
+							<Button
+								v-if="
+									event.locations.length === i + 1 && event.locations.length < 3
+								"
+								icon="plus"
+								class="mt-auto"
+								@click="event.locations.push('')"
+							/>
+							<Button
+								v-else
+								icon="x"
+								class="mt-auto"
+								@click="event.locations.splice(i, 1)"
+							/>
+						</div>
+					</div>
+
+					<!-- Alerts -->
+					<div class="space-y-2">
+						<EventAlertList v-model:alerts="event.alerts" />
+						<Dropdown
+							v-if="event.alerts.length < 3"
+							:button="{ label: __('Add Alert') }"
+							:options="addAlertOptions"
+						/>
+					</div>
+
+					<!-- Availability and Privacy -->
+					<div class="flex space-x-4">
+						<FormControl
+							v-model="event.free_busy_status"
+							type="select"
+							:label="__('Availability')"
+							:options="AVAILABILITY_OPTIONS"
+							class="w-full"
+						/>
+						<FormControl
+							v-model="event.privacy"
+							type="select"
+							:label="__('Visibility')"
+							:options="VISIBILITY_OPTIONS"
+							class="w-full"
+						/>
+					</div>
+
+					<!-- Description -->
+					<FormControl
+						v-model="event.description"
+						:label="__('Description')"
+						type="textarea"
+						:placeholder="__('Event description')"
+					/>
+				</div>
+				<div class="col-span-4 flex h-full flex-col space-y-4 border-l pl-6">
+					<!-- RSVP -->
+					<template v-if="showRSVP">
+						<h3 class="text-base font-medium">{{ __('RSVP') }}</h3>
+						<FormControl
+							v-model="userParticipant.participation_status"
+							type="select"
+							:label="__('Are you attending?')"
+							:options="RSVP_OPTIONS"
+							class="w-full"
+						/>
+					</template>
+
+					<!-- Participants -->
+					<h3 class="text-base font-medium">{{ __('Participants') }}</h3>
+					<Combobox
+						:options="mailContacts?.data || []"
+						:placeholder="__('Enter participants')"
+						@input="debouncedSearch($event)"
+						@keyup.enter="handleParticipantEnter($event)"
+					/>
+					<div class="max-h-[32rem] space-y-4 overflow-y-auto">
+						<EventParticipantList
+							:participants
+							@remove-participant="removeParticipant"
+						/>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+	<EventRepeatSettingsModal
+		v-model="showRepeatSettings"
+		:start-date="event?.startDate"
+		:r-rule="event?.recurrence_rule"
+		@update-recurrence-rule="(val) => (event.recurrence_rule = val)"
+	/>
+	<Dialog v-model="showRecurringEventModal" :options="SHOW_RECURRING_EVENT_MODAL_OPTIONS">
+		<template #actions>
+			<div class="flex justify-end space-x-2">
+				<Button @click="handleSaveRecurringEvent(false)">{{ __('Entire series') }}</Button>
+				<Button variant="solid" @click="handleSaveRecurringEvent(true)">
+					{{ __('This instance') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+	<Dialog v-model="showNotifyParticipantsModal" :options="showNotifyParticipantsOptions">
+		<template #actions>
+			<div class="flex justify-end space-x-2">
+				<Button variant="outline" @click="submitEvent(false)"> {{ __('Skip') }} </Button>
+				<Button variant="solid" @click="submitEvent(true)">
+					{{ __('Send Email') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
diff --git a/frontend/src/components/Modals/EventRepeatSettingsModal.vue b/frontend/src/components/Modals/EventRepeatSettingsModal.vue
new file mode 100644
index 000000000..85f12ad76
--- /dev/null
+++ b/frontend/src/components/Modals/EventRepeatSettingsModal.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { computed, inject, reactive, watch } from 'vue'
+import { Dialog, FormControl } from 'frappe-ui'
+
+import { getRepeatFrequencyOptions, getRepeatMessage } from '@/utils/format'
+
+const show = defineModel<boolean>()
+const { startDate, rRule } = defineProps<{ startDate: string; rRule: any }>()
+const emit = defineEmits(['updateRecurrenceRule'])
+
+const dayjs = inject('$dayjs')
+
+// Derived from startDate
+const startDay = computed(() => dayjs(startDate).format('dd').toLowerCase())
+const startWeekNumber = computed(() => Math.ceil(dayjs(startDate).date() / 7))
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const getDefaultRepeat = () => ({
+	interval: 1,
+	frequency: 'daily',
+	end: ' ',
+	until: dayjs().add(1, 'week').format('YYYY-MM-DD'),
+	count: 10,
+	byDay: startDay.value ? [{ day: startDay.value }] : ([] as { day: string }[]),
+	repeatOn: 'day_of_month',
+})
+
+const parseRRule = () => {
+	const defaults = getDefaultRepeat()
+	const frequency = rRule.frequency ?? defaults.frequency
+	const interval = rRule.interval ?? 1
+
+	let end = ' '
+	let until = dayjs().add(1, 'week').format('YYYY-MM-DD')
+	let count = 10
+
+	if (rRule.until) {
+		end = 'On Date'
+		until = dayjs(rRule.until).format('YYYY-MM-DD')
+	} else if (rRule.count) {
+		end = 'After Occurrences'
+		count = rRule.count
+	}
+
+	let byDay: { day: string }[] = []
+	let repeatOn = 'day_of_month'
+
+	if (frequency === 'weekly') {
+		byDay = (rRule.byDay ?? []).map((d: any) => ({ day: d.day }))
+		if (!byDay.length) byDay = [{ day: startDay.value }]
+	} else if (frequency === 'monthly') {
+		if (rRule.byMonthDay) {
+			const val = Array.isArray(rRule.byMonthDay) ? rRule.byMonthDay[0] : rRule.byMonthDay
+			repeatOn = val === -1 ? 'last_day_of_month' : 'day_of_month'
+		} else if (rRule.byDay?.length) {
+			const entry = rRule.byDay[0]
+			repeatOn = entry.nthOfPeriod === -1 ? 'last_day_of_week' : 'day_of_week'
+		}
+	}
+
+	return { frequency, interval, end, until, count, byDay, repeatOn }
+}
+
+const getRepeat = () => (rRule && Object.keys(rRule).length ? parseRRule() : getDefaultRepeat())
+
+const repeat = reactive({ ...getRepeat() })
+
+const toggleDay = (day: string) => {
+	const idx = repeat.byDay.findIndex((d) => d.day === day)
+	if (idx === -1) repeat.byDay.push({ day })
+	else repeat.byDay.splice(idx, 1)
+}
+
+// ─── Watches ──────────────────────────────────────────────────────────────────
+
+// Re-sync state when dialog opens
+watch(show, (val) => {
+	if (val) Object.assign(repeat, getRepeat())
+})
+
+// Set default byDay when switching to weekly
+watch(
+	() => repeat.frequency,
+	(freq) => {
+		if (freq === 'weekly' && !repeat.byDay.length) repeat.byDay = [{ day: startDay.value }]
+	},
+)
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const monthlyRepeatOnOptions = computed(() => {
+	const date = dayjs(startDate)
+	const dayName = date.format('dddd')
+	const ordinals = [__('First'), __('Second'), __('Third'), __('Fourth'), __('Fifth')]
+	const daysInMonth = date.daysInMonth()
+
+	const options = [{ label: __('{0} of Month', [date.format('Do')]), value: 'day_of_month' }]
+
+	if (date.date() === daysInMonth)
+		options.push({ label: __('Last Day of Month'), value: 'last_day_of_month' })
+
+	options.push({
+		label: __('{0} {1} of Month', [ordinals[startWeekNumber.value - 1], dayName]),
+		value: 'day_of_week',
+	})
+
+	if (startWeekNumber.value === Math.ceil(daysInMonth / 7) || daysInMonth - date.date() < 7)
+		options.push({ label: __('Last {0} of Month', [dayName]), value: 'last_day_of_week' })
+
+	return options
+})
+
+const recurrenceRule = computed(() => {
+	const rule: Record<
+		string,
+		string | string[] | number | number[] | { day: string; nthOfPeriod?: number }[]
+	> = { frequency: repeat.frequency, interval: repeat.interval }
+
+	if (repeat.frequency === 'weekly' && repeat.byDay.length) {
+		rule.byDay = repeat.byDay
+	} else if (repeat.frequency === 'monthly') {
+		const monthlyByDay = {
+			day_of_week: [{ day: startDay.value, nthOfPeriod: startWeekNumber.value }],
+			last_day_of_week: [{ day: startDay.value, nthOfPeriod: -1 }],
+		}
+		const monthlyByMonthDay = {
+			day_of_month: [dayjs(startDate).date()],
+			last_day_of_month: [-1],
+		}
+
+		if (repeat.repeatOn in monthlyByDay) rule.byDay = monthlyByDay[repeat.repeatOn]
+		else rule.byMonthDay = monthlyByMonthDay[repeat.repeatOn]
+	}
+
+	if (repeat.end === 'On Date') rule.until = `${repeat.until}T23:59:59Z`
+	else if (repeat.end === 'After Occurrences') rule.count = repeat.count
+
+	return rule
+})
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const WEEKDAYS = [
+	{ label: __('Sun'), value: 'su' },
+	{ label: __('Mon'), value: 'mo' },
+	{ label: __('Tue'), value: 'tu' },
+	{ label: __('Wed'), value: 'we' },
+	{ label: __('Thu'), value: 'th' },
+	{ label: __('Fri'), value: 'fr' },
+	{ label: __('Sat'), value: 'sa' },
+]
+
+const END_OPTIONS = [
+	{ label: __('Never'), value: ' ' },
+	{ label: __('On Date'), value: 'On Date' },
+	{ label: __('After Occurrences'), value: 'After Occurrences' },
+]
+
+const DIALOG_OPTIONS = {
+	title: __('Repeat Settings'),
+	actions: [
+		{
+			label: __('Apply'),
+			variant: 'solid',
+			onClick: () => {
+				emit('updateRecurrenceRule', recurrenceRule.value)
+				show.value = false
+			},
+		},
+	],
+}
+</script>
+
+<template>
+	<Dialog v-model="show" :options="DIALOG_OPTIONS">
+		<template #body-content>
+			<div class="space-y-4">
+				<!-- Interval + Frequency -->
+				<div class="flex space-x-4">
+					<FormControl
+						v-model.number="repeat.interval"
+						:label="__('Repeat Every')"
+						type="number"
+						class="w-full"
+					/>
+					<FormControl
+						v-model="repeat.frequency"
+						type="select"
+						label="‎"
+						:options="getRepeatFrequencyOptions(repeat.interval)"
+						class="w-full"
+					/>
+				</div>
+
+				<!-- Repeat on days: weekly -->
+				<div v-if="repeat.frequency === 'weekly'">
+					<label class="text-ink-gray-5 mb-1 block text-xs">
+						{{ __('Repeat On Days') }}
+					</label>
+					<div class="flex w-full overflow-hidden rounded border">
+						<button
+							v-for="(d, i) in WEEKDAYS"
+							:key="d.value"
+							type="button"
+							class="text-ink-gray-7 h-7 w-full text-xs focus:outline-none"
+							:class="{
+								'border-r': i !== WEEKDAYS.length - 1,
+								'bg-surface-gray-2': !repeat.byDay
+									.map((d) => d.day)
+									.includes(d.value),
+							}"
+							@click="toggleDay(d.value)"
+						>
+							{{ d.label }}
+						</button>
+					</div>
+				</div>
+
+				<!-- Repeat on: monthly -->
+				<FormControl
+					v-else-if="repeat.frequency === 'monthly'"
+					v-model="repeat.repeatOn"
+					type="select"
+					:label="__('Repeat On')"
+					:options="monthlyRepeatOnOptions"
+				/>
+
+				<!-- End condition -->
+				<FormControl
+					v-model="repeat.end"
+					type="select"
+					:label="__('End')"
+					:options="END_OPTIONS"
+				/>
+				<FormControl
+					v-if="repeat.end === 'On Date'"
+					v-model="repeat.until"
+					type="date"
+					:label="__('End Date')"
+				/>
+				<FormControl
+					v-else-if="repeat.end === 'After Occurrences'"
+					v-model.number="repeat.count"
+					type="number"
+					:label="__('Total Occurrences')"
+				/>
+
+				<hr />
+
+				<div class="text-base font-medium">{{ getRepeatMessage(recurrenceRule) }}</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
diff --git a/frontend/src/components/Modals/SearchModal.vue b/frontend/src/components/Modals/SearchModal.vue
index 8fd1ff7af..86cada9f2 100644
--- a/frontend/src/components/Modals/SearchModal.vue
+++ b/frontend/src/components/Modals/SearchModal.vue
@@ -161,8 +161,8 @@ import { ChevronLeft, Paperclip, Search, SlidersHorizontal } from 'lucide-vue-ne
 import { Button, Dialog, FormControl, createResource } from 'frappe-ui'
 
 import { getAttachmentOptions, getReadStatusOptions } from '@/constants'
-import { getFormattedDate } from '@/utils'
 import { useScreenSize } from '@/utils/composables'
+import { getFormattedDate } from '@/utils/format'
 import { userStore } from '@/stores/user'
 import SearchMobileLayout from '@/components/SearchMobileLayout.vue'
 
diff --git a/frontend/src/components/QuotaBar.vue b/frontend/src/components/QuotaBar.vue
index c3459e5c4..a7c2b51c9 100644
--- a/frontend/src/components/QuotaBar.vue
+++ b/frontend/src/components/QuotaBar.vue
@@ -26,7 +26,7 @@ import { computed, inject } from 'vue'
 import { Cloud } from 'lucide-vue-next'
 import { createResource } from 'frappe-ui'
 
-import { formatBytes } from '@/utils'
+import { formatBytes } from '@/utils/format'
 
 const { isCollapsed } = defineProps<{ isCollapsed: boolean }>()
 
diff --git a/frontend/src/pages/AddressBookView.vue b/frontend/src/pages/AddressBookView.vue
index 738f86356..28e812d88 100644
--- a/frontend/src/pages/AddressBookView.vue
+++ b/frontend/src/pages/AddressBookView.vue
@@ -109,7 +109,8 @@ import {
 	createResource,
 } from 'frappe-ui'
 
-import { extractNameFromEmail, raiseToast } from '@/utils'
+import { raiseToast } from '@/utils'
+import { extractNameFromEmail } from '@/utils/format'
 import { userStore } from '@/stores/user'
 import DashboardCard from '@/components/DashboardCard.vue'
 import DashboardLayout from '@/components/DashboardLayout.vue'
diff --git a/frontend/src/pages/ContactsView.vue b/frontend/src/pages/ContactsView.vue
index 470b4b816..c3b7edf5c 100644
--- a/frontend/src/pages/ContactsView.vue
+++ b/frontend/src/pages/ContactsView.vue
@@ -54,7 +54,8 @@ import {
 	createResource,
 } from 'frappe-ui'
 
-import { extractNameFromEmail, raiseToast } from '@/utils'
+import { raiseToast } from '@/utils'
+import { extractNameFromEmail } from '@/utils/format'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import AddContactModal from '@/components/Modals/AddContactModal.vue'
 
diff --git a/frontend/src/pages/MailExchangeView.vue b/frontend/src/pages/MailExchangeView.vue
index d3a2db6d1..864c81fd6 100644
--- a/frontend/src/pages/MailExchangeView.vue
+++ b/frontend/src/pages/MailExchangeView.vue
@@ -53,7 +53,8 @@ import { useRouter } from 'vue-router'
 import { Download } from 'lucide-vue-next'
 import { Badge, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
 
-import { formatBytes, getTheme } from '@/utils'
+import { getTheme } from '@/utils'
+import { formatBytes } from '@/utils/format'
 import CopyCode from '@/components/CopyCode.vue'
 
 const { id } = defineProps<{ id: string }>()
diff --git a/frontend/src/pages/MailboxView.vue b/frontend/src/pages/MailboxView.vue
index c2d4ff887..65759037a 100644
--- a/frontend/src/pages/MailboxView.vue
+++ b/frontend/src/pages/MailboxView.vue
@@ -307,15 +307,9 @@ import {
 	toast,
 } from 'frappe-ui'
 
-import {
-	getFormattedDate,
-	isMac,
-	raisePromiseToast,
-	raiseToast,
-	shouldIgnoreKeypress,
-	startResizing,
-} from '@/utils'
+import { isMac, raisePromiseToast, raiseToast, shouldIgnoreKeypress, startResizing } from '@/utils'
 import { useLayout, useScreenSize, useSidebar, useUndo } from '@/utils/composables'
+import { getFormattedDate } from '@/utils/format'
 import { type MailboxRole, userStore } from '@/stores/user'
 import HeaderActions from '@/components/HeaderActions.vue'
 import NoMails from '@/components/Icons/NoMails.vue'
diff --git a/frontend/src/pages/calendar/CalendarView.vue b/frontend/src/pages/calendar/CalendarView.vue
new file mode 100644
index 000000000..7e64468dc
--- /dev/null
+++ b/frontend/src/pages/calendar/CalendarView.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Calendar, createResource } from 'frappe-ui'
+
+import { raiseToast } from '@/utils'
+import { userStore } from '@/stores/user'
+import CalendarSidebar from '@/components/CalendarSidebar.vue'
+import EventPopoverContent from '@/components/EventPopoverContent.vue'
+import EventModal from '@/components/Modals/EventModal.vue'
+
+const dayjs = inject('$dayjs')
+
+const { identities } = userStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const calendar = useTemplateRef('calendar')
+
+watch(
+	() => [calendar.value?.currentYear, calendar.value?.currentMonth],
+	() => events.reload(),
+)
+
+watch(
+	() => calendar.value?.activeView,
+	(view) => router.replace({ query: { ...route.query, view } }),
+)
+
+onMounted(() => {
+	if (route.query.view) calendar.value.activeView = route.query.view.toString()
+})
+
+const transformEvent = (event) => {
+	const start = dayjs(event.start)
+	const durationMatch = /PT(?:(\d+)H)?(?:(\d+)M)?/.exec(event.duration || '')
+	const hours = durationMatch && durationMatch[1] ? parseInt(durationMatch[1]) : 0
+	const minutes = durationMatch && durationMatch[2] ? parseInt(durationMatch[2]) : 0
+	const end = start.add(hours, 'hour').add(minutes, 'minute')
+	return {
+		...event,
+		fromDate: start.format('YYYY-MM-DD'),
+		toDate: end.format('YYYY-MM-DD'),
+		fromTime: start.format('HH:mm'),
+		toTime: end.format('HH:mm'),
+		participant: event.organizer,
+		venue: event.locations?.[0]?._name || '',
+		role: getEventRole(event),
+	}
+}
+
+const getEventRole = (event) => {
+	if (identities.data.some((id) => id.email === event.organizer.replace('mailto:', '')))
+		return 'Organizer'
+	if (
+		identities.data.some((id) =>
+			event.participants?.some((p) => p.email.replace('mailto:', '') === id.email),
+		)
+	)
+		return 'Attendee'
+	return 'Viewer'
+}
+
+const calendars = createResource({
+	url: 'mail.api.calendar.get_calendars',
+	auto: true,
+	onSuccess: (data) => (visibleCalendars.value = data.map((cal) => cal.name)),
+	onError: (error) => raiseToast(error.message, 'error'),
+})
+
+const visibleCalendars = ref<string[]>([])
+
+const events = createResource({
+	url: 'mail.api.calendar.get_calendar_events',
+	makeParams: () => {
+		const date = dayjs().year(calendar.value?.currentYear).month(calendar.value?.currentMonth)
+		return {
+			from_date: date.startOf('month').subtract(37, 'day').toDate(),
+			to_date: date.endOf('month').add(37, 'day').toDate(),
+			time_zone: dayjs.tz.guess(),
+		}
+	},
+	transform: (data) => data.map(transformEvent),
+	onError: (error) => raiseToast(error.message, 'error'),
+})
+
+const visibleEvents = computed(
+	() =>
+		events.data?.filter((event) =>
+			event.calendars
+				.map((c) => c.calendar)
+				.some((cal) => visibleCalendars.value.includes(cal)),
+		) || [],
+)
+
+const showEditEvent = ref(false)
+
+const event = reactive({})
+
+const handleOpenEvent = (e) => {
+	Object.assign(event, e)
+	showEditEvent.value = true
+}
+
+watch(
+	() => showEditEvent.value,
+	(val) => {
+		if (!val) Object.keys(event).forEach((key) => delete event[key])
+	},
+)
+</script>
+
+<template>
+	<div class="flex h-screen min-h-0 w-full min-w-0 flex-col">
+		<div class="flex min-h-0 min-w-0 flex-1">
+			<CalendarSidebar
+				:calendars="calendars?.data || []"
+				:visible-calendars
+				@update:visible-calendars="
+					(name) =>
+						visibleCalendars.includes(name)
+							? visibleCalendars.splice(visibleCalendars.indexOf(name), 1)
+							: visibleCalendars.push(name)
+				"
+			/>
+			<div class="min-h-0 min-w-0 flex-1 p-4">
+				<Calendar
+					ref="calendar"
+					:events="visibleEvents"
+					:config="{ isEditMode: true }"
+					:on-dbl-click="(event) => handleOpenEvent(event)"
+					:on-cell-click="(event) => handleOpenEvent(event)"
+				>
+					<template #event-popover-content="{ calendarEvent, close }">
+						<EventPopoverContent
+							:calendar-event
+							:close
+							@edit="handleOpenEvent({ calendarEvent })"
+							@reload-events="events.reload()"
+						/>
+					</template>
+				</Calendar>
+			</div>
+		</div>
+	</div>
+	<EventModal v-model="showEditEvent" :selected-event="event" @reload-events="events.reload()" />
+</template>
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index a288cbc37..23ffea318 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -158,6 +158,12 @@ const routes = [
 		props: true,
 		meta: { isDashboard: true },
 	},
+	{
+		path: '/calendar',
+		name: 'Calendar',
+		component: () => import('@/pages/calendar/CalendarView.vue'),
+		meta: { noLayout: true },
+	},
 ]
 
 const router = createRouter({ history: createWebHistory('/mail'), routes })
diff --git a/frontend/src/types/globals.d.ts b/frontend/src/types/globals.d.ts
index 050691231..2fda8de7e 100644
--- a/frontend/src/types/globals.d.ts
+++ b/frontend/src/types/globals.d.ts
@@ -1,6 +1,6 @@
 export {}
 
-type TranslateFunction = (message: string, variables?: string[]) => string
+type TranslateFunction = (message: string, variables?: (string | number)[]) => string
 declare global {
 	const __: TranslateFunction
 }
diff --git a/frontend/src/utils/format.ts b/frontend/src/utils/format.ts
new file mode 100644
index 000000000..5503d5db0
--- /dev/null
+++ b/frontend/src/utils/format.ts
@@ -0,0 +1,114 @@
+import { isEmail } from '@/utils'
+import dayjs from '@/utils/dayjs'
+
+const DAYS_MAP: Record<string, string> = {
+	su: 'Sunday',
+	mo: 'Monday',
+	tu: 'Tuesday',
+	we: 'Wednesday',
+	th: 'Thursday',
+	fr: 'Friday',
+	sa: 'Saturday',
+}
+
+const getByDayMessage = (byDay?: { day: string; nthOfPeriod?: number }[]) => {
+	if (!byDay?.length) return ''
+	const [first] = byDay
+
+	if (first.nthOfPeriod === -1) return __(' on the last {0}', [DAYS_MAP[first.day]])
+
+	if (first.nthOfPeriod != null)
+		return __(' on the {0} {1}', [getNthLabel(first.nthOfPeriod), DAYS_MAP[first.day]])
+
+	return __(' on {0}', [byDay.map((d) => DAYS_MAP[d.day]).join(', ')])
+}
+
+const getByMonthDayMessage = (byMonthDay?: number[]) => {
+	if (!byMonthDay?.length) return ''
+	const [day] = byMonthDay
+	if (day === -1) return __(' on the last day')
+	return __(' on the {0}', [getNthLabel(day)])
+}
+
+const getNthLabel = (n: number): string => {
+	const suffixes: Record<number, string> = { 1: 'st', 2: 'nd', 3: 'rd' }
+	const suffix = suffixes[n] ?? 'th'
+	return `${n}${suffix}`
+}
+
+export const toTitleCase = (str: string) =>
+	str
+		?.toLowerCase()
+		.split(' ')
+		.map(function (word: string) {
+			return word.charAt(0).toUpperCase().concat(word.substr(1))
+		})
+		.join(' ') || ''
+
+export const getFormattedDate = (date: Date | string, omitDate = false) => {
+	const dateObj = dayjs(date)
+	const isCurrentYear = dateObj.year() === dayjs().year()
+	if (omitDate) return dateObj.format(isCurrentYear ? 'MMMM' : 'MMMM YYYY')
+	if (dateObj.isToday()) return __('Today')
+	if (dateObj.isYesterday()) return __('Yesterday')
+	return dateObj.format(isCurrentYear ? 'D MMMM' : 'D MMMM YYYY')
+}
+
+export const formatBytes = (bytes: number) => {
+	if (!+bytes) return '0 Bytes'
+
+	const k = 1024
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
+}
+
+export const extractNameFromEmail = (email: string) =>
+	isEmail(email)
+		? email
+				.split('@')[0]
+				.replace(/[._-]/g, ' ')
+				.replace(/\b\w/g, (c) => c.toUpperCase())
+		: email
+
+export const getRepeatFrequencyOptions = (interval: number) => [
+	{ label: interval === 1 ? __('Year') : __('Years'), value: 'yearly' },
+	{ label: interval === 1 ? __('Month') : __('Months'), value: 'monthly' },
+	{ label: interval === 1 ? __('Week') : __('Weeks'), value: 'weekly' },
+	{ label: interval === 1 ? __('Day') : __('Days'), value: 'daily' },
+]
+
+export const getRepeatMessage = (recurrenceRule: RecurrenceRule) => {
+	const interval = recurrenceRule.interval || 1
+	const message = __('Every {0} {1}', [
+		interval === 1 ? '' : interval,
+		getRepeatFrequencyOptions(interval)
+			.find((option) => option.value === recurrenceRule.frequency)!
+			.label.toLowerCase(),
+	])
+
+	const suffix =
+		getByDayMessage(recurrenceRule.byDay) || getByMonthDayMessage(recurrenceRule.byMonthDay)
+
+	const fullMessage = `${message}${suffix}`
+
+	if (recurrenceRule?.until)
+		return __('{0} until {1}', [
+			fullMessage,
+			dayjs(recurrenceRule.until).format('MMM DD, YYYY'),
+		])
+	if (recurrenceRule?.count) return __('{0}, {1} times', [fullMessage, recurrenceRule.count])
+
+	return fullMessage
+}
+
+interface RecurrenceRule {
+	frequency: 'daily' | 'weekly' | 'monthly' | 'yearly'
+	interval: number
+	byDay?: { day: string; nthOfPeriod?: number }[]
+	byMonthDay?: number[]
+	until?: string
+	count?: number
+}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index e64deea58..0b8bbd20e 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -2,7 +2,6 @@ import * as cheerio from 'cheerio'
 import { File, Paperclip } from 'lucide-vue-next'
 import { toast } from 'frappe-ui'
 
-import dayjs from '@/utils/dayjs'
 import AudioIcon from '@/components/Icons/AudioIcon.vue'
 import ImageIcon from '@/components/Icons/ImageIcon.vue'
 import PDFIcon from '@/components/Icons/PDFIcon.vue'
@@ -10,15 +9,6 @@ import VideoIcon from '@/components/Icons/VideoIcon.vue'
 
 import type { ComposeMailData, Recipient } from '@/types'
 
-export const toTitleCase = (str: string) =>
-	str
-		?.toLowerCase()
-		.split(' ')
-		.map(function (word: string) {
-			return word.charAt(0).toUpperCase().concat(word.substr(1))
-		})
-		.join(' ') || ''
-
 export function startResizing(event) {
 	const startX = event.clientX
 	const sidebar = document.getElementsByClassName('mailSidebar')[0]
@@ -42,36 +32,12 @@ export function startResizing(event) {
 	document.addEventListener('mouseup', onMouseUp)
 }
 
-export const singularize = (word: string) => {
-	const endings = {
-		ves: 'fe',
-		ies: 'y',
-		i: 'us',
-		zes: 'ze',
-		ses: 's',
-		es: 'e',
-		s: '',
-	}
-	return word.replace(new RegExp(`(${Object.keys(endings).join('|')})$`), (r) => endings[r])
-}
-
 export const validateEmail = (email: string) => {
 	const regExp =
 		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 	return regExp.test(email)
 }
 
-export const formatBytes = (bytes: number) => {
-	if (!+bytes) return '0 Bytes'
-
-	const k = 1024
-	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
-}
-
 export const raiseToast = (message: string, type = 'success') => {
 	if (type === 'success') return toast.success(message)
 
@@ -104,12 +70,6 @@ export const raisePromiseToast = (
 	toast.promise(action(), { loading, success, error })
 }
 
-export const kebabToTitleCase = (str: string) =>
-	str
-		.split('-')
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(' ')
-
 export const copyToClipBoard = async (text: string) => {
 	try {
 		await navigator.clipboard.writeText(text)
@@ -160,15 +120,6 @@ export const getFormattedRecipients = (mailRecipients: Recipient[]) => {
 	return formattedRecipients
 }
 
-export const getFormattedDate = (date: Date | string, omitDate = false) => {
-	const dateObj = dayjs(date)
-	const isCurrentYear = dateObj.year() === dayjs().year()
-	if (omitDate) return dateObj.format(isCurrentYear ? 'MMMM' : 'MMMM YYYY')
-	if (dateObj.isToday()) return __('Today')
-	if (dateObj.isYesterday()) return __('Yesterday')
-	return dateObj.format(isCurrentYear ? 'D MMMM' : 'D MMMM YYYY')
-}
-
 export const getFirstAlphabet = (str?: string) => str?.match(/\p{L}/u)?.[0]
 
 export const getTheme = (
@@ -313,9 +264,30 @@ export const processInlineImages = (mail: ComposeMailData) => {
 
 	return { html_body: $.html(), attachments: processedAttachments }
 }
+export const isUrl = (str: string) => {
+	if (typeof str !== 'string' || !str.trim()) return false
+	str = str.trim()
+	try {
+		const url = new URL(/^https?:\/\//i.test(str) ? str : 'https://' + str)
+		if (url.protocol !== 'http:' && url.protocol !== 'https:') return false
+		const parts = url.hostname.split('.')
+		return parts.length >= 2 && parts.every((p) => p.length > 0)
+	} catch {
+		return false
+	}
+}
+
+export const getReorderedParticipants = (
+	participants,
+	organizerEmail,
+	originalParticipants?: any[],
+) => {
+	const original = new Set(originalParticipants?.map((p) => p.email) || [])
 
-export const extractNameFromEmail = (email: string) =>
-	email
-		.split('@')[0]
-		.replace(/[._-]/g, ' ')
-		.replace(/\b\w/g, (c) => c.toUpperCase())
+	const organizer = participants.find((p) => p.email === organizerEmail)
+	const rest = participants
+		.filter((p) => p.email !== organizerEmail)
+		.map((p) => ({ ...p, isOrganizer: false, isNew: !original.has(p.email) }))
+
+	return organizer ? [{ ...organizer, isOrganizer: true }, ...rest] : rest
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 9e170b0d3..f908ca8cc 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -99,6 +99,7 @@ export default defineConfig(({ mode }) => ({
 		}),
 	],
 	resolve: {
+		dedupe: ['vue'],
 		alias: [
 			{ find: '@', replacement: path.resolve(__dirname, 'src') },
 			...(loadEnv(mode, process.cwd(), '').LOCAL_FRAPPE_UI === 'true'
diff --git a/mail/api/calendar.py b/mail/api/calendar.py
new file mode 100644
index 000000000..c645c273e
--- /dev/null
+++ b/mail/api/calendar.py
@@ -0,0 +1,94 @@
+import json
+
+import frappe
+from frappe import _
+
+from mail.client.doctype.calendar.calendar import fetch_calendars
+from mail.client.doctype.calendar_event.calendar_event import (
+	fetch_calendar_events,
+	get_master_events_by_uids,
+	update_calendar_event,
+)
+from mail.client.doctype.calendar_event.calendar_event import (
+	get_calendar_events as get_calendar_events_by_ids,
+)
+
+
+@frappe.whitelist()
+def get_calendars() -> list[dict[str, str]]:
+	"""Returns a list of the current user's calendars."""
+
+	calendars = fetch_calendars(frappe.session.user)
+
+	return [{key: cal[key] for key in ["name", "_name"]} for cal in calendars]
+
+
+@frappe.whitelist()
+def get_calendar_events(from_date: str, to_date: str, time_zone: str) -> list[dict]:
+	"""Fetches calendar events between from_date and to_date for the current user."""
+
+	user = frappe.session.user
+	events = fetch_calendar_events(
+		user,
+		{"after": from_date, "before": to_date},
+		limit=999,
+		time_zone=time_zone,
+		expand_recurrences=True,
+	)[0]
+
+	uids = {event["uid"] for event in events}
+	masters = get_master_events_by_uids(user, list(uids))
+	master_map = {
+		uid: {
+			"recurrence_rule": json.loads(master["recurrence_rule"]),
+			"master_id": master["id"],
+			"master_start": master["start"],
+			"master_duration": master["duration"],
+		}
+		for uid, master in masters.items()
+	}
+
+	for event in events:
+		event.update(master_map.get(event["uid"], {}))
+
+	return events
+
+
+@frappe.whitelist()
+def edit_calendar_event(id: str, **kwargs) -> None:
+	user = frappe.session.user
+	event = get_calendar_events_by_ids(user, [id])[0]
+
+	def resolve(key):
+		return kwargs[key] if key in kwargs else event[key]
+
+	calendar_ids = (
+		kwargs["calendar_ids"]
+		if "calendar_ids" in kwargs
+		else [calendar["calendar_id"] for calendar in event["calendars"]]
+	)
+
+	update_calendar_event(
+		user,
+		id,
+		event["uid"],
+		event["organizer"],
+		calendar_ids,
+		resolve("status"),
+		resolve("draft"),
+		resolve("title"),
+		resolve("start"),
+		resolve("duration"),
+		resolve("time_zone"),
+		json.loads(resolve("recurrence_rule")),
+		resolve("show_without_time"),
+		resolve("privacy"),
+		resolve("free_busy_status"),
+		resolve("description"),
+		resolve("locations"),
+		resolve("links"),
+		resolve("participants"),
+		resolve("alerts"),
+		resolve("use_default_alerts"),
+		kwargs.get("send_scheduling_messages", False),
+	)
diff --git a/mail/api/contacts.py b/mail/api/contacts.py
index ef2b26186..5c326f8dc 100644
--- a/mail/api/contacts.py
+++ b/mail/api/contacts.py
@@ -1,5 +1,6 @@
 import frappe
 
+from mail.api.mail import get_user_images
 from mail.client.doctype.address_book.address_book import fetch_address_books
 from mail.client.doctype.contact_card.contact_card import fetch_contact_cards
 
@@ -41,6 +42,12 @@ def get_contacts(filter: dict | None = None, limit: int = 50) -> list[dict]:
 			for email in emails:
 				contacts.append({"full_name": card.get("full_name"), "email": email.get("address")})
 
+	images = get_user_images([c.get("email") for c in contacts])
+
+	for contact in contacts:
+		email = contact.get("email")
+		contact["user_image"] = images.get(email) if email else None
+
 	return contacts
 
 
diff --git a/mail/api/mail.py b/mail/api/mail.py
index 3653331de..c0e8ac77b 100644
--- a/mail/api/mail.py
+++ b/mail/api/mail.py
@@ -50,6 +50,17 @@ def get_user_mailboxes(user) -> list[dict]:
 	return frappe.get_all("Mailbox", filters={"user": user})
 
 
+def get_user_images(emails: list[str]) -> dict[str, str]:
+	"""Returns a mapping of user emails to their avatar URLs."""
+
+	user_image_map = {}
+	if emails:
+		user_data = frappe.get_all("User", filters={"name": ["in", emails]}, fields=["name", "user_image"])
+		user_image_map = {u.name: u.user_image for u in user_data if u.user_image}
+
+	return {email: user_image_map.get(email) or get_avatar_url(email) for email in emails}
+
+
 def get_avatar_url(email: str) -> str:
 	"""Returns the avatar URL for the given email."""
 
@@ -89,18 +100,9 @@ def add_user_images_to_emails(mails: list[dict], is_thread: bool = False) -> lis
 
 		email_map[name] = selected_email
 
-	unique_emails = {e for e in email_map.values() if e}
-
-	user_image_map = {}
-	if unique_emails:
-		user_data = frappe.db.get_all(
-			"User",
-			filters={"name": ["in", list(unique_emails)]},
-			fields=["name", "user_image"],
-		)
-		user_image_map = {u.name: u.user_image for u in user_data if u.user_image}
+	unique_emails = list({e for e in email_map.values() if e})
 
-	images = {email: user_image_map.get(email) or get_avatar_url(email) for email in unique_emails}
+	images = get_user_images(unique_emails)
 
 	for mail in mails:
 		email = email_map.get(mail["name"])