diff --git a/demo/Ursa.Demo/Pages/BadgeDemo.axaml b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
index 642cefa..5d2f3d0 100644
--- a/demo/Ursa.Demo/Pages/BadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
@@ -8,126 +8,254 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="24"
-        HorizontalAlignment="Left"
-        ClipToBounds="False">
-        <StackPanel.Styles>
-            <Style Selector="u|Badge">
-                <Setter Property="Margin" Value="14" />
-            </Style>
-            <Style Selector="Border">
-                <Setter Property="Background" Value="Orange" />
-            </Style>
-        </StackPanel.Styles>
-        <TextBlock Text="Hello" />
-        <u:Badge
-            HorizontalAlignment="Center"
-            BadgeContent="500"
-            OverflowCount="100">
-            <Border Width="100" Height="50" />
-        </u:Badge>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge BadgeContent="5" CornerPosition="TopLeft">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="TopRight">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="BottomLeft">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="BottomRight">
-                <Border Width="100" Height="50" />
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
+        <StackPanel
+            Margin="24"
+            HorizontalAlignment="Left"
+            ClipToBounds="False">
+
+            <StackPanel.Styles>
+                <Style Selector="u|Badge">
+                    <Setter Property="Margin" Value="14" />
+                </Style>
+                <Style Selector="u|Badge > Border">
+                    <Setter Property="Background" Value="Orange" />
+                    <Setter Property="CornerRadius" Value="8" />
+                </Style>
+            </StackPanel.Styles>
+
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    HorizontalAlignment="Center"
+                    Header="500"
+                    OverflowCount="100">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="SUCCEED!">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="Hello" />
+                <u:Badge Header="Hello" Dot="True" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="5" CornerPosition="TopLeft">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="TopRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="BottomLeft">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="BottomRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="TopLeft"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="TopRight"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="BottomLeft"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="BottomRight"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <u:Badge HorizontalAlignment="Stretch" Header="VIP">
+                <Border Height="50" />
             </u:Badge>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Light Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Inverted Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="URSA"
+                    Classes="Primary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Secondary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Tertiary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Warning"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Danger"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Success"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Primary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Secondary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Tertiary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Warning"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Danger"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Success"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <Border Background="LightGray" CornerRadius="4">
+                <StackPanel Orientation="Horizontal">
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Primary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Primary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Secondary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Tertiary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Warning"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Danger"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                </StackPanel>
+            </Border>
         </StackPanel>
-        <u:Badge BadgeContent="SUCCEED!">
-            <Border Width="100" Height="50" />
-        </u:Badge>
-        <u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
-            <Border Height="50" />
-        </u:Badge>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="TopLeft"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="TopRight"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="BottomLeft"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="BottomRight"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge BadgeContent="URSA" Classes="Primary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Secondary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Tertiary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Warning">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Danger">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Primary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Secondary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Tertiary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Warning"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Danger"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
-            <u:Badge
-                VerticalAlignment="Center"
-                BadgeContent="Hello"
-                Dot="True" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/Badge.axaml b/src/Ursa.Themes.Semi/Controls/Badge.axaml
index fdb21ed..4402f05 100644
--- a/src/Ursa.Themes.Semi/Controls/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Badge.axaml
@@ -9,22 +9,23 @@
 
     <ControlTheme x:Key="{x:Type u:Badge}" TargetType="{x:Type u:Badge}">
         <!--  Set a very large corner radius to achieve pill look.  -->
-        <Setter Property="u:Badge.CornerRadius" Value="100" />
-        <Setter Property="u:Badge.FontSize" Value="14" />
-        <Setter Property="u:Badge.Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
-        <Setter Property="u:Badge.ClipToBounds" Value="False" />
-        <Setter Property="u:Badge.HorizontalAlignment" Value="Center" />
-        <Setter Property="u:Badge.VerticalAlignment" Value="Center" />
-        <Setter Property="u:Badge.BorderThickness" Value="{DynamicResource BadgeBorderThickness}" />
-        <Setter Property="u:Badge.UseLayoutRounding" Value="False" />
-        <Setter Property="u:Badge.BorderBrush" Value="{DynamicResource BadgeBorderBrush}" />
-        <Setter Property="u:Badge.Template">
+        <Setter Property="CornerRadius" Value="{DynamicResource BadgeCornerRadius}" />
+        <Setter Property="BadgeFontSize" Value="{DynamicResource BadgeFontSize}" />
+        <Setter Property="Foreground" Value="{DynamicResource BadgeForeground}" />
+        <Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="BorderThickness" Value="{DynamicResource BadgeBorderThickness}" />
+        <Setter Property="UseLayoutRounding" Value="False" />
+        <Setter Property="BorderBrush" Value="{DynamicResource BadgeBorderBrush}" />
+        <Setter Property="CornerPosition" Value="{DynamicResource BadgeCornerPosition}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type u:Badge}">
                 <Grid
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     ClipToBounds="False">
-
                     <ContentPresenter
                         Name="{x:Static u:Badge.PART_ContentPresenter}"
                         Margin="{TemplateBinding Padding}"
@@ -34,8 +35,8 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}" />
                     <Border
                         Name="{x:Static u:Badge.PART_BadgeContainer}"
-                        MinWidth="{DynamicResource BadgeHeight}"
-                        MinHeight="{DynamicResource BadgeHeight}"
+                        MinWidth="{DynamicResource BadgeMinWidth}"
+                        MinHeight="{DynamicResource BadgeMinHeight}"
                         Padding="{DynamicResource BadgePadding}"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Top"
@@ -43,21 +44,21 @@
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
+                        IsVisible="{Binding !!Header, RelativeSource={RelativeSource TemplatedParent}}"
                         RenderTransformOrigin=".5,.5"
                         Theme="{TemplateBinding BadgeTheme}"
                         UseLayoutRounding="False">
                         <ContentPresenter
-                            Name="{x:Static u:Badge.PART_BadgeContentPresenter}"
+                            Name="{x:Static u:Badge.PART_HeaderPresenter}"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             Focusable="False"
                             IsTabStop="False"
-                            TextElement.FontSize="{TemplateBinding FontSize}"
-                            TextElement.Foreground="{DynamicResource BadgeForeground}">
+                            TextElement.FontSize="{TemplateBinding BadgeFontSize}"
+                            TextElement.Foreground="{TemplateBinding Foreground}">
                             <ContentPresenter.Content>
                                 <MultiBinding Converter="{StaticResource BadgeContentConverter}">
-                                    <Binding Path="BadgeContent" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Header" RelativeSource="{RelativeSource TemplatedParent}" />
                                     <Binding Path="OverflowCount" RelativeSource="{RelativeSource TemplatedParent}" />
                                 </MultiBinding>
                             </ContentPresenter.Content>
@@ -83,7 +84,7 @@
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
                         <Border
                             Name="{x:Static u:Badge.PART_BadgeContainer}"
-                            Width="{DynamicResource BadgeDotHeight}"
+                            Width="{DynamicResource BadgeDotWidth}"
                             Height="{DynamicResource BadgeDotHeight}"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Top"
@@ -91,7 +92,7 @@
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}"
-                            IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
+                            IsVisible="{Binding !!Header, RelativeSource={RelativeSource TemplatedParent}}"
                             RenderTransformOrigin=".5,.5" />
                     </Grid>
                 </ControlTemplate>
@@ -130,5 +131,56 @@
         <Style Selector="^.Danger">
             <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
+        </Style>
+
+        <Style Selector="^.Light">
+            <Style Selector="^.Primary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Secondary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Tertiary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Warning">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Danger">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Success">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Inverted">
+            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
+            <Style Selector="^.Primary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
+            </Style>
+            <Style Selector="^.Secondary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
+            </Style>
+            <Style Selector="^.Tertiary">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
+            </Style>
+            <Style Selector="^.Warning">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
+            </Style>
+            <Style Selector="^.Danger">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
+            </Style>
+            <Style Selector="^.Success">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
+            </Style>
+        </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
index b92979b..6d97358 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
@@ -1,10 +1,33 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="White" />
-    <SolidColorBrush x:Key="BadgeForeground" Color="White" />
+    <SolidColorBrush x:Key="BadgeBorderBrush" Color="#1C1F23" />
+    <SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" />
+    <!-- Solid -->
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" />
     <SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#FF888D92" />
     <SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFFFAE43" />
     <SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FFFC725A" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" />
+    <!-- Light -->
+    <SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#FF003D8F" />
+    <SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#FF40B4F3" />
+    <SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#FF004B83" />
+    <SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#FF888D92" />
+    <SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FF7E3100" />
+    <SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FF8E0805" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" />
+    <!-- Inverted -->
+    <SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#FF40B4F3" />
+    <SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#FF888D92" />
+    <SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
index 36e14da..6128269 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
@@ -1,10 +1,33 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="BadgeBorderBrush" Color="White"/>
     <SolidColorBrush x:Key="BadgeForeground" Color="White" />
+    <!-- Solid -->
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />
     <SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#6B7075" />
     <SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FC8800" />
     <SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#F93920" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
+    <!-- Light -->
+    <SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#D4ECFF" />
+    <SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#0095EE" />
+    <SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#CEEEFC" />
+    <SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#6B7075" />
+    <SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FC8800" />
+    <SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FFEFD0" />
+    <SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#F93920" />
+    <SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FEE0D5" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#3BB346" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#D0F0D1" />
+    <!-- Inverted -->
+    <SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="White" />
+
+    <SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077F0" />
+    <SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#0095EE" />
+    <SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#6B7075" />
+    <SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FC8800" />
+    <SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#F93920" />
+    <SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
index 688be66..7c39786 100644
--- a/src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
@@ -1,8 +1,14 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <x:Double x:Key="BadgeHeight">18</x:Double>
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa">
+    <x:Double x:Key="BadgeMinWidth">18</x:Double>
+    <x:Double x:Key="BadgeMinHeight">18</x:Double>
+    <x:Double x:Key="BadgeDotWidth">8</x:Double>
     <x:Double x:Key="BadgeDotHeight">8</x:Double>
     <Thickness x:Key="BadgePadding">6,0</Thickness>
     <Thickness x:Key="BadgeBorderThickness">1</Thickness>
-    <x:Double x:Key="BadgeFontSize">8</x:Double>
-</ResourceDictionary>
+    <x:Double x:Key="BadgeFontSize">10</x:Double>
+    <CornerRadius x:Key="BadgeCornerRadius">100</CornerRadius>
+    <common:CornerPosition x:Key="BadgeCornerPosition">TopRight</common:CornerPosition>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa/Controls/Badge.cs b/src/Ursa/Controls/Badge.cs
index 9956352..23124ed 100644
--- a/src/Ursa/Controls/Badge.cs
+++ b/src/Ursa/Controls/Badge.cs
@@ -1,7 +1,6 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
-using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
 using Avalonia.Interactivity;
 using Avalonia.Media;
@@ -10,18 +9,14 @@ using Ursa.Common;
 
 namespace Ursa.Controls;
 
-[TemplatePart(PART_ContentPresenter, typeof(ContentPresenter))]
 [TemplatePart(PART_BadgeContainer, typeof(Border))]
-[TemplatePart(PART_BadgeContentPresenter, typeof(ContentPresenter))]
-public class Badge: ContentControl
+public class Badge: HeaderedContentControl
 {
     public const string PART_ContentPresenter = "PART_ContentPresenter";
     public const string PART_BadgeContainer = "PART_BadgeContainer";
-    public const string PART_BadgeContentPresenter = "PART_BadgeContentPresenter";
-    
-    private ContentPresenter? _content;
+    public const string PART_HeaderPresenter = "PART_HeaderPresenter";
+
     private Border? _badgeContainer;
-    private ContentPresenter? _badgeContent;
 
     public static readonly StyledProperty<ControlTheme> BadgeThemeProperty = AvaloniaProperty.Register<Badge, ControlTheme>(
         nameof(BadgeTheme));
@@ -39,14 +34,6 @@ public class Badge: ContentControl
         set => SetValue(DotProperty, value);
     }
 
-    public static readonly StyledProperty<object?> BadgeContentProperty = AvaloniaProperty.Register<Badge, object?>(
-        nameof(BadgeContent));
-    public object? BadgeContent
-    {
-        get => GetValue(BadgeContentProperty);
-        set => SetValue(BadgeContentProperty, value);
-    }
-
     public static readonly StyledProperty<CornerPosition> CornerPositionProperty = AvaloniaProperty.Register<Badge, CornerPosition>(
         nameof(CornerPosition));
     public CornerPosition CornerPosition
@@ -63,17 +50,24 @@ public class Badge: ContentControl
         set => SetValue(OverflowCountProperty, value);
     }
 
+    public static readonly StyledProperty<double> BadgeFontSizeProperty = AvaloniaProperty.Register<Badge, double>(
+        nameof(BadgeFontSize));
+
+    public double BadgeFontSize
+    {
+        get => GetValue(BadgeFontSizeProperty);
+        set => SetValue(BadgeFontSizeProperty, value);
+    }
+
     static Badge()
     {
-        BadgeContentProperty.Changed.AddClassHandler<Badge>((badge, args) => badge.UpdateBadgePosition());
+        HeaderProperty.Changed.AddClassHandler<Badge>((badge, args) => badge.UpdateBadgePosition());
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        _content = e.NameScope.Find<ContentPresenter>(PART_ContentPresenter);
         _badgeContainer = e.NameScope.Find<Border>(PART_BadgeContainer);
-        _badgeContent = e.NameScope.Find<ContentPresenter>(PART_BadgeContentPresenter);
     }
 
     protected override void OnLoaded(RoutedEventArgs e)
@@ -92,7 +86,7 @@ public class Badge: ContentControl
     {
         var vertical = CornerPosition is CornerPosition.BottomLeft or CornerPosition.BottomRight ? 1 : -1;
         var horizontal = CornerPosition is CornerPosition.TopRight or CornerPosition.BottomRight ? 1 : -1;
-        if (_badgeContainer is not null && _content?.Child is not null)
+        if (_badgeContainer is not null && base.Presenter?.Child is not null)
         {
             _badgeContainer.RenderTransform = new TransformGroup()
             {