diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
new file mode 100644
index 0000000..1c7e4f2
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -0,0 +1,13 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TimePickerDemo"
+    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">
+        <TimePicker />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs
new file mode 100644
index 0000000..71ec596
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TimePickerDemo : UserControl
+{
+    public TimePickerDemo()
+    {
+        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 4936ae5..b5b7751 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -81,6 +81,9 @@
         <TabItem Header="TextBox">
             <pages:TextBoxDemo />
         </TabItem>
+        <TabItem Header="TimePicker">
+            <pages:TimePickerDemo />
+        </TabItem>
         <TabItem Header="ToggleButton">
             <pages:ToggleButtonDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index f0f76bc..21ea127 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -33,6 +33,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabStrip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/TimePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Tooltip.axaml" />
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
new file mode 100644
index 0000000..5ca9928
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -0,0 +1,274 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button">
+        <Setter Property="RenderTransform" Value="none" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" />
+            <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" />
+        </Style>
+
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" />
+            <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" />
+            <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
+        <Setter Property="Width" Value="242" />
+        <Setter Property="MinWidth" Value="242" />
+        <Setter Property="MaxHeight" Value="398" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="Background"
+                    MaxHeight="398"
+                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                        <Grid Name="PART_PickerContainer">
+                            <!--  Ignore col defs here, set in code  -->
+                            <Panel Name="PART_HourHost" Grid.Column="0">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_HourSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="Hour"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Panel Name="PART_MinuteHost" Grid.Column="2">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_MinuteSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="Minute"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Panel Name="PART_PeriodHost" Grid.Column="4">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_PeriodSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="TimePeriod"
+                                        ShouldLoop="False" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Rectangle
+                                x:Name="HighlightRect"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="5"
+                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
+                                VerticalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
+                                ZIndex="-1" />
+                            <Rectangle
+                                Name="PART_FirstSpacer"
+                                Grid.Column="1"
+                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                HorizontalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                            <Rectangle
+                                Name="PART_SecondSpacer"
+                                Grid.Column="3"
+                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                HorizontalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                        </Grid>
+
+                        <Grid
+                            Name="AcceptDismissGrid"
+                            Grid.Row="1"
+                            ColumnDefinitions="*,*">
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="{DynamicResource TimePickerSpacerThemeWidth}"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                            <Button
+                                Name="PART_AcceptButton"
+                                Grid.Column="0"
+                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Theme="{StaticResource FluentDateTimePickerButton}">
+                                <Path
+                                    Data="M0.5,8.5 5,13.5 15.5,3"
+                                    Stroke="{Binding $parent[Button].Foreground}"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="0.75" />
+                            </Button>
+                            <Button
+                                Name="PART_DismissButton"
+                                Grid.Column="1"
+                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                FontSize="16"
+                                Theme="{StaticResource FluentDateTimePickerButton}">
+                                <Path
+                                    Data="M2,2 14,14 M2,14 14 2"
+                                    Stroke="{Binding $parent[Button].Foreground}"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="0.75" />
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Panel">
+            <Style Selector="^:pointerover RepeatButton">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            x:Name="PART_FlyoutButton"
+                            MinWidth="{DynamicResource TimePickerThemeMinWidth}"
+                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Top"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            Theme="{StaticResource FluentTimePickerFlyoutButton}">
+
+                            <Grid Name="PART_FlyoutButtonContentGrid">
+                                <!--  Ignore col defs here, set in code  -->
+                                <Border
+                                    x:Name="PART_FirstPickerHost"
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_HourTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_FirstColumnDivider"
+                                    Grid.Column="1"
+                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                                <Border
+                                    x:Name="PART_SecondPickerHost"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_MinuteTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_SecondColumnDivider"
+                                    Grid.Column="3"
+                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                                <Border
+                                    x:Name="PART_ThirdPickerHost"
+                                    Grid.Column="4"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_PeriodTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+                            </Grid>
+                        </Button>
+
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            PlacementMode="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <TimePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
+
+                    </Grid>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:disabled /template/ Rectangle">
+            <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
+        </Style>
+
+        <Style Selector="^:hasnotime /template/ Button#PART_FlyoutButton TextBlock">
+            <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}" />
+        </Style>
+
+        <Style Selector="^:error /template/ Button#PART_FlyoutButton">
+            <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index ba61480..5026287 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -23,6 +23,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TimePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Tooltip.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
new file mode 100644
index 0000000..9017e8d
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -0,0 +1,3 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+</ResourceDictionary>