diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index edb64b9..f62cae8 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -11,85 +11,122 @@
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel Spacing="20">
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Top">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Left">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Right">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Bottom">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabStrip>
-                    <TabStripItem>Tab 1</TabStripItem>
-                    <TabStripItem>Tab 2</TabStripItem>
-                </TabStrip>
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Top"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Left"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Bottom"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Right"
-                    Theme="{DynamicResource ScrollTabControl}" />
+        <StackPanel>
+            <Border
+                Margin="8"
+                HorizontalAlignment="Left"
+                Theme="{StaticResource RadioButtonGroupBorder}">
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
+                    <Dock>Left</Dock>
+                    <Dock>Bottom</Dock>
+                    <Dock>Right</Dock>
+                    <Dock>Top</Dock>
+                </ListBox>
             </Border>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <StackPanel
+                            Margin="8"
+                            Orientation="Horizontal"
+                            Spacing="8">
+                            <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
+                            <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
+                        </StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollLineTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            MinHeight="150"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border
+                            Height="300"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollCardTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollButtonTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml b/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
deleted file mode 100644
index 43e3b8e..0000000
--- a/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
+++ /dev/null
@@ -1,49 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabControl">
-                <Border
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <DockPanel>
-                        <ScrollViewer
-                            DockPanel.Dock="Left"
-                            Name="PART_ScrollViewer"
-                            VerticalScrollBarVisibility="Auto">
-                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                                <ItemsPresenter Name="PART_ItemsPresenter">
-                                    <ItemsPresenter.ItemsPanel>
-                                        <ItemsPanelTemplate>
-                                            <StackPanel />
-                                        </ItemsPanelTemplate>
-                                    </ItemsPresenter.ItemsPanel>
-                                </ItemsPresenter>
-                                <Border Name="PART_BorderSeparator"
-                                        Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-                            </Panel>
-                        </ScrollViewer>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
-                    </DockPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Left" />
-        </Style>
-        <Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Themes/_index.axaml b/demo/Semi.Avalonia.Demo/Themes/_index.axaml
index 6e47828..cfccca3 100644
--- a/demo/Semi.Avalonia.Demo/Themes/_index.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/_index.axaml
@@ -4,7 +4,6 @@
         <ResourceInclude Source="ColorItemControl.axaml" />
         <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
         <ResourceInclude Source="ShadowGroupControl.axaml" />
-        <ResourceInclude Source="TabMenu.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
index bbe153e..ee6036e 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
@@ -4,12 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class TabControlDemoViewModel: ObservableObject
+public class TabControlDemoViewModel : ObservableObject
 {
-    public ObservableCollection<string> Items { get; set; }
-
-    public TabControlDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
-    }
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 200).Select(a => "Tab " + a));
 }
\ 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 6e4427b..9288411 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -78,10 +78,19 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
             Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
-            Theme="{DynamicResource NavigationTab}">
+            Theme="{DynamicResource ScrollLineTabControl}">
+            <TabControl.Styles>
+                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
+                    <Setter Property="IsVisible" Value="False" />
+                </Style>
+            </TabControl.Styles>
+            <TabControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel />
+                </ItemsPanelTemplate>
+            </TabControl.ItemsPanel>
             <TabItem Header="Overview">
                 <pages:Overview />
             </TabItem>
diff --git a/src/Semi.Avalonia/Controls/TabControl.axaml b/src/Semi.Avalonia/Controls/TabControl.axaml
index e37f12d..6710481 100644
--- a/src/Semi.Avalonia/Controls/TabControl.axaml
+++ b/src/Semi.Avalonia/Controls/TabControl.axaml
@@ -2,10 +2,25 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
+    <Design.PreviewWith>
+        <StackPanel Width="400" Height="400" Margin="20">
+            <TabControl
+                Theme="{DynamicResource LineTabControl}"
+                TabStripPlacement="Top">
+                <TabItem Header="文档">
+                    <TextBlock Text="Content1" />
+                </TabItem>
+                <TabItem Header="快速起步" IsEnabled="False">
+                    <TextBlock Text="Content2" />
+                </TabItem>
+                <TabItem Header="帮助" IsSelected="True">
+                    <TextBlock Text="Content3" />
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="BaseTabControl" TargetType="TabControl">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabControl">
                 <Border
@@ -17,8 +32,10 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                            <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
-                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            <Border Name="PART_BorderSeparator" />
                         </Panel>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
@@ -32,43 +49,132 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-            <Setter Property="Orientation" Value="Vertical" />
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <WrapPanel Orientation="Vertical" />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-            <Setter Property="Orientation" Value="Vertical" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Left" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Right" />
+
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="Background" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
         </Style>
+
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
         <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
-        <!--
-        <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
-            <Setter Property="Margin" Value="8" />
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
-        -->
     </ControlTheme>
 
-    <ControlTheme x:Key="ScrollTabControl" TargetType="TabControl">
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
+    <ControlTheme
+        x:Key="{x:Type TabControl}"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+
+        <Style Selector="^.ReverseSeparator">
+            <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Right" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Left]">
+                            <Setter Property="BorderThickness" Value="0 0 2 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Right]">
+                            <Setter Property="BorderThickness" Value="2 0 0 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource LineTabItem}" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabItem}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabControl">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <Border Name="PART_BorderSeparator" />
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ButtonTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabItem}" />
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+
+    <!-- ScrollTabControl -->
+    <ControlTheme x:Key="BaseScrollTabControl" TargetType="TabControl">
         <Setter Property="ItemsPanel">
             <ItemsPanelTemplate>
                 <VirtualizingStackPanel Orientation="Horizontal" />
@@ -85,10 +191,15 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                            <ScrollViewer Name="PART_ScrollViewer">
-                                <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12" />
+                            <ScrollViewer
+                                Name="PART_ScrollViewer"
+                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                <ItemsPresenter
+                                    Name="PART_ItemsPresenter"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
-                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            <Border Name="PART_BorderSeparator" />
                         </Panel>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
@@ -102,52 +213,149 @@
             </ControlTemplate>
         </Setter>
 
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="Background" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+        </Style>
+
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-            <Style Selector="^ /template/ ItemsPresenter">
-                <Setter Property="ItemsPanel">
-                    <ItemsPanelTemplate>
-                        <VirtualizingStackPanel Orientation="Vertical" />
-                    </ItemsPanelTemplate>
-                </Setter>
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Left" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Left] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Right" />
-            <Setter Property="Margin" Value="0 0 12 0" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <VirtualizingStackPanel />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
+
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
-            <Setter Property="Margin" Value="0 0 0 12" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Top] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
         </Style>
         <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
-        <Style Selector="^[TabStripPlacement=Bottom] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+
+        <Style Selector="^.ReverseSeparator">
+            <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Right" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Left]">
+                            <Setter Property="BorderThickness" Value="0 0 2 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Right]">
+                            <Setter Property="BorderThickness" Value="2 0 0 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollLineTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource LineTabItem}" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollCardTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabItem}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabControl">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <Border Name="PART_BorderSeparator" />
+                            <ScrollViewer
+                                Name="PART_ScrollViewer"
+                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                <ItemsPresenter
+                                    Name="PART_ItemsPresenter"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            </ScrollViewer>
+                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollButtonTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabItem}" />
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index 2c44f96..aa900ae 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -2,132 +2,231 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Theme: Card, Strip  default is Strip  -->
     <Design.PreviewWith>
-        <StackPanel Margin="20">
-            <TabItem Header="Hello">
-                <TextBlock Text="Content" />
-            </TabItem>
+        <StackPanel
+            Width="400"
+            Height="400"
+            Margin="20">
+            <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
+                <TabItem Header="文档">
+                    <TextBlock Text="Content1" />
+                </TabItem>
+                <TabItem Header="快速起步">
+                    <TextBlock Text="Content2" />
+                </TabItem>
+                <TabItem Header="帮助" IsSelected="True">
+                    <TextBlock Text="Content3" />
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </Design.PreviewWith>
 
-    <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
-        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+    <ControlTheme x:Key="BaseTabItem" TargetType="TabItem">
         <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="8 4" />
-        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
-                <Border
-                    Name="PART_LayoutRoot"
+                <ContentPresenter
+                    Name="PART_HeaderPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
-                        <ContentPresenter
-                            Name="PART_ContentPresenter"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
-                        <Border
-                            Name="PART_SelectedPipe"
-                            Background="{DynamicResource TabItemLinePipeBackground}"
-                            IsVisible="True"
-                            UseLayoutRounding="False" />
-                    </Panel>
-                </Border>
+                    Content="{TemplateBinding Header}"
+                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
 
-        <!--  Selected state  -->
-        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
-            <Setter Property="Background" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
-        </Style>
-
-        <!--  Selected Pressed state  -->
-        <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
-        </Style>
-
-        <!--  Disabled state  -->
-        <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
-        </Style>
-
-        <!--  TabStripPlacement States Group  -->
-        <Style Selector="^[TabStripPlacement=Top]">
-            <Style Selector="^ /template/Border#PART_SelectedPipe">
-                <Setter Property="Height" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-                <Setter Property="VerticalAlignment" Value="Bottom" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,0,0,4" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Bottom]">
-            <Style Selector="^ /template/Border#PART_SelectedPipe">
-                <Setter Property="Height" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-                <Setter Property="VerticalAlignment" Value="Top" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,4,0,0" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Left]">
-            <Style Selector="^/template/ Border#PART_SelectedPipe">
-                <Setter Property="Width" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Left" />
-                <Setter Property="VerticalAlignment" Value="Stretch" />
-            </Style>
-            <Style Selector="^ /template/ Label#PART_ContentPresenter">
-                <Setter Property="Margin" Value="8,0,0,0" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right]">
-            <Setter Property="HorizontalContentAlignment" Value="Right" />
-            <Style Selector="^ /template/ Border#PART_SelectedPipe">
-                <Setter Property="Width" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Right" />
-                <Setter Property="VerticalAlignment" Value="Stretch" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,0,8,0" />
-            </Style>
         </Style>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="{x:Type TabItem}"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="Padding" Value="8 4" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="BorderThickness" Value="0 0 0 2" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="BorderThickness" Value="0 2 0 0" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="BorderThickness" Value="2 0 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="BorderThickness" Value="0 0 2 0" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+                <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="Margin" Value="0 0 24 0" />
+            <Setter Property="Padding" Value="4 16 4 14" />
+            <Setter Property="BorderThickness" Value="0 0 0 2" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="Margin" Value="0 0 24 0" />
+            <Setter Property="Padding" Value="4 14 4 16" />
+            <Setter Property="BorderThickness" Value="0 2 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="BorderThickness" Value="2 0 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="BorderThickness" Value="0 0 2 0" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Padding" Value="12 0" />
+            <Setter Property="CornerRadius" Value="3 3 0 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 1 0" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Padding" Value="12 0" />
+            <Setter Property="CornerRadius" Value="0 0 3 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 0 1 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="3 0 0 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 0 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="0 3 3 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="0 1 1 1" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ButtonTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+            <Setter Property="TabItem.Margin" Value="0 0 8 0" />
+            <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+            <Setter Property="TabItem.MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="TabItem.Padding" Value="12 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Setter Property="TabItem.Margin" Value="0 0 0 8" />
+            <Setter Property="TabItem.Padding" Value="12 8" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Index.axaml b/src/Semi.Avalonia/Index.axaml
index 334aa54..1f16c58 100644
--- a/src/Semi.Avalonia/Index.axaml
+++ b/src/Semi.Avalonia/Index.axaml
@@ -20,4 +20,6 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
+
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/_index.axaml" />
 </Styles>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/SemiTheme.axaml b/src/Semi.Avalonia/SemiTheme.axaml
index eea19b2..cbf8643 100644
--- a/src/Semi.Avalonia/SemiTheme.axaml
+++ b/src/Semi.Avalonia/SemiTheme.axaml
@@ -21,4 +21,6 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
+
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/_index.axaml" />
 </Styles>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Styles/TabControl.axaml b/src/Semi.Avalonia/Styles/TabControl.axaml
new file mode 100644
index 0000000..eaa7bc6
--- /dev/null
+++ b/src/Semi.Avalonia/Styles/TabControl.axaml
@@ -0,0 +1,5 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style Selector="TabControl TabItem:nth-last-child(1)">
+        <Setter Property="Margin" Value="0" />
+    </Style>
+</Styles>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Styles/_index.axaml b/src/Semi.Avalonia/Styles/_index.axaml
new file mode 100644
index 0000000..574fa22
--- /dev/null
+++ b/src/Semi.Avalonia/Styles/_index.axaml
@@ -0,0 +1,3 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/TabControl.axaml" />
+</Styles>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/TabControl.axaml b/src/Semi.Avalonia/Themes/Dark/TabControl.axaml
index d1981be..de620d4 100644
--- a/src/Semi.Avalonia/Themes/Dark/TabControl.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TabControl.axaml
@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorBorder" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
index dc8da64..af5e3d0 100644
--- a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
@@ -5,6 +5,18 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/HighContrast/TabControl.axaml b/src/Semi.Avalonia/Themes/HighContrast/TabControl.axaml
index d1981be..bf22944 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/TabControl.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/TabControl.axaml
@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorWindowText" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml b/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
index 8e8b0c3..ced4623 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
@@ -7,4 +7,16 @@
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorWindowText" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/TabControl.axaml b/src/Semi.Avalonia/Themes/Light/TabControl.axaml
index d1981be..de620d4 100644
--- a/src/Semi.Avalonia/Themes/Light/TabControl.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TabControl.axaml
@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorBorder" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/TabItem.axaml b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
index dc8da64..af5e3d0 100644
--- a/src/Semi.Avalonia/Themes/Light/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
@@ -5,6 +5,18 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/TabItem.axaml b/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
index bd6b384..9e017ba 100644
--- a/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="TabItemCardDefaultHeight" ResourceKey="SemiHeightControlDefault" />
 </ResourceDictionary>
\ No newline at end of file