diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
index 6c3823b652e..00d69297d4d 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
@@ -109,7 +109,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
     }),
     body: css({
       zIndex: theme.zIndex.modal,
-      backgroundColor: theme.colors.background.primary,
+      backgroundColor: theme.colors.background.elevated,
       width: '268px',
 
       '.react-calendar__navigation': {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
index d2ac66f7ba2..e0921250053 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
@@ -35,7 +35,7 @@ export const getStyles = (theme: GrafanaTheme2, isReversed = false) => {
       padding: theme.spacing(1),
       label: 'calendar',
       boxShadow: theme.shadows.z3,
-      backgroundColor: theme.colors.background.primary,
+      backgroundColor: theme.colors.background.elevated,
       border: `1px solid ${theme.colors.border.weak}`,
       borderRadius: theme.shape.radius.default,
     }),