diff --git a/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts b/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
index 9a241f03b..373a64133 100644
--- a/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
+++ b/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
@@ -253,13 +253,21 @@ export class RangeCalendarProvider {
 	readonly headingValue = $derived.by(() => {
 		const first = this.visibleMonths[0];
 		if (!first) return '';
-		const month = this.formatMonth(first.month);
-		const year = this.formatYear(first.year);
+		const firstMonth = this.formatMonth(first.month);
+		const firstYear = this.formatYear(first.year);
 		if (this.visibleMonths.length > 1) {
 			const last = this.visibleMonths[this.visibleMonths.length - 1];
-			return `${month} ${year} – ${this.formatMonth(last.month)} ${this.formatYear(last.year)}`;
+			const lastMonth = this.formatMonth(last.month);
+			const lastYear = this.formatYear(last.year);
+			// Collapse the year on the left side when both months share it
+			// ("June – July 2026"). Cross-year stays explicit on both ends
+			// ("June 2025 – July 2026").
+			if (first.year === last.year) {
+				return `${firstMonth} – ${lastMonth} ${lastYear}`;
+			}
+			return `${firstMonth} ${firstYear} – ${lastMonth} ${lastYear}`;
 		}
-		return `${month} ${year}`;
+		return `${firstMonth} ${firstYear}`;
 	});
 
 	readonly fullCalendarLabel = $derived.by(() => {
diff --git a/web/routes/uix/components/date-range-picker/+page.svelte b/web/routes/uix/components/date-range-picker/+page.svelte
index 4f58e227f..a835d24a9 100644
--- a/web/routes/uix/components/date-range-picker/+page.svelte
+++ b/web/routes/uix/components/date-range-picker/+page.svelte
@@ -967,8 +967,12 @@
 {#snippet calendarBody({ months, weekdays, validationMessage }: DateRangePickerCalendarSnippetProps)}
 	<DateRangePicker.Header>
 		<DateRangePicker.PrevButton aria-label="Previous month">&lt;</DateRangePicker.PrevButton>
-		<div data-range-calendar-header-controls>
-			<DateRangePicker.Heading />
+		<div class="range-header-titles" data-month-count={months.length}>
+			{#each months as month (`hdr-${month.value.toString()}`)}
+				<div class="range-month-title" id={monthHeadingId(month.value)}>
+					{formatMonthYear(month.value)}
+				</div>
+			{/each}
 		</div>
 		<DateRangePicker.NextButton aria-label="Next month">&gt;</DateRangePicker.NextButton>
 	</DateRangePicker.Header>
@@ -980,11 +984,6 @@
 	<div class="range-months" data-month-count={months.length}>
 		{#each months as month (month.value.toString())}
 			<div class="range-month-panel">
-				{#if months.length > 1}
-					<div class="range-month-title" id={monthHeadingId(month.value)}>
-						{formatMonthYear(month.value)}
-					</div>
-				{/if}
 				<DateRangePicker.Grid>
 					<DateRangePicker.GridHead>
 						<DateRangePicker.GridRow>
@@ -1074,6 +1073,15 @@
 		min-inline-size: max-content;
 	}
 
+	.range-header-titles {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: 1fr;
+		gap: var(--calendar-month-gap, 36px);
+		flex: 1 1 auto;
+		min-inline-size: 0;
+	}
+
 	.range-month-title {
 		color: var(--calendar-heading-color);
 		font-size: var(--calendar-heading-font-size);