diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
new file mode 100644
index 0000000..d9c97c1
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
@@ -0,0 +1,25 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.CalendarDatePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <CalendarDatePicker />
+        <CalendarDatePicker
+            Name="DatePicker2"
+            Margin="0,0,0,8"
+            SelectedDateFormat="Long" />
+        <CalendarDatePicker
+            Name="DatePicker3"
+            Margin="0,0,0,8"
+            CustomDateFormatString="ddd, MMM d"
+            SelectedDateFormat="Custom" />
+        <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
+
+        <CalendarDatePicker IsEnabled="False" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs
new file mode 100644
index 0000000..08e4a31
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CalendarDatePickerDemo : UserControl
+{
+    public CalendarDatePickerDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml
new file mode 100644
index 0000000..c942a4f
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml
@@ -0,0 +1,14 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.CalendarDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <Calendar />
+        <Calendar SelectionMode="SingleRange" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml.cs
new file mode 100644
index 0000000..06ac28c
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CalendarDemo : UserControl
+{
+    public CalendarDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index e0084e2..986096e 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -27,6 +27,12 @@
         <TabItem Header="ButtonSpinner">
             <pages:ButtonSpinnerDemo />
         </TabItem>
+        <TabItem Header="Calendar">
+            <pages:CalendarDemo />
+        </TabItem>
+        <TabItem Header="CalendarDatePicker">
+            <pages:CalendarDatePickerDemo />
+        </TabItem>
         <TabItem Header="Carousel">
             <pages:CarouselDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Calendar.axaml b/src/Semi.Avalonia/Controls/Calendar.axaml
new file mode 100644
index 0000000..9e2b32f
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/Calendar.axaml
@@ -0,0 +1,272 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
+    <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
+        <Setter Property="Foreground" Value="{DynamicResource CalendarForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CalendarBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CalendarBorderThickness}" />
+        <Setter Property="Calendar.CornerRadius" Value="{DynamicResource CalendarCornerRadius}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Calendar">
+                <StackPanel
+                    Name="PART_Root"
+                    HorizontalAlignment="Center"
+                    ClipToBounds="True">
+                    <CalendarItem
+                        Name="PART_CalendarItem"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        HeaderBackground="{TemplateBinding HeaderBackground}" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type CalendarItem}" TargetType="CalendarItem">
+        <Setter Property="CalendarItem.DayTitleTemplate">
+            <Template>
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    FontSize="12"
+                    Foreground="{DynamicResource CalendarItemWeekDayNameForeground}"
+                    Text="{Binding}" />
+            </Template>
+        </Setter>
+
+        <Setter Property="CalendarItem.Template">
+            <ControlTemplate TargetType="CalendarItem">
+                <Border
+                    Padding="16"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <!--
+                        To keep calendar from resizing when switching DisplayMode
+                        In WinUI Min-Width from TemplateSettings
+                        basically...MinWidth of DayItem = 40, 40 * 7 = 280 + margins/padding = ~294
+                        Viewport height is set from # of rows displayed (2-8) in Month mode, = ~290 for 6 weeks (+ day names)
+                    -->
+                    <Grid
+                        MinWidth="200"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        RowDefinitions="Auto,*">
+                        <Grid ColumnDefinitions="Auto,*,Auto">
+                            <Button
+                                Name="PART_PreviousButton"
+                                Grid.Column="0"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <!--  Path mimics Segoe MDL2 Assets font glyph used in WinUI  -->
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemPreviousIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+
+                            <Button
+                                Name="PART_HeaderButton"
+                                Grid.Column="1"
+                                HorizontalContentAlignment="Center"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}" />
+
+                            <Button
+                                Name="PART_NextButton"
+                                Grid.Column="2"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <!--  Path mimics Segoe MDL2 Assets font glyph used in WinUI  -->
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemNextIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+                        </Grid>
+                        <!--  Border below is used only for MonthView but it can't be moved inside of Grid because CalendarItem expects it to be empty and it will cause side-effects  -->
+                        <Grid
+                            Name="PART_MonthView"
+                            Grid.Row="1"
+                            MinHeight="200"
+                            HorizontalAlignment="Stretch"
+                            IsVisible="False">
+                            <Grid.RowDefinitions>
+                                <!--  This should always be the week day names??  -->
+                                <RowDefinition Height="{DynamicResource CalendarItemWeekDayNameHeight}" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                        </Grid>
+                        <Grid
+                            Name="PART_YearView"
+                            Grid.Row="1"
+                            MinHeight="200"
+                            Background="{TemplateBinding Background}"
+                            IsVisible="False">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type CalendarButton}" TargetType="CalendarButton">
+        <Setter Property="ClickMode" Value="Release" />
+        <Setter Property="Margin" Value="2" />
+        <!--  These are actually set on the CalendarView in WinUI  -->
+        <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarItemCalendarButtonBorderBrush}" />
+        <Setter Property="CalendarButton.CornerRadius" Value="{DynamicResource CalendarItemCalendarButtonCornerRadius}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="CalendarButton.HorizontalContentAlignment" Value="Center" />
+        <Setter Property="CalendarButton.VerticalContentAlignment" Value="Center" />
+        <Setter Property="CalendarButton.HorizontalAlignment" Value="Stretch" />
+        <Setter Property="CalendarButton.VerticalAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CalendarButton">
+                <ContentControl
+                    Name="Content"
+                    Margin="{TemplateBinding Padding}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontSize="{TemplateBinding FontSize}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonPressedBackground}" />
+        </Style>
+
+        <!--  Adjusted :selected to look like :today from DayItem  -->
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ ContentControl">
+                <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonSelectedBackground}" />
+                <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarButtonSelectedForeground}" />
+                <Setter Property="ContentControl.FontWeight" Value="{DynamicResource CalendarItemCalendarButtonSelectedFontWeight}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:blackout /template/ ContentControl">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonBlackoutForeground}" />
+        </Style>
+
+        <Style Selector="^:disabled /template/ ContentControl">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonDisabledForeground}" />
+        </Style>
+
+        <Style Selector="^:inactive /template/ ContentControl">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonInactiveForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type CalendarDayButton}" TargetType="CalendarDayButton">
+        <Setter Property="ClickMode" Value="Release" />
+        <Setter Property="Margin" Value="2" />
+        <Setter Property="Padding" Value="4" />
+        <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarDayButtonBackground}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CalendarItemCalendarDayButtonCornerRadius}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarItemCalendarDayButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CalendarDayButton">
+                <ContentControl
+                    Name="Content"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontSize="{TemplateBinding FontSize}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:today /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonTodayBackground}" />
+            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonTodayForeground}" />
+        </Style>
+
+        <Style Selector="^:selected /template/ ContentControl">
+            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedBackground}" />
+            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedForeground}" />
+        </Style>
+
+        <Style Selector="^:inactive /template/ ContentControl">
+            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonInactiveForeground}" />
+        </Style>
+
+        <Style Selector="^:blackout /template/ ContentControl">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonBlackoutForeground}" />
+        </Style>
+
+        <Style Selector="^:disabled /template/ ContentControl">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
new file mode 100644
index 0000000..791c189
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@@ -0,0 +1,135 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="CalendarDatePickerButton" TargetType="Button">
+        <Setter Property="Button.Foreground" Value="{DynamicResource CalendarDatePickerIconForeground}" />
+        <Setter Property="Button.Template">
+            <ControlTemplate TargetType="Button">
+                <Grid Margin="{TemplateBinding Padding}" Background="Transparent">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="{DynamicResource CalendarDatePickerIconGlyph}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
+        </Style>
+    </ControlTheme>
+    <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
+        <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
+        <Setter Property="CalendarDatePicker.IsTodayHighlighted" Value="True" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="4 0" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CalendarDatePicker">
+                <Panel
+                    x:Name="LayoutRoot"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch">
+                    <Border
+                        x:Name="Background"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            ColumnDefinitions="*,Auto">
+                            <TextBox
+                                Name="PART_TextBox"
+                                Grid.Column="0"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Center"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Background="Transparent"
+                                BorderBrush="Transparent"
+                                BorderThickness="0"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                Foreground="{TemplateBinding Foreground}"
+                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                Watermark="{TemplateBinding Watermark}">
+                                <TextBox.Styles>
+                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_BorderElement">
+                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                        <Setter Property="Background" Value="Transparent" />
+                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                        <Setter Property="BorderThickness" Value="0" />
+                                    </Style>
+                                    <Style Selector="TextBox#PART_TextBox:disabled">
+                                        <Style Selector="^ /template/ Border#PART_BorderElement">
+                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                            <Setter Property="Background" Value="Transparent" />
+                                            <Setter Property="BorderBrush" Value="Transparent" />
+                                        </Style>
+                                        <Style Selector="^ /template/ TextBlock#PART_Watermark, ^ TextBlock#PART_FloatingWatermark">
+                                            <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
+                                        </Style>
+                                    </Style>
+                                </TextBox.Styles>
+                            </TextBox>
+                            <Button
+                                Name="PART_Button"
+                                Grid.Column="1"
+                                Padding="0,0,8,0"
+                                Cursor="Hand"
+                                Focusable="False"
+                                Theme="{DynamicResource CalendarDatePickerButton}" />
+                            <Popup
+                                Name="PART_Popup"
+                                IsLightDismissEnabled="True"
+                                PlacementTarget="{TemplateBinding}">
+                                <Border Margin="8" BoxShadow="0 0 8 0 #1A000000">
+                                    <Calendar
+                                        Name="PART_Calendar"
+                                        DisplayDate="{TemplateBinding DisplayDate}"
+                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                                        SelectedDate="{TemplateBinding SelectedDate,
+                                                                       Mode=TwoWay}" />
+                                </Border>
+                            </Popup>
+                        </Grid>
+                    </Border>
+
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Disabled State  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerDisabledBorderBrush}" />
+            </Style>
+
+            <Style Selector="^ /template/ Button#PART_Button">
+                <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
+            </Style>
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="Transparent" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+        </Style>
+
+        <!--  Focused State  -->
+        <Style Selector="^:focus-within /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 25c89e0..494506a 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -5,6 +5,8 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ButtonSpinner.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Calendar.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/CalendarDatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Carousel.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
index 81944b4..aadb4ba 100644
--- a/src/Semi.Avalonia/Controls/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -1,17 +1,23 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:dialog="using:Avalonia.Dialogs">
     <Design.PreviewWith>
         <StackPanel>
             <ScrollBar Width="200" Orientation="Horizontal" />
             <ScrollBar Height="200" Orientation="Vertical" />
             <ScrollViewer
-                Width="200" Height="200"
-                HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
+                Width="200"
+                Height="200"
+                HorizontalScrollBarVisibility="Visible"
+                VerticalScrollBarVisibility="Visible">
                 <Border
-                    Width="400" Height="400"
+                    Width="400"
+                    Height="400"
                     Background="aqua" />
             </ScrollViewer>
+            <dialog:ManagedFileChooser />
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
@@ -23,11 +29,14 @@
                     <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                         <Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto">
                             <RepeatButton
-                                Name="PART_LineUpButton" Grid.Row="0"
+                                Name="PART_LineUpButton"
+                                Grid.Row="0"
                                 Grid.Column="0"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
-                                VerticalAlignment="Center" Classes="repeat"
-                                CornerRadius="0" Focusable="False">
+                                VerticalAlignment="Center"
+                                Classes="repeat"
+                                CornerRadius="0"
+                                Focusable="False">
                                 <Path Data="M 4 0 L 4 8 L 0 4 Z" />
                             </RepeatButton>
                             <Track
@@ -40,25 +49,34 @@
                                                         Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
-                                        Name="PART_PageUpButton" MinWidth="0"
-                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                        Classes="repeattrack" CornerRadius="0"
+                                        Name="PART_PageUpButton"
+                                        MinWidth="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Classes="repeattrack"
+                                        CornerRadius="0"
                                         Focusable="False" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
-                                        Name="PART_PageDownButton" MinWidth="0"
-                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                        Classes="repeattrack" CornerRadius="0"
+                                        Name="PART_PageDownButton"
+                                        MinWidth="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Classes="repeattrack"
+                                        CornerRadius="0"
                                         Focusable="False" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
                             <RepeatButton
-                                Name="PART_LineDownButton" Grid.Column="2"
+                                Name="PART_LineDownButton"
+                                Grid.Column="2"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
-                                VerticalAlignment="Center" Classes="repeat"
-                                CornerRadius="0" Focusable="False">
+                                VerticalAlignment="Center"
+                                Classes="repeat"
+                                CornerRadius="0"
+                                Focusable="False">
                                 <Path Data="M 0 0 L 4 4 L 0 8 Z" />
                             </RepeatButton>
                         </Grid>
@@ -73,14 +91,18 @@
                     <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                         <Grid RowDefinitions="Auto,*,Auto">
                             <RepeatButton
-                                Name="PART_LineUpButton" Grid.Row="0"
+                                Name="PART_LineUpButton"
+                                Grid.Row="0"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center" Classes="repeat"
-                                CornerRadius="0" Focusable="False">
+                                HorizontalAlignment="Center"
+                                Classes="repeat"
+                                CornerRadius="0"
+                                Focusable="False">
                                 <Path Data="M 0 4 L 8 4 L 4 0 Z" />
                             </RepeatButton>
                             <Track
-                                Grid.Row="1" IsDirectionReversed="True"
+                                Grid.Row="1"
+                                IsDirectionReversed="True"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="{TemplateBinding Orientation}"
@@ -89,25 +111,34 @@
                                                         Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
-                                        Name="PART_PageUpButton" MinHeight="0"
-                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                        Classes="repeattrack" CornerRadius="0"
+                                        Name="PART_PageUpButton"
+                                        MinHeight="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Classes="repeattrack"
+                                        CornerRadius="0"
                                         Focusable="False" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
-                                        Name="PART_PageDownButton" MinHeight="0"
-                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                        Classes="repeattrack" CornerRadius="0"
+                                        Name="PART_PageDownButton"
+                                        MinHeight="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Classes="repeattrack"
+                                        CornerRadius="0"
                                         Focusable="False" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
                             <RepeatButton
-                                Name="PART_LineDownButton" Grid.Row="2"
+                                Name="PART_LineDownButton"
+                                Grid.Row="2"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center" Classes="repeat"
-                                CornerRadius="0" Focusable="False">
+                                HorizontalAlignment="Center"
+                                Classes="repeat"
+                                CornerRadius="0"
+                                Focusable="False">
                                 <Path Data="M 0 0 L 4 4 L 8 0 Z" />
                             </RepeatButton>
                         </Grid>
@@ -122,7 +153,8 @@
                     <ControlTemplate TargetType="Thumb">
                         <Border
                             Background="{TemplateBinding Background}"
-                            CornerRadius="24" UseLayoutRounding="False" />
+                            CornerRadius="24"
+                            UseLayoutRounding="False" />
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
@@ -185,8 +217,10 @@
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                     <ScrollBar
-                        Name="horizontalScrollBar" Grid.Row="1"
-                        Grid.Column="0" Focusable="False"
+                        Name="horizontalScrollBar"
+                        Grid.Row="1"
+                        Grid.Column="0"
+                        Focusable="False"
                         LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
                         Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
                         Orientation="Horizontal"
@@ -196,8 +230,10 @@
                         Value="{TemplateBinding HorizontalScrollBarValue,
                                                 Mode=TwoWay}" />
                     <ScrollBar
-                        Name="verticalScrollBar" Grid.Row="0"
-                        Grid.Column="1" Focusable="False"
+                        Name="verticalScrollBar"
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        Focusable="False"
                         LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
                         Maximum="{TemplateBinding VerticalScrollBarMaximum}"
                         Orientation="Vertical"
@@ -207,7 +243,8 @@
                         Value="{TemplateBinding VerticalScrollBarValue,
                                                 Mode=TwoWay}" />
                     <Panel
-                        Grid.Row="1" Grid.Column="1"
+                        Grid.Row="1"
+                        Grid.Column="1"
                         Background="{DynamicResource ColorScrollBarBackground}" />
                 </Grid>
             </ControlTemplate>
@@ -228,7 +265,8 @@
             <ControlTemplate TargetType="ScrollViewer">
                 <DockPanel>
                     <RepeatButton
-                        Background="Transparent" BorderThickness="0"
+                        Background="Transparent"
+                        BorderThickness="0"
                         Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
                         DockPanel.Dock="Top">
                         <RepeatButton.IsVisible>
@@ -242,7 +280,8 @@
                         <Path Data="M 0 4 L 8 4 L 4 0 Z" />
                     </RepeatButton>
                     <RepeatButton
-                        Background="Transparent" BorderThickness="0"
+                        Background="Transparent"
+                        BorderThickness="0"
                         Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
                         DockPanel.Dock="Bottom">
                         <RepeatButton.IsVisible>
diff --git a/src/Semi.Avalonia/Themes/Light/Calendar.axaml b/src/Semi.Avalonia/Themes/Light/Calendar.axaml
new file mode 100644
index 0000000..af54bf2
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Calendar.axaml
@@ -0,0 +1,46 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="CalendarBackground" Color="White" />
+    <SolidColorBrush x:Key="CalendarForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <Thickness x:Key="CalendarBorderThickness">1</Thickness>
+    <CornerRadius x:Key="CalendarCornerRadius">6</CornerRadius>
+    <GridLength x:Key="CalendarItemWeekDayNameHeight">40</GridLength>
+    <SolidColorBrush x:Key="CalendarItemWeekDayNameForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <PathGeometry x:Key="CalendarItemPreviousIconGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</PathGeometry>
+    <PathGeometry x:Key="CalendarItemNextIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonBorderBrush" Color="Transparent" />
+    <Thickness x:Key="CalendarItemCalendarButtonBorderThickness">0</Thickness>
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonSelectedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonSelectedForeground" Color="White" />
+    <FontWeight x:Key="CalendarItemCalendarButtonSelectedFontWeight">600</FontWeight>
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonDisabledForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonBlackoutForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarButtonInactiveForeground" Opacity="0.65" Color="#1C1F23" />
+    <CornerRadius x:Key="CalendarItemCalendarButtonCornerRadius">3</CornerRadius>
+
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBorderBrush" Color="Transparent" />
+    <CornerRadius x:Key="CalendarItemCalendarDayButtonCornerRadius">3</CornerRadius>
+
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonSelectedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonSelectedForeground" Color="White" />
+
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonTodayForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonTodayBackground" Opacity="0.05" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonDisabledForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBlackoutForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonInactiveForeground" Opacity="0.62" Color="#1C1F23" />
+
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml b/src/Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml
new file mode 100644
index 0000000..62d30b1
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml
@@ -0,0 +1,15 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--    -->
+    <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarDatePickerIconPointeroverForeground" Color="#1C1F23" />
+    <PathGeometry x:Key="CalendarDatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
+    <SolidColorBrush x:Key="CalendarDatePickerBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="#C6CACD" />
+    <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
+    <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
+    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CalendarDatePickerDisabledIconForeground" Opacity="0.4" Color="#2E3238" />
+
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
index 31737e3..60d75c7 100644
--- a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -18,7 +18,6 @@
     <PathGeometry x:Key="DateTimePickerAcceptGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
     <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
 
-
     <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
     <sys:Double x:Key="DateTimePickerListBoxItemHeight">28</sys:Double>
 
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index f73b8b7..91891fc 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -6,6 +6,8 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ButtonSpinner.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Calendar.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DatePicker.axaml" />