diff --git a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
new file mode 100644
index 0000000..cfcf65e
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
@@ -0,0 +1,12 @@
+<UserControl 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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
+    <ScrollViewer>
+        <HeaderedContentControl Header="Semi Design">
+            <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+        </HeaderedContentControl>
+    </ScrollViewer>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml.cs
new file mode 100644
index 0000000..fa951c1
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml.cs
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HeaderedContentControlDemo : UserControl
+{
+    public HeaderedContentControlDemo()
+    {
+        InitializeComponent();
+    }
+}
\ 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 39aa54d..13b37f7 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -123,6 +123,9 @@
             <TabItem Header="GridSplitter">
                 <pages:GridSplitter />
             </TabItem>
+            <TabItem Header="HeaderedContentControl">
+                <pages:HeaderedContentControlDemo />
+            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 1674a64..7933d64 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -24,6 +24,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ItemsControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ListBox.axaml" />
diff --git a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
new file mode 100644
index 0000000..68388f2
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
@@ -0,0 +1,48 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Width" Value="400" />
+        <Setter Property="Height" Value="200" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="HeaderedContentControl">
+                <Border
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}">
+                    <Grid RowDefinitions="Auto,Auto,*">
+                        <ContentPresenter
+                            Grid.Row="0"
+                            FontWeight="Bold"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Stretch"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Margin="16" />
+                        <Rectangle
+                            Grid.Row="1"
+                            Fill="{TemplateBinding BorderBrush}"
+                            Height="1" />
+                        <ContentPresenter
+                            Grid.Row="2"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Margin="16" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/Dark.axaml b/src/Semi.Avalonia/Themes/Dark/Dark.axaml
index b588cdd..03fb808 100644
--- a/src/Semi.Avalonia/Themes/Dark/Dark.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Dark.axaml
@@ -19,6 +19,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DropDownButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/GridSplitter.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ListBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ManagedFileChooser.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
new file mode 100644
index 0000000..2fe0254
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#F9F9F9" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
new file mode 100644
index 0000000..891a7ad
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#1C1F23" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 2116c6b..3eb48db 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -18,6 +18,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DropDownButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/GridSplitter.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ListBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ManagedFileChooser.axaml" />