diff --git a/src/assets/locales/cs.json b/src/assets/locales/cs.json
index 14ef011..896ebe5 100644
--- a/src/assets/locales/cs.json
+++ b/src/assets/locales/cs.json
@@ -23,6 +23,7 @@
     "from": "Od",
     "to": "Do",
     "entireDay": "Celý den",
+    "more": "další…",
     "repeat": {
       "repeat": "Opakování",
       "end": "Konec",
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 9d6270a..482e2b9 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -23,6 +23,7 @@
     "from": "From",
     "to": "To",
     "entireDay": "Entire day",
+    "more": "more…",
     "repeat": {
       "repeat": "Repeat",
       "end": "End",
diff --git a/src/assets/locales/git.json b/src/assets/locales/git.json
index 9cfbe2f..937b817 100644
--- a/src/assets/locales/git.json
+++ b/src/assets/locales/git.json
@@ -3,7 +3,8 @@
     "new": "New Commit",
     "title": "Message",
     "description": "Message \\n",
-    "location": "Origin"
+    "location": "Origin",
+    "more": "more…"
   },
   "saveBtn": "Commit",
   "createBtn": "Init / Clone",
diff --git a/src/components/AllDayBar.vue b/src/components/AllDayBar.vue
index 21168e4..1cb39ea 100644
--- a/src/components/AllDayBar.vue
+++ b/src/components/AllDayBar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useEventModal } from '@/composables/modals/useEventModal';
 import type { CalendarEvent } from '@/types/core';
-import { getAllDayEndDate, getCurrentViewDatetime, isWholeDay } from '@/utils';
+import { getCurrentViewDatetime } from '@/utils';
+import { getVisibleDayRange, layoutEventsByDay } from '@/utils/allDayEventLayout';
 import { DateTime } from 'luxon';
 import { computed, useTemplateRef } from 'vue';
 import { useRoute } from 'vue-router';
@@ -36,23 +37,6 @@ const todayGridColumn = computed(() => {
   return '';
 });
 
-function visibleRange(event: CalendarEvent) {
-  const end = isWholeDay(event) ? getAllDayEndDate(event) : event.to;
-  const startIndex = event.from.startOf('day').diff(currentDate.value, 'days').days;
-  const endIndex = end.startOf('day').diff(currentDate.value, 'days').days;
-
-  if (endIndex < 0 || startIndex >= props.numOfDays) return null;
-
-  const firstDay = Math.max(0, startIndex);
-  const lastDay = Math.min(props.numOfDays - 1, endIndex);
-
-  return {
-    startIndex: firstDay,
-    endIndex: lastDay,
-    span: Math.max(1, lastDay - firstDay + 1),
-  };
-}
-
 function gridStyle(startIndex: number, span: number, row: number) {
   return {
     gridColumn: `${startIndex + 1} / span ${span}`,
@@ -69,42 +53,18 @@ function startCreate(event: PointerEvent) {
   props.drag.startCreateAllDay(event, element);
 }
 
-const laidOutEvents = computed(() => {
-  const visibleEvents = props.events.flatMap((event) => {
-    const range = visibleRange(event);
-    return range ? [{ event, ...range }] : [];
-  });
-
-  visibleEvents.sort((a, b) => (a.startIndex !== b.startIndex ? a.startIndex - b.startIndex : b.span - a.span));
-
-  const rowEnds: number[] = [];
-  return visibleEvents.map((item) => {
-    let rowIndex = rowEnds.findIndex((endIndex) => endIndex < item.startIndex);
-
-    if (rowIndex === -1) {
-      rowIndex = rowEnds.length;
-      rowEnds.push(item.endIndex);
-    } else {
-      rowEnds[rowIndex] = item.endIndex;
-    }
-
-    const row = rowIndex + 1;
-
-    return {
-      event: item.event,
-      startIndex: item.startIndex,
-      endIndex: item.endIndex,
-      row,
-      gridStyle: gridStyle(item.startIndex, item.span, row),
-    };
-  });
-});
+const laidOutEvents = computed(() =>
+  layoutEventsByDay(props.events, currentDate.value, props.numOfDays).map((item) => ({
+    ...item,
+    gridStyle: gridStyle(item.startIndex, item.span, item.row),
+  })),
+);
 
 const previewEvent = computed(() => {
   const event = props.drag.active.value;
   if (props.drag.mode.value !== 'create-all-day' || !event) return null;
 
-  const range = visibleRange(event);
+  const range = getVisibleDayRange(event, currentDate.value, props.numOfDays);
   if (!range) return null;
 
   const occupiedRows = new Set(
diff --git a/src/components/MonthSideMap.vue b/src/components/MonthSideMap.vue
index 31c108d..0d3d744 100644
--- a/src/components/MonthSideMap.vue
+++ b/src/components/MonthSideMap.vue
@@ -12,6 +12,7 @@ const { monthNameLong } = useTranslation();
 const route = useRoute();
 
 const currentDatetime = ref<DateTime>(DateTime.now());
+const isMonthView = computed(() => route.params.view === 'm');
 const monthTracker = ref(currentDatetime.value.month);
 const yearTracker = ref(currentDatetime.value.year);
 
@@ -60,6 +61,12 @@ watch(
     const viewStart = getCurrentViewDatetime(route.params);
     currentDatetime.value = viewStart;
 
+    if (isMonthView.value) {
+      monthTracker.value = viewStart.month;
+      yearTracker.value = viewStart.year;
+      return;
+    }
+
     const viewEnd = viewStart.plus({
       days: getViewLengthInDays(route.params),
     });
@@ -102,6 +109,11 @@ function changeMonthNum(up: boolean) {
 function jumpToInterval(clickedDay: DateTime) {
   if (route.params.view === 'w') {
     router.replace(getWeekAlignedRedirect(clickedDay));
+  } else if (isMonthView.value) {
+    router.replace({
+      name: 'calendar',
+      params: { view: 'm', year: clickedDay.year, month: clickedDay.month, day: clickedDay.day },
+    });
   } else {
     router.replace({ params: { year: clickedDay.year, month: clickedDay.month, day: clickedDay.day } });
   }
@@ -131,11 +143,15 @@ function getIntervalFromDay(day: DateTime) {
 const hoverInterval = computed(() => {
   if (!hoveredDay.value) return null;
 
+  if (isMonthView.value) {
+    return { start: hoveredDay.value, end: hoveredDay.value };
+  }
+
   return getIntervalFromDay(hoveredDay.value);
 });
 
 const pressedInterval = computed(() => {
-  if (!pressedDay.value) return null;
+  if (isMonthView.value || !pressedDay.value) return null;
 
   return getIntervalFromDay(pressedDay.value);
 });
@@ -172,10 +188,11 @@ const pressedInterval = computed(() => {
         class="day"
         :class="{
           today: d.hasSame(DateTime.now(), 'day'),
+          'selected-day': isMonthView && d.hasSame(currentDatetime, 'day'),
           'not-this-month': d.month !== monthTracker,
-          'in-range': d >= viewInterval.start && d <= viewInterval.end,
-          'range-start': d.hasSame(viewInterval.start, 'day'),
-          'range-end': d.hasSame(viewInterval.end, 'day'),
+          'in-range': !isMonthView && d >= viewInterval.start && d <= viewInterval.end,
+          'range-start': !isMonthView && d.hasSame(viewInterval.start, 'day'),
+          'range-end': !isMonthView && d.hasSame(viewInterval.end, 'day'),
           'pressed-range': pressedInterval && d >= pressedInterval.start && d <= pressedInterval.end,
         }"
         @click="jumpToInterval(d)"
@@ -270,7 +287,7 @@ const pressedInterval = computed(() => {
     text-decoration-thickness: 0.15rem;
     text-underline-offset: 0.2rem;*/
 
-    &:not(.in-range) {
+    &:not(.in-range):not(.selected-day) {
       color: var(--git-color);
     }
 
@@ -306,6 +323,16 @@ const pressedInterval = computed(() => {
     }
   }
 
+  &.today.not-this-month:not(.selected-day) {
+    color: color-mix(in srgb, var(--git-color) 45%, transparent);
+  }
+
+  &.selected-day {
+    border-radius: var(--small-border-radius);
+    background-color: var(--git-bg-color);
+    color: var(--text-color-hard);
+  }
+
   &.range-start {
     border-top-left-radius: var(--small-border-radius);
     border-bottom-left-radius: var(--small-border-radius);
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 8e26aa4..e7a010d 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import { DateTime } from 'luxon';
 import { getCurrentViewDatetime, getWeekAlignedRedirect, moveView } from '@/utils';
 
 import { FiChevronLeft, FiChevronRight } from 'vue-icons-plus/fi';
@@ -28,19 +29,33 @@ watch(
   { immediate: true },
 );
 watch(view, (newView) => {
+  const current = getCurrentViewDatetime(router.currentRoute.value.params);
+
   if (newView === 'w') {
-    // week view should be aligned
-    const current = getCurrentViewDatetime(router.currentRoute.value.params);
     router.push(getWeekAlignedRedirect(current));
+  } else if (newView === 'm') {
+    router.push({
+      name: 'calendar',
+      params: { view: 'm', year: current.year, month: current.month, day: current.day },
+    });
   } else {
     router.push({
       name: 'calendar',
-      params: { ...router.currentRoute.value.params, view: newView },
+      params: { view: newView, year: current.year, month: current.month, day: current.day },
     });
   }
 });
 
 function jumpToToday() {
+  if (view.value === 'm') {
+    const today = DateTime.now();
+    router.push({
+      name: 'calendar',
+      params: { view: 'm', year: today.year, month: today.month, day: today.day },
+    });
+    return;
+  }
+
   router.push({ name: 'calendar', params: { view: view.value } });
 }
 </script>
@@ -51,12 +66,10 @@ function jumpToToday() {
     <NewEventBtn v-if="!sidebar.isOpen.value" :large="!isMobile" />
 
     <SyncStatus />
-    <!-- TODO: remove disabled -->
     <MultiToggle
       v-model="view"
       :options="CALENDAR_VIEWS"
       :labels="CALENDAR_VIEWS.map((view) => $t(`views.${view}.${isMobile ? 'short' : 'long'}`))"
-      :disabled="['m']"
       name="view-selector"
     />
 
diff --git a/src/components/monthview/MonthEvent.vue b/src/components/monthview/MonthEvent.vue
new file mode 100644
index 0000000..78af4a6
--- /dev/null
+++ b/src/components/monthview/MonthEvent.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import BaseEvent from '@/components/timeline/BaseEvent.vue';
+import { getTag } from '@/services/calendarCache';
+import type { CalendarEvent } from '@/types/core';
+import { isWholeDay, timeRangeFormat } from '@/utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  event: CalendarEvent;
+  compact: boolean;
+  interactive: boolean;
+  temporary: boolean;
+}>();
+
+const attrs = useAttrs();
+const showTime = computed(() => !isWholeDay(props.event));
+const color = computed(() => getTag(props.event.calendar, props.event.tagId ?? '')?.color);
+</script>
+
+<template>
+  <BaseEvent
+    v-bind="attrs"
+    variant="month"
+    :title="event.title"
+    :subtitle="showTime ? timeRangeFormat(event.from, event.to) : ''"
+    :color="color"
+    :temporary="temporary"
+    :interactive="interactive"
+    :compact="compact"
+    :without-time="!showTime"
+    :show-subtitle="showTime"
+  />
+</template>
diff --git a/src/components/monthview/MonthView.vue b/src/components/monthview/MonthView.vue
new file mode 100644
index 0000000..1236e3d
--- /dev/null
+++ b/src/components/monthview/MonthView.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+import { useWindowSize } from '@vueuse/core';
+
+import MonthWeek from '@/components/monthview/MonthWeek.vue';
+import { useTranslation } from '@/composables/useTranslation';
+import { eventsRevision } from '@/composables/useEventsRefresh';
+import { useCalendarDrag } from '@/composables/useCalendarDrag';
+import { useCalendarFilters } from '@/services/calendarFilters';
+import { settings } from '@/services/settings';
+import type { CalendarEvent } from '@/types/core';
+import { getCurrentViewDatetime, getStartOfWeek } from '@/utils';
+import { CalendarCore } from '@/wasm/core-wrapper';
+
+const route = useRoute();
+const { width } = useWindowSize();
+const { dayNameShort, dayNameSuperShort } = useTranslation();
+const { filter } = useCalendarFilters();
+
+const isMobile = computed(() => width.value < 500);
+
+const monthStart = computed(() => getCurrentViewDatetime(route.params).startOf('month'));
+const gridStart = computed(() => getStartOfWeek(monthStart.value));
+const days = computed(() => Array.from({ length: 42 }, (_, index) => gridStart.value.plus({ days: index })));
+const events = ref<CalendarEvent[]>([]);
+const daysGridRef = useTemplateRef<HTMLElement>('days-grid-ref');
+
+const drag = useCalendarDrag(updateData);
+const weeks = computed(() => Array.from({ length: 6 }, (_, index) => days.value.slice(index * 7, index * 7 + 7)));
+const displayedEvents = computed(() => {
+  const activeEvent = drag.active.value;
+  const showMovedEvent = drag.mode.value === 'move' && drag.moved.value;
+  if (!activeEvent || !showMovedEvent) return events.value;
+
+  return [...events.value.filter((event) => !drag.isSourceEvent(event)), activeEvent];
+});
+
+let latestRequest = 0;
+
+async function updateData() {
+  const request = ++latestRequest;
+  const result = await CalendarCore.getEvents(gridStart.value, gridStart.value.plus({ days: 42 }), filter.value);
+
+  if (request === latestRequest) events.value = result;
+}
+
+function startCreate(event: PointerEvent) {
+  const grid = daysGridRef.value;
+  if (!grid || (event.target instanceof Element && event.target.closest('.month-event'))) return;
+
+  drag.startCreateAllDay(event, grid, 7);
+}
+
+function startMove(calendarEvent: CalendarEvent, event: PointerEvent) {
+  const grid = daysGridRef.value;
+  if (grid) drag.startMoveAllDay(event, calendarEvent, grid, 7);
+}
+
+watch([gridStart, eventsRevision, filter, () => settings.value.weekStart], () => void updateData(), {
+  immediate: true,
+});
+
+watchEffect(() => {
+  drag.registerGrid(daysGridRef.value, days.value, 0, 24);
+});
+</script>
+
+<template>
+  <div id="month-view">
+    <div class="month-grid">
+      <div class="day-names">
+        <span v-for="day in days.slice(0, 7)" :key="day.weekday" class="day-name">
+          {{ isMobile ? dayNameSuperShort(day) : dayNameShort(day) }}
+        </span>
+      </div>
+
+      <div ref="days-grid-ref" class="days-grid" @pointerdown="startCreate">
+        <MonthWeek
+          v-for="week in weeks"
+          :key="week[0]?.toMillis() ?? 0"
+          :days="week"
+          :events="displayedEvents"
+          :current-month="monthStart.month"
+          :drag="drag"
+          @move-start="startMove"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#month-view {
+  grid-area: content;
+  min-width: 0;
+  min-height: 0;
+  margin: 1rem;
+  overflow: auto;
+}
+
+.month-grid {
+  min-width: 42rem;
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: 1.5rem minmax(36rem, 1fr);
+}
+
+.day-names {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.day-name {
+  min-width: 0;
+  padding: 0 0.3rem;
+  line-height: 1.5rem;
+  user-select: none;
+}
+
+.days-grid {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: repeat(6, minmax(6rem, 1fr));
+  border-top: var(--grid-border);
+  border-left: var(--grid-border);
+  touch-action: none;
+}
+
+@media (max-width: 768px) {
+  #month-view {
+    margin: 0.3rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .month-grid {
+    min-width: 0;
+    grid-template-rows: 1.5rem minmax(27rem, 1fr);
+  }
+
+  .days-grid {
+    grid-template-rows: repeat(6, minmax(4.5rem, 1fr));
+  }
+
+  .day-name {
+    padding: 0 0.15rem;
+  }
+}
+</style>
diff --git a/src/components/monthview/MonthWeek.vue b/src/components/monthview/MonthWeek.vue
new file mode 100644
index 0000000..4cd6c37
--- /dev/null
+++ b/src/components/monthview/MonthWeek.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { computed, type CSSProperties, useTemplateRef } from 'vue';
+import { DateTime } from 'luxon';
+import { useElementSize } from '@vueuse/core';
+import { FiChevronDown } from 'vue-icons-plus/fi';
+import MonthEvent from '@/components/monthview/MonthEvent.vue';
+import { useEventModal } from '@/composables/modals/useEventModal';
+import type { CalendarDragController } from '@/composables/useCalendarDrag';
+import type { CalendarEvent } from '@/types/core';
+import { getWeekAlignedRedirect, isWholeDay } from '@/utils';
+import router from '@/router';
+import { getVisibleEventsByDay } from '@/utils/allDayEventLayout';
+
+const props = defineProps<{
+  days: DateTime[];
+  events: CalendarEvent[];
+  currentMonth: number;
+  drag: CalendarDragController;
+}>();
+
+const emit = defineEmits<{
+  moveStart: [event: CalendarEvent, pointerEvent: PointerEvent];
+}>();
+
+const eventModal = useEventModal();
+
+const COMPACT_EVENT_HEIGHT_REM = 1.4;
+const FULL_EVENT_HEIGHT_REM = 2.4;
+const EVENT_GAP_REM = 0.15;
+const EVENT_MARGIN_REM = 0.15;
+const MORE_INDICATOR_HEIGHT_REM = 1.2;
+
+const weekEventsRef = useTemplateRef<HTMLElement>('week-events-ref');
+const { height: weekEventsHeight } = useElementSize(weekEventsRef);
+
+const laidOutEvents = computed(() => {
+  const weekStart = props.days[0]?.startOf('day');
+  if (!weekStart) return [];
+
+  const visibleEvents = getVisibleEventsByDay(props.events, weekStart, 7);
+  const eventsPerDay = Array.from({ length: 7 }, () => 0);
+  const dayBottoms = Array.from({ length: 7 }, () => 0);
+
+  for (const item of visibleEvents) {
+    for (let day = item.startIndex; day <= item.endIndex; day++) eventsPerDay[day]++;
+  }
+
+  return visibleEvents.map((item) => {
+    const compact = eventsPerDay.slice(item.startIndex, item.endIndex + 1).some((count) => count > 2);
+    const height = compact || isWholeDay(item.event) ? COMPACT_EVENT_HEIGHT_REM : FULL_EVENT_HEIGHT_REM;
+    const top = Math.max(...dayBottoms.slice(item.startIndex, item.endIndex + 1));
+    const nextBottom = top + height + EVENT_GAP_REM;
+
+    for (let day = item.startIndex; day <= item.endIndex; day++) dayBottoms[day] = nextBottom;
+
+    const leftPercent = (item.startIndex / 7) * 100;
+    const widthPercent = (item.span / 7) * 100;
+    const style: CSSProperties = {
+      top: `${top}rem`,
+      left: `calc(${leftPercent}% + ${EVENT_MARGIN_REM}rem)`,
+      width: `calc(${widthPercent}% - ${EVENT_MARGIN_REM * 2}rem - 0.05rem)`,
+      height: `${height}rem`,
+    };
+
+    return { ...item, style, compact, bottom: top + height };
+  });
+});
+
+const visibleLayout = computed(() => {
+  const hiddenCounts = Array.from({ length: 7 }, () => 0);
+  const rootFontSize =
+    typeof document === 'undefined' ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  const availableHeight = weekEventsHeight.value / rootFontSize;
+
+  if (availableHeight <= 0) return { events: laidOutEvents.value, hiddenCounts };
+
+  const overflowingDays = Array.from({ length: 7 }, () => false);
+  for (const item of laidOutEvents.value) {
+    if (item.bottom <= availableHeight) continue;
+    for (let day = item.startIndex; day <= item.endIndex; day++) overflowingDays[day] = true;
+  }
+
+  if (!overflowingDays.some(Boolean)) return { events: laidOutEvents.value, hiddenCounts };
+
+  const eventBottomLimits = overflowingDays.map((overflows) =>
+    overflows ? Math.max(0, availableHeight - MORE_INDICATOR_HEIGHT_REM) : availableHeight,
+  );
+  const events = laidOutEvents.value.filter((item) => {
+    const bottomLimit = Math.min(...eventBottomLimits.slice(item.startIndex, item.endIndex + 1));
+    if (item.bottom <= bottomLimit) return true;
+
+    for (let day = item.startIndex; day <= item.endIndex; day++) hiddenCounts[day]++;
+    return false;
+  });
+
+  return { events, hiddenCounts };
+});
+
+function isSelected(day: DateTime) {
+  const activeEvent = props.drag.active.value;
+  if (props.drag.mode.value !== 'create-all-day' || !activeEvent) return false;
+
+  return activeEvent.from < day.plus({ days: 1 }).startOf('day') && activeEvent.to > day.startOf('day');
+}
+
+function openEvent(calendarEvent: CalendarEvent, event: MouseEvent) {
+  if (props.drag.consumeClick()) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+
+  eventModal.open(calendarEvent);
+}
+
+function startMove(calendarEvent: CalendarEvent, event: PointerEvent) {
+  if (calendarEvent === props.drag.active.value) return;
+  emit('moveStart', calendarEvent, event);
+}
+
+function openWeek(day: DateTime) {
+  router.push(getWeekAlignedRedirect(day));
+}
+</script>
+
+<template>
+  <section class="month-week">
+    <div
+      v-for="day in days"
+      :key="day.toISODate()!"
+      class="day-background"
+      :class="{
+        today: day.hasSame(DateTime.now(), 'day'),
+        'outside-month': day.month !== currentMonth,
+        selected: isSelected(day),
+      }"
+    >
+      <span class="day-number">{{ day.day }}</span>
+    </div>
+
+    <div ref="week-events-ref" class="week-events">
+      <MonthEvent
+        v-for="(item, index) in visibleLayout.events"
+        :key="item.event.id ?? `${item.event.from.toMillis()}-${item.event.title}-${index}`"
+        v-show="item.event === drag.active.value || !drag.isSourceEvent(item.event)"
+        :event="item.event"
+        :compact="item.compact"
+        :interactive="item.event !== drag.active.value && drag.canEdit(item.event)"
+        :temporary="item.event === drag.active.value"
+        :style="item.style"
+        @pointerdown.stop="startMove(item.event, $event)"
+        @click="openEvent(item.event, $event)"
+      />
+
+      <div
+        v-for="(count, dayIndex) in visibleLayout.hiddenCounts"
+        v-show="count > 0"
+        :key="dayIndex"
+        class="more-events"
+        :style="{ left: `${(dayIndex / 7) * 100}%`, width: `${100 / 7}%` }"
+      >
+        <span
+          class="more-events-content"
+          role="button"
+          tabindex="0"
+          @pointerdown.stop
+          @click.stop="openWeek(days[dayIndex]!)"
+          @keydown.enter.stop.prevent="openWeek(days[dayIndex]!)"
+          @keydown.space.stop.prevent="openWeek(days[dayIndex]!)"
+        >
+          <FiChevronDown aria-hidden="true" />
+          <span>{{ count }} {{ $t('event.more') }}</span>
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.month-week {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.day-background {
+  padding: 0.3rem;
+  border-right: var(--grid-border);
+  border-bottom: var(--grid-border);
+}
+
+.day-number {
+  position: absolute;
+  top: 0.3rem;
+  font-size: 0.8rem;
+  user-select: none;
+}
+
+.today .day-number {
+  color: var(--git-color);
+  font-weight: 700;
+}
+
+.outside-month .day-number {
+  opacity: 0.35;
+}
+
+.day-background.selected {
+  background-color: color-mix(in srgb, var(--git-color-real) 8%, transparent);
+}
+
+.week-events {
+  position: absolute;
+  inset: 1.6rem 0 0;
+  overflow: hidden;
+}
+
+.more-events {
+  position: absolute;
+  bottom: 0;
+  z-index: 2;
+  height: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--text-color);
+  font-size: 0.7rem;
+  pointer-events: none;
+  padding-bottom: 0.2rem;
+
+  .more-events-content {
+    position: relative;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+    pointer-events: auto;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 1px;
+      left: 0;
+      height: 1px;
+      background: currentColor;
+    }
+
+    svg {
+      width: 0.8rem;
+      height: 0.8rem;
+      flex: none;
+    }
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: var(--text-color-hard);
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .day-background {
+    padding: 0.15rem;
+  }
+
+  .week-events {
+    inset-block-start: 1.3rem;
+  }
+}
+</style>
diff --git a/src/components/timeline/BaseEvent.vue b/src/components/timeline/BaseEvent.vue
index f554921..197e825 100644
--- a/src/components/timeline/BaseEvent.vue
+++ b/src/components/timeline/BaseEvent.vue
@@ -4,19 +4,28 @@ import { computed } from 'vue';
 
 const props = withDefaults(
   defineProps<{
-    topStyle: string;
-    heightStyle: string;
+    topStyle?: string;
+    heightStyle?: string;
     title: string;
-    subtitle: string;
+    subtitle?: string;
     color?: string;
     temporary?: boolean;
     interactive?: boolean;
     resizable?: boolean;
+    variant?: 'timeline' | 'month';
+    compact?: boolean;
+    withoutTime?: boolean;
+    showSubtitle?: boolean;
   }>(),
   {
+    subtitle: '',
     temporary: false,
     interactive: false,
     resizable: false,
+    variant: 'timeline',
+    compact: false,
+    withoutTime: false,
+    showSubtitle: true,
   },
 );
 
@@ -29,8 +38,8 @@ const dynamicStyles = computed(() => {
   if (props.temporary) color = 'var(--event-color-git)';
 
   return {
-    top: `calc(${props.topStyle} + 1.5px)`,
-    height: `calc(${props.heightStyle} - 2px)`,
+    ...(props.topStyle !== undefined ? { top: `calc(${props.topStyle} + 1.5px)` } : {}),
+    ...(props.heightStyle !== undefined ? { height: `calc(${props.heightStyle} - 2px)` } : {}),
     '--event-color': color,
   };
 });
@@ -38,8 +47,15 @@ const dynamicStyles = computed(() => {
 
 <template>
   <div
-    class="timeline-event"
-    :class="{ temporary: props.temporary, interactive: props.interactive }"
+    class="base-event"
+    :class="{
+      'timeline-event': variant === 'timeline',
+      'month-event': variant === 'month',
+      temporary,
+      interactive,
+      compact,
+      'without-time': withoutTime,
+    }"
     :style="dynamicStyles"
   >
     <div
@@ -49,7 +65,7 @@ const dynamicStyles = computed(() => {
       @click.stop
     />
     <span class="title">{{ title }}</span>
-    <span class="subtitle">{{ subtitle }}</span>
+    <span v-if="showSubtitle" class="subtitle">{{ subtitle }}</span>
     <div
       v-if="resizable"
       class="resize-handle resize-handle-bottom"
@@ -60,7 +76,7 @@ const dynamicStyles = computed(() => {
 </template>
 
 <style scoped>
-.timeline-event {
+.base-event {
   position: absolute;
   left: 0;
   right: 0;
@@ -107,7 +123,7 @@ const dynamicStyles = computed(() => {
 }
 
 /* temporary event styling */
-.timeline-event.temporary {
+.base-event.temporary {
   /* dashed left border (basic dashed border was sus) */
   background-image: repeating-linear-gradient(
     to bottom,
@@ -124,7 +140,7 @@ const dynamicStyles = computed(() => {
 }
 
 /* hover only for non-temporary events */
-.timeline-event:not(.temporary):hover {
+.base-event:not(.temporary):hover {
   filter: brightness(1.15);
 }
 
@@ -137,4 +153,59 @@ const dynamicStyles = computed(() => {
   font-size: 0.7rem;
   opacity: 0.8;
 }
+
+.month-event {
+  right: auto;
+  height: 2.4rem;
+  min-height: 2.4rem;
+
+  .title,
+  .subtitle {
+    overflow: hidden;
+    line-height: 1rem;
+  }
+
+  &.without-time {
+    height: 1.4rem;
+    min-height: 1.4rem;
+    padding-block: 0.1rem;
+
+    &:not(.compact) {
+      justify-content: center;
+    }
+  }
+
+  &.compact {
+    height: 1.4rem;
+    min-height: 1.4rem;
+    padding-block: 0.1rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.3rem;
+
+    .title {
+      max-width: 100%;
+      flex: 0 0 auto;
+    }
+
+    .subtitle {
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .month-event {
+    padding-inline: 0.25rem;
+
+    &.compact {
+      gap: 0.15rem;
+
+      .subtitle {
+        display: none;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/composables/useCalendarDrag.ts b/src/composables/useCalendarDrag.ts
index faad10e..92b99cf 100644
--- a/src/composables/useCalendarDrag.ts
+++ b/src/composables/useCalendarDrag.ts
@@ -42,6 +42,9 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
   let resizeDate: DateTime | null = null;
   let createAnchor: DateTime | null = null;
   let allDayAnchorIndex = 0;
+  let allDayGridColumns = 1;
+  let moveByDay = false;
+  let moveGrabOffsetDays = 0;
   let suppressClickUntil = 0;
   let longPressTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -100,6 +103,19 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     return date.startOf('day').plus({ minutes: startHour * 60 + minutes });
   }
 
+  function allDayIndex(clientX: number, clientY: number) {
+    const rect = allDayGrid?.getBoundingClientRect();
+    if (!rect || rect.width <= 0 || rect.height <= 0 || dates.length === 0) return 0;
+
+    const columns = Math.max(1, Math.min(allDayGridColumns, dates.length));
+    const rows = Math.ceil(dates.length / columns);
+    const column = Math.floor((clientX - rect.left) / (rect.width / columns));
+    const row = Math.floor((clientY - rect.top) / (rect.height / rows));
+    const index = Math.max(0, row) * columns + Math.max(0, Math.min(column, columns - 1));
+
+    return Math.max(0, Math.min(index, dates.length - 1));
+  }
+
   function gridMinutesFor(date: DateTime, columnDate = date) {
     const gridStart = columnDate.startOf('day').plus({ minutes: startHour * 60 });
     return date.diff(gridStart, 'minutes').minutes;
@@ -222,20 +238,42 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     });
   }
 
-  function startCreateAllDay(event: PointerEvent, element: HTMLElement) {
+  function startCreateAllDay(event: PointerEvent, element: HTMLElement, columns = dates.length) {
     if (!isSupportedPointer(event) || hasPointerInteraction() || isActive() || dates.length === 0) return;
 
-    const rect = element.getBoundingClientRect();
-    const anchorIndex = snapDay(event.clientX, rect);
+    allDayGrid = element;
+    allDayGridColumns = columns;
+    const anchorIndex = allDayIndex(event.clientX, event.clientY);
     const date = dates[anchorIndex] ?? DateTime.now();
 
     startPointer(event, () => {
-      allDayGrid = element;
       allDayAnchorIndex = anchorIndex;
       mode.value = 'create-all-day';
       activeColumnDate.value = null;
       source.value = null;
-      active.value = blankEvent(date.startOf('day'), date.endOf('day'));
+      active.value = blankEvent(date.startOf('day'), date.plus({ days: 1 }).startOf('day'));
+    });
+  }
+
+  function startMoveAllDay(
+    event: PointerEvent,
+    calendarEvent: CalendarEvent,
+    element: HTMLElement,
+    columns = dates.length,
+  ) {
+    if (!isSupportedPointer(event) || hasPointerInteraction() || isActive() || !canEdit(calendarEvent)) return;
+
+    allDayGrid = element;
+    allDayGridColumns = columns;
+    const grabbedDate = dates[allDayIndex(event.clientX, event.clientY)] ?? calendarEvent.from;
+
+    startPointer(event, () => {
+      mode.value = 'move';
+      moveByDay = true;
+      moveGrabOffsetDays = Math.round(grabbedDate.startOf('day').diff(calendarEvent.from.startOf('day'), 'days').days);
+      source.value = calendarEvent;
+      active.value = { ...calendarEvent };
+      activeColumnDate.value = grabbedDate;
     });
   }
 
@@ -304,11 +342,25 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     active.value = blankEvent(from, to);
   }
 
-  function updateCreateAllDay(clientX: number) {
-    const rect = allDayGrid?.getBoundingClientRect();
-    if (!rect) return;
+  function updateMoveAllDay(clientX: number, clientY: number) {
+    const original = source.value;
+    const pointerDate = dates[allDayIndex(clientX, clientY)];
+    if (!original || !pointerDate) return;
+
+    const nextStartDay = pointerDate.minus({ days: moveGrabOffsetDays }).startOf('day');
+    const dayDelta = Math.round(nextStartDay.diff(original.from.startOf('day'), 'days').days);
+    activeColumnDate.value = pointerDate;
+    active.value = {
+      ...original,
+      from: original.from.plus({ days: dayDelta }),
+      to: original.to.plus({ days: dayDelta }),
+    };
+  }
+
+  function updateCreateAllDay(clientX: number, clientY: number) {
+    if (!allDayGrid) return;
 
-    const pointerIndex = snapDay(clientX, rect);
+    const pointerIndex = allDayIndex(clientX, clientY);
     const firstIndex = Math.min(allDayAnchorIndex, pointerIndex);
     const lastIndex = Math.max(allDayAnchorIndex, pointerIndex);
     const firstDate = dates[firstIndex];
@@ -344,7 +396,8 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
 
     switch (mode.value) {
       case 'move':
-        updateMove(event.clientX, event.clientY);
+        if (moveByDay) updateMoveAllDay(event.clientX, event.clientY);
+        else updateMove(event.clientX, event.clientY);
         break;
       case 'resize-top':
       case 'resize-bottom':
@@ -354,7 +407,7 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
         updateCreate(event.clientY);
         break;
       case 'create-all-day':
-        updateCreateAllDay(event.clientX);
+        updateCreateAllDay(event.clientX, event.clientY);
         break;
     }
   }
@@ -386,6 +439,9 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     moved.value = false;
     saving.value = false;
     allDayGrid = null;
+    allDayGridColumns = 1;
+    moveByDay = false;
+    moveGrabOffsetDays = 0;
     createAnchor = null;
     resizeDate = null;
   }
@@ -494,6 +550,7 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     startMove,
     startResize,
     startCreateAllDay,
+    startMoveAllDay,
     canEdit,
     isSourceEvent,
     consumeClick,
diff --git a/src/composables/useKeyboard.ts b/src/composables/useKeyboard.ts
index 64ab50c..de33063 100644
--- a/src/composables/useKeyboard.ts
+++ b/src/composables/useKeyboard.ts
@@ -66,11 +66,13 @@ export function useKeyboard() {
 
     // M -> switch to month view
     onKeyStroke('m', (e) => {
-      return; // TODO
       if (inputNeededElsewhere()) return;
       e.preventDefault();
+
+      const activeDate = getCurrentViewDatetime(router.currentRoute.value.params);
       router.replace({
-        params: { ...router.currentRoute.value.params, view: 'm' },
+        name: 'calendar',
+        params: { view: 'm', year: activeDate.year, month: activeDate.month, day: activeDate.day },
       });
     });
 
diff --git a/src/utils.ts b/src/utils.ts
index 612a5d9..c79614a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -40,7 +40,11 @@ export function moveView(back: boolean, router: Router) {
   switch (params.view) {
     case 'm':
       newDate = currentDatetime.plus({ month: sign });
-      break;
+      router.replace({
+        name: 'calendar',
+        params: { view: 'm', year: newDate.year, month: newDate.month, day: newDate.day },
+      });
+      return;
     case 'w':
       newDate = currentDatetime.plus({ days: 7 * sign });
       router.replace(getWeekAlignedRedirect(newDate));
diff --git a/src/utils/allDayEventLayout.ts b/src/utils/allDayEventLayout.ts
new file mode 100644
index 0000000..4b548d0
--- /dev/null
+++ b/src/utils/allDayEventLayout.ts
@@ -0,0 +1,81 @@
+import type { DateTime } from 'luxon';
+import type { CalendarEvent } from '@/types/core';
+
+export type VisibleDayRange = {
+  startIndex: number;
+  endIndex: number;
+  span: number;
+};
+
+export type VisibleDayEvent = VisibleDayRange & {
+  event: CalendarEvent;
+};
+
+export type LaidOutDayEvent = VisibleDayEvent & {
+  row: number;
+};
+
+export function getVisibleDayRange(
+  event: CalendarEvent,
+  viewStart: DateTime,
+  numberOfDays: number,
+): VisibleDayRange | null {
+  if (numberOfDays <= 0 || event.to <= event.from) return null;
+
+  const endsAtMidnight = event.to.toMillis() === event.to.startOf('day').toMillis();
+  const lastEventDay = (endsAtMidnight ? event.to.minus({ milliseconds: 1 }) : event.to).startOf('day');
+  const startIndex = Math.floor(event.from.startOf('day').diff(viewStart, 'days').days);
+  const endIndex = Math.floor(lastEventDay.diff(viewStart, 'days').days);
+
+  if (endIndex < 0 || startIndex >= numberOfDays) return null;
+
+  const firstDay = Math.max(0, startIndex);
+  const lastDay = Math.min(numberOfDays - 1, endIndex);
+
+  return {
+    startIndex: firstDay,
+    endIndex: lastDay,
+    span: lastDay - firstDay + 1,
+  };
+}
+
+export function getVisibleEventsByDay(
+  events: CalendarEvent[],
+  viewStart: DateTime,
+  numberOfDays: number,
+): VisibleDayEvent[] {
+  const visibleEvents = events.flatMap((event) => {
+    const range = getVisibleDayRange(event, viewStart, numberOfDays);
+    return range ? [{ event, ...range }] : [];
+  });
+
+  visibleEvents.sort(
+    (a, b) =>
+      a.startIndex - b.startIndex ||
+      b.span - a.span ||
+      a.event.from.toMillis() - b.event.from.toMillis() ||
+      a.event.to.toMillis() - b.event.to.toMillis(),
+  );
+
+  return visibleEvents;
+}
+
+export function layoutEventsByDay(
+  events: CalendarEvent[],
+  viewStart: DateTime,
+  numberOfDays: number,
+): LaidOutDayEvent[] {
+  const visibleEvents = getVisibleEventsByDay(events, viewStart, numberOfDays);
+  const rowEnds: number[] = [];
+  return visibleEvents.map((item) => {
+    let rowIndex = rowEnds.findIndex((endIndex) => endIndex < item.startIndex);
+
+    if (rowIndex === -1) rowIndex = rowEnds.length;
+    rowEnds[rowIndex] = item.endIndex;
+
+    return {
+      ...item,
+      row: rowIndex + 1,
+    };
+  });
+}
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
index 642f486..75fd7d8 100644
--- a/src/views/CalendarView.vue
+++ b/src/views/CalendarView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import XDaysView from '@/components/timeline/XDaysView.vue';
+import MonthView from '@/components/monthview/MonthView.vue';
 import SideBar from '@/components/SideBar.vue';
 import MonthSideMap from '@/components/MonthSideMap.vue';
 import TopBar from '@/components/TopBar.vue';
@@ -29,7 +30,7 @@ const activeView: ComputedRef<CalendarView> = computed(() => String(route.params
 const views = {
   '4d': [XDaysView, 4],
   w: [XDaysView, 7],
-  m: [null, null],
+  m: [MonthView, null],
 };
 </script>
 
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index 8a04e4b..3859ade 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -109,13 +109,13 @@
         <p>These shortcuts work while the calendar is open and focus is not inside a form field.</p>
         <ul class="shortcuts">
           <li><kbd>N</kbd> Create a new event</li>
-          <li><kbd>S</kbd> Show or hide the sidebar</li>
           <li><kbd>T</kbd> Go to today</li>
           <li><kbd>4</kbd> Switch to the four-day view</li>
           <li><kbd>W</kbd> Switch to the week view</li>
-          <li><kbd>M</kbd> (In progress) Switch to the month view</li>
+          <li><kbd>M</kbd> Switch to the month view</li>
           <li><kbd>←</kbd> Move to the previous period</li>
           <li><kbd>→</kbd> Move to the next period</li>
+          <li><kbd>S</kbd> Show or hide the sidebar</li>
           <li><kbd>Esc</kbd> Close the open dialog</li>
         </ul>
       </section>