diff --git a/demo/Ursa.Demo/Pages/BadgeDemo.axaml b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
index 4a3bfd0..642cefa 100644
--- a/demo/Ursa.Demo/Pages/BadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
@@ -16,120 +16,78 @@
             <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"
-                Background="LightYellow" />
+            <Border Width="100" Height="50" />
         </u:Badge>
         <StackPanel Orientation="Horizontal">
             <u:Badge BadgeContent="5" CornerPosition="TopLeft">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="5" CornerPosition="TopRight">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="5" CornerPosition="BottomLeft">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="5" CornerPosition="BottomRight">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
         </StackPanel>
         <u:Badge BadgeContent="SUCCEED!">
-            <Border
-                Width="100"
-                Height="50"
-                Background="LightYellow" />
+            <Border Width="100" Height="50" />
         </u:Badge>
         <u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
-            <Border Height="50" Background="LightYellow" />
+            <Border Height="50" />
         </u:Badge>
         <StackPanel Orientation="Horizontal">
             <u:Badge
                 BadgeContent="VIP"
                 CornerPosition="TopLeft"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="VIP"
                 CornerPosition="TopRight"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="VIP"
                 CornerPosition="BottomLeft"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="VIP"
                 CornerPosition="BottomRight"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <u:Badge BadgeContent="URSA" Classes="Primary">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="URSA" Classes="Secondary">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="URSA" Classes="Tertiary">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="URSA" Classes="Warning">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge BadgeContent="URSA" Classes="Danger">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
@@ -137,46 +95,31 @@
                 BadgeContent="URSA"
                 Classes="Primary"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="URSA"
                 Classes="Secondary"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="URSA"
                 Classes="Tertiary"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="URSA"
                 Classes="Warning"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
             <u:Badge
                 BadgeContent="URSA"
                 Classes="Danger"
                 Dot="True">
-                <Border
-                    Width="100"
-                    Height="50"
-                    Background="LightYellow" />
+                <Border Width="100" Height="50" />
             </u:Badge>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
index f621202..b92979b 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <SolidColorBrush x:Key="BadgeBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="White" />
     <SolidColorBrush x:Key="BadgeForeground" Color="White" />
-    <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" />
+    <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>
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
index f621202..36e14da 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <SolidColorBrush x:Key="BadgeBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="#1C1F23" />
     <SolidColorBrush x:Key="BadgeForeground" Color="White" />
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />