diff --git a/demo/Ursa.Demo/Pages/IntroductionDemo.axaml b/demo/Ursa.Demo/Pages/IntroductionDemo.axaml
index 1a58474..656e461 100644
--- a/demo/Ursa.Demo/Pages/IntroductionDemo.axaml
+++ b/demo/Ursa.Demo/Pages/IntroductionDemo.axaml
@@ -7,15 +7,19 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:u="https://irihi.tech/ursa"
     xmlns:vm="using:Ursa.Demo.ViewModels"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:CompileBindings="True"
-    x:DataType="vm:IntroductionDemoViewModel"
+    d:DesignHeight="800"
+    d:DesignWidth="1600"
     mc:Ignorable="d">
-    <Grid RowDefinitions="Auto, *" ColumnDefinitions="Auto, *">
+    <UserControl.Resources>
+        <PathGeometry x:Key="InfoPath">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z</PathGeometry>
+        <SolidColorBrush x:Key="MaskBackground" Opacity="0.2" Color="Red" />
+        <SolidColorBrush x:Key="MaskBorder" Color="Red" />
+    </UserControl.Resources>
+
+    <Grid RowDefinitions="Auto, *" ColumnDefinitions="Auto, *, *">
         <u:Banner
             Grid.Column="0"
-            Grid.ColumnSpan="2"
+            Grid.ColumnSpan="3"
             Grid.Row="0"
             Classes="Bordered"
             Content="Aesthetic revolution of productivity. "
@@ -64,5 +68,199 @@
                 </converters:MenuDataTemplateSelector>
             </u:NavigationMenu.ItemTemplate>
         </u:NavigationMenu>
+
+        <StackPanel Grid.Column="1" Grid.Row="1" Spacing="20" Margin="8">
+            <u:ImageViewer
+                Height="300"
+                Name="viewer"
+                Source="../Assets/WORLD.png">
+                <u:ImageViewer.Overlayer>
+                    <Grid
+                        HorizontalAlignment="Stretch"
+                        ColumnDefinitions="*, Auto, *"
+                        IsVisible="{Binding #maskSwitch.IsChecked}">
+                        <Border
+                            Grid.Column="0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{StaticResource MaskBackground}"
+                            BorderBrush="{StaticResource MaskBorder}"
+                            BorderThickness="0,0,1,0"
+                            IsHitTestVisible="False" />
+                        <Rectangle
+                            Grid.Column="1"
+                            Width="150"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Fill="Transparent"
+                            IsHitTestVisible="False" />
+                        <Border
+                            Grid.Column="2"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{StaticResource MaskBackground}"
+                            BorderBrush="{StaticResource MaskBorder}"
+                            BorderThickness="1,0,0,0"
+                            IsHitTestVisible="False" />
+                    </Grid>
+                </u:ImageViewer.Overlayer>
+            </u:ImageViewer>
+            <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, Auto, Auto">
+                <TextBlock
+                    Grid.Row="0"
+                    Grid.Column="0"
+                    Text="Scale" />
+                <Slider
+                    Grid.Row="0"
+                    Grid.Column="1"
+                    Width="200"
+                    Maximum="10"
+                    Minimum="0.1"
+                    Value="{Binding #viewer.Scale}" />
+                <TextBlock
+                    Grid.Row="0"
+                    Grid.Column="2"
+                    Text="{Binding #viewer.Scale, StringFormat=\{0:0.00000\}}" />
+
+                <TextBlock
+                    Grid.Row="1"
+                    Grid.Column="0"
+                    Text="TranslateX" />
+                <Slider
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    Width="200"
+                    IsSnapToTickEnabled="True"
+                    Maximum="300"
+                    Minimum="-300"
+                    TickFrequency="0.1"
+                    Value="{Binding #viewer.TranslateX}" />
+                <TextBlock
+                    Grid.Row="1"
+                    Grid.Column="2"
+                    Text="{Binding #viewer.TranslateX, StringFormat=\{0:0.0\}}" />
+
+                <TextBlock
+                    Grid.Row="2"
+                    Grid.Column="0"
+                    Text="TranslateY" />
+                <Slider
+                    Grid.Row="2"
+                    Grid.Column="1"
+                    Width="200"
+                    IsSnapToTickEnabled="True"
+                    Maximum="300"
+                    Minimum="-300"
+                    TickFrequency="0.1"
+                    Value="{Binding #viewer.TranslateY}" />
+                <TextBlock
+                    Grid.Row="2"
+                    Grid.Column="2"
+                    Text="{Binding #viewer.TranslateY, StringFormat=\{0:0.0\}}" />
+
+                <TextBlock
+                    Grid.Row="3"
+                    Grid.Column="0"
+                    Text="Show Mask" />
+                <ToggleSwitch
+                    Name="maskSwitch"
+                    Grid.Row="3"
+                    Grid.Column="1"
+                    Theme="{DynamicResource SimpleToggleSwitch}" />
+            </Grid>
+        </StackPanel>
+
+        <StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
+            <u:Divider HorizontalContentAlignment="Left">Badge</u:Divider>
+            <StackPanel.Styles>
+                <Style Selector="u|Badge">
+                    <Setter Property="Margin" Value="12" />
+                </Style>
+                <Style Selector="u|Badge > Border">
+                    <Setter Property="Background" Value="{DynamicResource SemiPurple4Color}" />
+                    <Setter Property="CornerRadius" Value="8" />
+                </Style>
+            </StackPanel.Styles>
+            <WrapPanel Orientation="Horizontal">
+                <u:Badge BadgeContent="Ursa" CornerPosition="TopRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    HorizontalAlignment="Center"
+                    CornerPosition="TopRight"
+                    BadgeContent="500"
+                    OverflowCount="99">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    BadgeContent="Ursa"
+                    CornerPosition="TopRight"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+
+                <u:Badge BadgeContent="Ursa" />
+                <u:Badge BadgeContent="Ursa" Dot="True" />
+            </WrapPanel>
+            <WrapPanel Orientation="Horizontal">
+                <u:Badge BadgeContent="Ursa" Classes="Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge BadgeContent="Ursa" Classes="Tertiary" CornerPosition="BottomLeft">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge BadgeContent="Ursa" Classes="Warning" CornerPosition="BottomRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge BadgeContent="Ursa" Classes="Danger" CornerPosition="TopRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </WrapPanel>
+
+            <u:Divider>DualBadge</u:Divider>
+            <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="u|DualBadge">
+                        <Setter Property="Margin" Value="4" />
+                    </Style>
+                </StackPanel.Styles>
+
+                <u:DualBadge Header="downloads">
+                    <u:DualBadge.Icon>
+                        <PathIcon
+                            Width="14"
+                            Height="14"
+                            Data="{StaticResource InfoPath}" />
+                    </u:DualBadge.Icon>
+                    2.4k
+                </u:DualBadge>
+                <u:DualBadge Classes="FlatSquare" Header="downloads">
+                    <u:DualBadge.Icon>
+                        <PathIcon
+                            Width="14"
+                            Height="14"
+                            Data="{StaticResource InfoPath}" />
+                    </u:DualBadge.Icon>
+                    2.4k
+                </u:DualBadge>
+                <u:DualBadge Classes="Plastic" Header="downloads">
+                    <u:DualBadge.Icon>
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{StaticResource InfoPath}" />
+                    </u:DualBadge.Icon>
+                    2.4k
+                </u:DualBadge>
+            </StackPanel>
+
+            <u:Divider HorizontalContentAlignment="Right">ButtonGroup</u:Divider>
+            <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
+            <u:ButtonGroup Classes="Primary" ItemsSource="{Binding ButtonGroupItems}" />
+            <u:ButtonGroup Classes="Primary Borderless" ItemsSource="{Binding ButtonGroupItems}" />
+            <u:ButtonGroup Classes="Primary Large" ItemsSource="{Binding ButtonGroupItems}" />
+            <u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding ButtonGroupItems}" />
+        </StackPanel>
+
     </Grid>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs
index 49f1248..9a3488c 100644
--- a/demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs
@@ -3,9 +3,8 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Ursa.Demo.ViewModels;
 
-public class IntroductionDemoViewModel: ObservableObject
+public class IntroductionDemoViewModel : ObservableObject
 {
-    public string Greeting => "hello Intro";
     public ObservableCollection<MenuItemViewModel> MenuItems { get; set; } = new()
     {
         new MenuItemViewModel()
@@ -14,15 +13,17 @@ public class IntroductionDemoViewModel: ObservableObject
             MenuIconName = "User",
             Children = new ObservableCollection<MenuItemViewModel>()
             {
-                new (){
-                    MenuHeader = "公告管理" , 
+                new()
+                {
+                    MenuHeader = "公告管理",
                     MenuIconName = "Star",
                     Children = new ObservableCollection<MenuItemViewModel>()
                     {
-                        new () {MenuHeader = "公告设置"},
-                        new () {MenuHeader = "公告处理"}
-                    }},
-                new (){MenuHeader = "任务查询"}
+                        new() { MenuHeader = "公告设置" },
+                        new() { MenuHeader = "公告处理" }
+                    }
+                },
+                new() { MenuHeader = "任务查询" }
             }
         },
         new MenuItemViewModel()
@@ -36,9 +37,11 @@ public class IntroductionDemoViewModel: ObservableObject
             MenuIconName = "Gear",
             Children = new ObservableCollection<MenuItemViewModel>()
             {
-                new (){MenuHeader = "任务管理"},
-                new (){MenuHeader = "用户任务查询"}
+                new() { MenuHeader = "任务管理" },
+                new() { MenuHeader = "用户任务查询" }
             }
         }
     };
+
+    public ObservableCollection<string> ButtonGroupItems { get; set; } = ["Ding", "Otter", "Husky", "Mr. 17", "Cass"];
 }
\ No newline at end of file