diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index e65249a7298a..fbfcba77d49d 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -196,7 +196,9 @@ type CalendarYearRangeT = {
  * @csspart year-range-cell - Used to style the year range cells.
  * @csspart year-range-cell-selected - Used to style the year range cells when selected.
  * @csspart year-range-cell-selected-between - Used to style the year range cells in between of selected year ranges.
+ * @csspart year-range-picker-root - Used to style the year range picker root container.
  * @csspart calendar-header-middle-button - Used to style the calendar header middle buttons (month/year/year-range buttons).
+ * @csspart calendar-header-arrow-button - Used to style the calendar header navigation arrow buttons (previous/next buttons).
  * @since 1.0.0-rc.11
  */
 @customElement({
diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx
index 6c3ea36c9701..c04590e8549d 100644
--- a/packages/main/src/CalendarHeaderTemplate.tsx
+++ b/packages/main/src/CalendarHeaderTemplate.tsx
@@ -13,6 +13,7 @@ export default function CalendarTemplate(this: Calendar) {
 					"ui5-calheader-arrowbtn": true,
 					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
 				}}
+				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onPrevButtonClick}
 				title={this.headerPreviousButtonText}
@@ -79,6 +80,7 @@ export default function CalendarTemplate(this: Calendar) {
 					"ui5-calheader-arrowbtn": true,
 					"ui5-calheader-arrowbtn-disabled": this._nextButtonDisabled,
 				}}
+				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
 				title={this.headerNextButtonText}
diff --git a/packages/main/src/CalendarTemplate.tsx b/packages/main/src/CalendarTemplate.tsx
index 68ea2ec153fa..dc96a6eccb24 100644
--- a/packages/main/src/CalendarTemplate.tsx
+++ b/packages/main/src/CalendarTemplate.tsx
@@ -84,11 +84,11 @@ export default function CalendarTemplate(this: Calendar) {
 						_currentYearRange = {this._currentYearRange}
 						onChange={this.onSelectedYearRangeChange}
 						onNavigate={this.onNavigate}
-						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between"
+						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
 					/>
 				</div>
 
-				<div class="ui5-calheader">
+				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
 					{ CalendarHeaderTemplate.call(this) }
 				</div>
 			</div>
diff --git a/packages/main/src/YearRangePickerTemplate.tsx b/packages/main/src/YearRangePickerTemplate.tsx
index c84154cb5177..8940e93a18d6 100644
--- a/packages/main/src/YearRangePickerTemplate.tsx
+++ b/packages/main/src/YearRangePickerTemplate.tsx
@@ -4,6 +4,7 @@ export default function YearRangePickerTemplate(this: YearRangePicker) {
 	return (
 		<div
 			class="ui5-yrp-root"
+			part="year-range-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"
diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html
index 473e807da56b..a79dd84e08ec 100644
--- a/packages/main/test/pages/Calendar.html
+++ b/packages/main/test/pages/Calendar.html
@@ -42,11 +42,38 @@
 			border: 2px solid #7b1fa2;
 		}
 
+		.header-parts-demo::part(calendar-header-arrow-button) {
+			color: #354a5f;
+			border: 1px solid #d1d5db;
+			border-radius: 6px;
+			min-width: 36px;
+			min-height: 36px;
+		}
+
+		.header-parts-demo::part(calendar-header-arrow-button):hover {
+			border-color: #9ca3af;
+		}
+
+		.header-parts-demo::part(year-range-picker-root) {
+			padding: 20px 24px;
+			background: #fafbfc;
+			border: 1px solid #e1e5e9;
+			border-radius: 8px;
+			margin: 4px;
+		}
+
 		.header-parts-demo::part(calendar-header-middle-button) {
-			background: #673ab7;
-			color: white;
-			border: 2px solid #512da8;
-			transform: scale(1.1);
+			background: #ffffff;
+			border: 1px solid #d1d5db;
+			color: #374151;
+			padding: 8px 16px;
+			border-radius: 6px;
+		}
+
+		.header-parts-demo::part(calendar-header-middle-button):hover {
+			background: #f9fafb;
+			border-color: #9ca3af;
+			color: #111827;
 		}
 	</style>
 </head>