diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
index 90e3b0f..2c0e9e9 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
@@ -11,5 +11,7 @@
         <DatePicker />
         <DatePicker DayFormat="d (ddd)" YearVisible="False" />
         <DatePicker IsEnabled="False" />
+        <DatePicker Classes="Large" />
+        <DatePicker Classes="Small" />
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index 42baa9a..c58465c 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -12,5 +12,7 @@
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />
         <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
+        <TimePicker Classes="Large" />
+        <TimePicker Classes="Small" />
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
index c74cd20..0997b81 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -124,13 +124,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="Height" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="BorderThickness" Value="{DynamicResource DateTimePickerButtonBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerButtonCornerRadius}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
@@ -230,6 +229,12 @@
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
+        </Style>
     </ControlTheme>
 
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 3ed461a..e0d2d98 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -127,8 +127,7 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="Height" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
@@ -248,5 +247,12 @@
         <Style Selector="^:hasnotime /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
+
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml
index fb1d27b..95a582a 100644
--- a/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml
@@ -39,4 +39,11 @@
     <Thickness x:Key="DateTimePickerFlyoutPadding">16 0</Thickness>
     <Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
 
+    <x:Double x:Key="DateTimePickerButtonSmallHeight">24</x:Double>
+    <x:Double x:Key="DateTimePickerButtonDefaultHeight">32</x:Double>
+    <x:Double x:Key="DateTimePickerButtonLargeHeight">40</x:Double>
+
+    <Thickness x:Key="DateTimePickerButtonBorderThickness">1</Thickness>
+    <CornerRadius x:Key="DateTimePickerButtonCornerRadius">3</CornerRadius>
+
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
index a337d88..cf90300 100644
--- a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -39,4 +39,10 @@
     <Thickness x:Key="DateTimePickerFlyoutPadding">16 0</Thickness>
     <Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
 
+    <x:Double x:Key="DateTimePickerButtonSmallHeight">24</x:Double>
+    <x:Double x:Key="DateTimePickerButtonDefaultHeight">32</x:Double>
+    <x:Double x:Key="DateTimePickerButtonLargeHeight">40</x:Double>
+
+    <Thickness x:Key="DateTimePickerButtonBorderThickness">1</Thickness>
+    <CornerRadius x:Key="DateTimePickerButtonCornerRadius">3</CornerRadius>
 </ResourceDictionary>