diff --git a/src/Ursa.Themes.Semi/Controls/DatePicker.axaml b/src/Ursa.Themes.Semi/Controls/DatePicker.axaml
index 6325342..05c1357 100644
--- a/src/Ursa.Themes.Semi/Controls/DatePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/DatePicker.axaml
@@ -1,8 +1,9 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:u="https://irihi.tech/ursa">
-    <!-- Add Resources Here -->
-    <ControlTheme TargetType="u:DatePicker" x:Key="{x:Type u:DatePicker}">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type u:DatePicker}" TargetType="u:DatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
@@ -25,7 +26,7 @@
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"/>
+                            CornerRadius="{TemplateBinding CornerRadius}" />
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -40,20 +41,18 @@
                                 Background="Transparent"
                                 BorderBrush="Transparent"
                                 BorderThickness="0"
-                                Watermark="{TemplateBinding Watermark}"
-                                InnerLeftContent="{TemplateBinding InnerLeftContent}"
-                                InnerRightContent="{TemplateBinding InnerRightContent}"
                                 CornerRadius="{TemplateBinding CornerRadius}"
                                 Foreground="{TemplateBinding Foreground}"
+                                InnerLeftContent="{TemplateBinding InnerLeftContent}"
+                                InnerRightContent="{TemplateBinding InnerRightContent}"
                                 Theme="{DynamicResource LooklessTextBox}"
-                                >
-                            </TextBox>
+                                Watermark="{TemplateBinding Watermark}" />
                             <Button
                                 Name="ClearButton"
                                 Grid.Column="1"
                                 Padding="0,0,8,0"
-                                Content="{DynamicResource IconButtonClearData}"
                                 Command="{Binding $parent[u:DatePicker].Clear}"
+                                Content="{DynamicResource IconButtonClearData}"
                                 Focusable="False"
                                 IsVisible="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -67,25 +66,25 @@
                             <Popup
                                 Name="PART_Popup"
                                 Grid.Column="0"
-                                HorizontalOffset="-8"
+                                HorizontalOffset="-4"
                                 IsLightDismissEnabled="True"
-                                PlacementTarget="{TemplateBinding}"
-                                Placement="BottomEdgeAlignedLeft"
                                 IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropdownOpen, Mode=TwoWay}"
-                                VerticalOffset="-4">
+                                Placement="BottomEdgeAlignedLeft"
+                                PlacementTarget="{TemplateBinding}">
                                 <Border
                                     Margin="8"
                                     Padding="8"
-                                    Background="{DynamicResource SemiColorBackground0}"
-                                    BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
+                                    Background="{DynamicResource ComboBoxPopupBackground}"
+                                    BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                                    BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                                    BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                     CornerRadius="{DynamicResource CalendarCornerRadius}">
                                     <u:CalendarView
                                         Name="PART_Calendar"
                                         BorderThickness="0"
                                         CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
-                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}">
-                                    </u:CalendarView>
+                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" />
                                 </Border>
                             </Popup>
                         </Grid>
diff --git a/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
index 1e81688..019c573 100644
--- a/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
@@ -72,21 +72,21 @@
                         </Grid>
                         <Popup
                             Name="{x:Static contracts:PartNames.PART_Popup}"
+                            HorizontalOffset="-4"
                             IsLightDismissEnabled="True"
                             IsOpen="{TemplateBinding IsDropdownOpen,
                                                      Mode=TwoWay}"
                             Placement="BottomEdgeAlignedLeft"
                             PlacementTarget="Background">
                             <Border
-                                Margin="0,4"
+                                Margin="8"
                                 Padding="8"
                                 HorizontalAlignment="Stretch"
                                 Background="{DynamicResource ComboBoxPopupBackground}"
                                 BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                                ClipToBounds="True"
-                                CornerRadius="6">
+                                CornerRadius="{DynamicResource CalendarCornerRadius}">
                                 <DockPanel>
                                     <!--
                                     <StackPanel DockPanel.Dock="Bottom" IsVisible="{TemplateBinding NeedConfirmation}">
diff --git a/src/Ursa/Controls/DateTimePicker/CalendarContext.cs b/src/Ursa/Controls/DateTimePicker/CalendarContext.cs
index 516bc31..e604423 100644
--- a/src/Ursa/Controls/DateTimePicker/CalendarContext.cs
+++ b/src/Ursa/Controls/DateTimePicker/CalendarContext.cs
@@ -1,6 +1,6 @@
 namespace Ursa.Controls;
 
-public sealed class CalendarContext(int? year = null, int? month = null, int? startYear = null, int? endYear = null)
+public sealed class CalendarContext(int? year = null, int? month = null, int? startYear = null, int? endYear = null): IComparable<CalendarContext>
 {
     public int? Year { get; } = year;
     public int? Month { get; } = month;
@@ -64,4 +64,13 @@ public sealed class CalendarContext(int? year = null, int? month = null, int? st
     {
         return new CalendarContext(Year - 1, Month, StartYear, EndYear);
     }
+
+    public int CompareTo(CalendarContext? other)
+    {
+        if (ReferenceEquals(this, other)) return 0;
+        if (ReferenceEquals(null, other)) return 1;
+        var yearComparison = Nullable.Compare(Year, other.Year);
+        if (yearComparison != 0) return yearComparison;
+        return Nullable.Compare(Month, other.Month);
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/CalendarView.cs b/src/Ursa/Controls/DateTimePicker/CalendarView.cs
index a72f293..0179ea1 100644
--- a/src/Ursa/Controls/DateTimePicker/CalendarView.cs
+++ b/src/Ursa/Controls/DateTimePicker/CalendarView.cs
@@ -81,7 +81,10 @@ public class CalendarView : TemplatedControl
 
     private void OnContextDateChanged(AvaloniaPropertyChangedEventArgs<CalendarContext> args)
     {
-        ContextDateChanged?.Invoke(this, args.NewValue.Value);
+        if (!_dateContextSyncing)
+        {
+            ContextDateChanged?.Invoke(this, args.NewValue.Value);
+        }
         //UpdateDayButtons();
         //UpdateYearButtons();
     }
@@ -571,4 +574,19 @@ public class CalendarView : TemplatedControl
         base.OnPointerExited(e);
         DatePreviewed?.Invoke(this, new CalendarDayButtonEventArgs(null));
     }
+
+    private bool _dateContextSyncing = false;
+    /// <summary>
+    /// Used for syncing the context date for DateRangePicker. mark a flag to avoid infinitely loop. 
+    /// </summary>
+    /// <param name="context"></param>
+    internal void SyncContextDate(CalendarContext? context)
+    {
+        if (context is null) return;
+        _dateContextSyncing = true;
+        ContextDate = context;
+        _dateContextSyncing = false;
+        UpdateDayButtons();
+        UpdateYearButtons();
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/DatePicker.cs b/src/Ursa/Controls/DateTimePicker/DatePicker.cs
index 451d55c..c317f37 100644
--- a/src/Ursa/Controls/DateTimePicker/DatePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/DatePicker.cs
@@ -139,7 +139,7 @@ public class DatePicker: DatePickerBase, IClearControl
                 if (_calendar is not null)
                 {
                     var d = SelectedDate ?? DateTime.Today;
-                    _calendar.ContextDate = new CalendarContext(date.Year, date.Month);
+                    _calendar.ContextDate = _calendar.ContextDate.With(year: date.Year, month: date.Month);
                     _calendar.UpdateDayButtons();
                 }
                 _calendar?.MarkDates(startDate: date, endDate: date);
@@ -152,7 +152,7 @@ public class DatePicker: DatePickerBase, IClearControl
         if (_calendar is not null)
         {
             var date = SelectedDate ?? DateTime.Today;
-            _calendar.ContextDate = new CalendarContext(date.Year, date.Month);
+            _calendar.ContextDate = _calendar.ContextDate.With(year: date.Year, month: date.Month);
             _calendar.UpdateDayButtons();
         }
         SetCurrentValue(IsDropdownOpenProperty, true);
diff --git a/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs b/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
index a381e0c..5953919 100644
--- a/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
@@ -32,6 +32,15 @@ public class DateRangePicker : DatePickerBase
         AvaloniaProperty.Register<DateRangePicker, DateTime?>(
             nameof(SelectedEndDate));
 
+    public static readonly StyledProperty<bool> EnableMonthSyncProperty = AvaloniaProperty.Register<DateRangePicker, bool>(
+        nameof(EnableMonthSync));
+
+    public bool EnableMonthSync
+    {
+        get => GetValue(EnableMonthSyncProperty);
+        set => SetValue(EnableMonthSyncProperty, value);
+    }
+
     private Button? _button;
     private CalendarView? _endCalendar;
     private TextBox? _endTextBox;
@@ -103,11 +112,13 @@ public class DateRangePicker : DatePickerBase
         {
             _startCalendar.DateSelected -= OnDateSelected;
             _startCalendar.DatePreviewed -= OnDatePreviewed;
+            _startCalendar.ContextDateChanged -= OnContextDateChanged;
         }
         if (_endCalendar != null)
         {
             _endCalendar.DateSelected -= OnDateSelected;
             _endCalendar.DatePreviewed -= OnDatePreviewed;
+            _endCalendar.ContextDateChanged -= OnContextDateChanged;
         }
         _button = e.NameScope.Find<Button>(PART_Button);
         _popup = e.NameScope.Find<Popup>(PART_Popup);
@@ -125,11 +136,33 @@ public class DateRangePicker : DatePickerBase
         {
             _startCalendar.DateSelected += OnDateSelected;
             _startCalendar.DatePreviewed += OnDatePreviewed;
+            _startCalendar.ContextDateChanged += OnContextDateChanged;
         }
         if (_endCalendar != null)
         {
             _endCalendar.DateSelected += OnDateSelected;
             _endCalendar.DatePreviewed += OnDatePreviewed;
+            _endCalendar.ContextDateChanged += OnContextDateChanged;
+        }
+    }
+
+    private void OnContextDateChanged(object sender, CalendarContext e)
+    {
+        if(sender == _startCalendar)
+        {
+            bool needsUpdate = EnableMonthSync || _startCalendar?.ContextDate.CompareTo(_endCalendar?.ContextDate) >= 0;
+            if (needsUpdate)
+            {
+                _endCalendar?.SyncContextDate(_startCalendar?.ContextDate.NextMonth());
+            }
+        }
+        else if(sender == _endCalendar)
+        {
+            bool needsUpdate = EnableMonthSync || _endCalendar?.ContextDate.CompareTo(_startCalendar?.ContextDate) <= 0;
+            if (needsUpdate)
+            {
+                _startCalendar?.SyncContextDate(_endCalendar?.ContextDate.PreviousMonth());
+            }
         }
     }
 
@@ -296,7 +329,8 @@ public class DateRangePicker : DatePickerBase
                 }
                 if (_endCalendar is not null)
                 {
-                    var date2 = SelectedEndDate ?? DateTime.Today;
+                    var date2 = SelectedEndDate ?? SelectedStartDate ?? DateTime.Today;
+                    if (SelectedEndDate is null) date2 = date2.AddMonths(1);
                     _endCalendar.ContextDate = new CalendarContext(date2.Year, date2.Month);
                     _endCalendar.UpdateDayButtons();
                     _endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
@@ -311,7 +345,7 @@ public class DateRangePicker : DatePickerBase
         {
             var date = SelectedStartDate ?? DateTime.Today;
             _startCalendar.ContextDate = new CalendarContext(date.Year, date.Month);
-            // _startCalendar.UpdateDayButtons();
+            _startCalendar.UpdateDayButtons();
         }
 
         if (_endCalendar is not null)
@@ -319,7 +353,7 @@ public class DateRangePicker : DatePickerBase
             var date2 = SelectedStartDate ?? DateTime.Today;
             date2 = date2.AddMonths(1);
             _endCalendar.ContextDate = new CalendarContext(date2.Year, date2.Month);
-            // _endCalendar.UpdateDayButtons();
+            _endCalendar.UpdateDayButtons();
         }
         SetCurrentValue(IsDropdownOpenProperty, true);
     }