diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
index ca8438f..44a1413 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
+        <CalendarDatePicker Classes="ClearButton" Width="200" />
         <CalendarDatePicker Width="500" />
         <CalendarDatePicker Classes="Large" />
         <CalendarDatePicker Classes="Small" />
diff --git a/src/Semi.Avalonia/Controls/Button.axaml b/src/Semi.Avalonia/Controls/Button.axaml
index a528b7b..6860da6 100644
--- a/src/Semi.Avalonia/Controls/Button.axaml
+++ b/src/Semi.Avalonia/Controls/Button.axaml
@@ -205,7 +205,7 @@
 
     </ControlTheme>
 
-    <ControlTheme x:Key="ButtonInputInnerButton" TargetType="Button">
+    <ControlTheme x:Key="InnerIconButton" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
@@ -214,6 +214,7 @@
                     <PathIcon
                         Width="16"
                         Height="16"
+                        Margin="{TemplateBinding Padding}"
                         Data="{TemplateBinding Content}"
                         Foreground="{TemplateBinding Foreground}" />
                 </ContentControl>
diff --git a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
index 566d2ab..3d28065 100644
--- a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@@ -3,26 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <!--  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}" />
@@ -51,10 +31,11 @@
                             <Grid
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                ColumnDefinitions="*,Auto">
+                                ColumnDefinitions="*, Auto, Auto">
                                 <TextBox
                                     Name="PART_TextBox"
                                     Grid.Column="0"
+                                    Grid.ColumnSpan="2"
                                     MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -91,14 +72,24 @@
                                     </TextBox.Styles>
                                 </TextBox>
                                 <Button
-                                    Name="PART_Button"
+                                    Name="ClearButton"
                                     Grid.Column="1"
                                     Padding="0,0,8,0"
-                                    Cursor="Hand"
+                                    Content="{DynamicResource TextBoxClearButtonData}"
+                                    Command="{Binding $parent[CalendarDatePicker].Clear}"
                                     Focusable="False"
-                                    Theme="{DynamicResource CalendarDatePickerButton}" />
+                                    IsVisible="False"
+                                    Theme="{DynamicResource InnerIconButton}" />
+                                <Button
+                                    Name="PART_Button"
+                                    Grid.Column="2"
+                                    Padding="0,0,8,0"
+                                    Content="{DynamicResource CalendarDatePickerIconGlyph}"
+                                    Focusable="False"
+                                    Theme="{DynamicResource InnerIconButton}" />
                                 <Popup
                                     Name="PART_Popup"
+                                    Grid.Column="0"
                                     HorizontalOffset="-8"
                                     IsLightDismissEnabled="True"
                                     PlacementTarget="{TemplateBinding}"
@@ -117,8 +108,8 @@
                                             DisplayDateStart="{TemplateBinding DisplayDateStart}"
                                             FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                                             IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                            SelectedDate="{TemplateBinding SelectedDate,
-                                                                           Mode=TwoWay}" />
+                                            SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay}">
+                                        </Calendar>
                                     </Border>
                                 </Popup>
                             </Grid>
@@ -129,6 +120,12 @@
 
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^.clearButton, ^.ClearButton">
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}"></Setter>
+            </Style>
+        </Style>
 
         <Style Selector="^.Large">
             <Style Selector="^ /template/ TextBox#PART_TextBox">
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
index 12236a1..8d9b99c 100644
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -80,7 +80,7 @@
                             Content="{DynamicResource TextBoxClearButtonData}"
                             IsVisible="False"
                             Command="{Binding $parent[ComboBox].Clear}"
-                            Theme="{DynamicResource ButtonInputInnerButton}" />
+                            Theme="{DynamicResource InnerIconButton}" />
                         <Border
                             x:Name="DropDownOverlay"
                             Grid.Column="2"
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
index a27f881..18abfa0 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -232,7 +232,7 @@
                             Command="{Binding $parent[DatePicker].Clear}"
                             Content="{DynamicResource TextBoxClearButtonData}"
                             IsVisible="False"
-                            Theme="{DynamicResource ButtonInputInnerButton}" />
+                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index b85e616..1c82979 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -255,7 +255,7 @@
                             Command="{Binding $parent[TimePicker].Clear}"
                             Content="{DynamicResource TextBoxClearButtonData}"
                             IsVisible="False"
-                            Theme="{DynamicResource ButtonInputInnerButton}" />
+                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>