diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml b/demo/Ursa.Demo/Pages/BannerDemo.axaml
index d8e6b85..9b6c591 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml
@@ -4,58 +4,65 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="clr-namespace:Ursa.Demo.Pages"
     xmlns:u="https://irihi.tech/ursa"
-    x:DataType="pages:BannerDemoViewModel"
+    xmlns:vm="clr-namespace:Ursa.Demo.ViewModels"
+    x:DataType="vm:BannerDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <pages:BannerDemoViewModel />
+        <vm:BannerDemoViewModel />
     </Design.DataContext>
-    <StackPanel Spacing="20">
-        <Grid ColumnDefinitions="*, 300">
+    <ScrollViewer>
+        <StackPanel Spacing="20">
             <u:Banner
-                Margin="20"
-                Grid.Column="0"
+                Name="banner"
                 Classes.Bordered="{Binding Bordered}"
-                CanClose="{Binding CanClose}"
-                Content="This is the Demo of Ursa Banner. "
-                Header="Welcome to Ursa"
-                Type="{Binding SelectedType}" />
-            <Border Grid.Column="1" VerticalAlignment="Top">
-                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *">
-                    <Label
-                        Grid.Row="0"
-                        Grid.Column="0"
-                        VerticalAlignment="Center"
-                        Content="Type" />
-                    <u:EnumSelector
-                        Grid.Row="0"
-                        Grid.Column="1"
-                        Width="200"
-                        EnumType="NotificationType"
-                        Value="{Binding SelectedType}" />
-                    <Label
-                        Grid.Row="1"
-                        Grid.Column="0"
-                        VerticalAlignment="Center"
-                        Content="Bordered" />
-                    <ToggleSwitch
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        VerticalAlignment="Center"
-                        IsChecked="{Binding Bordered}" />
-                    <Label
-                        Grid.Row="2"
-                        Grid.Column="0"
-                        VerticalAlignment="Center"
-                        Content="CanClose" />
-                    <ToggleSwitch
-                        Grid.Row="2"
-                        Grid.Column="1"
-                        VerticalAlignment="Center"
-                        IsChecked="{Binding CanClose}" />
-                </Grid>
-            </Border>
-        </Grid>
-    </StackPanel>
+                Header="{Binding Title}"
+                Content="{Binding Content}" />
+            <u:Form Width="500">
+                <TextBox
+                    Classes="ClearButton"
+                    IsEnabled="{Binding SetTitleNull}"
+                    Text="{Binding Title}">
+                    <u:FormItem.Label>
+                        <StackPanel Orientation="Horizontal">
+                            <CheckBox Content="Title" IsChecked="{Binding SetTitleNull}" />
+                        </StackPanel>
+                    </u:FormItem.Label>
+                </TextBox>
+                <TextBox
+                    Classes="ClearButton TextArea"
+                    IsEnabled="{Binding SetContentNull}"
+                    Text="{Binding Content}"
+                    TextWrapping="Wrap">
+                    <u:FormItem.Label>
+                        <CheckBox Content="Content" IsChecked="{Binding SetContentNull}" />
+                    </u:FormItem.Label>
+                </TextBox>
+                <u:EnumSelector
+                    u:FormItem.Label="NotificationType"
+                    EnumType="NotificationType"
+                    Value="{Binding #banner.Type}" />
+                <u:EnumSelector
+                    u:FormItem.Label="HorizontalContentAlignment"
+                    EnumType="HorizontalAlignment"
+                    Value="{Binding  #banner.HorizontalContentAlignment}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="Bordered"
+                    IsChecked="{Binding Bordered}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="ShowIcon"
+                    IsChecked="{Binding #banner.ShowIcon}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="CanClose"
+                    IsChecked="{Binding #banner.CanClose}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="IsVisible"
+                    IsChecked="{Binding  #banner.IsVisible}" />
+            </u:Form>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
index e0d16d1..421a235 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
@@ -1,7 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Controls.Notifications;
-using Avalonia.Markup.Xaml;
-using CommunityToolkit.Mvvm.ComponentModel;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
@@ -13,16 +10,4 @@ public partial class BannerDemo : UserControl
         InitializeComponent();
         this.DataContext = new BannerDemoViewModel();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-}
-
-public partial class BannerDemoViewModel : ViewModelBase
-{
-    [ObservableProperty] private NotificationType _selectedType;
-    [ObservableProperty] private bool _bordered;
-    [ObservableProperty] private bool _canClose;
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/BannerDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/BannerDemoViewModel.cs
index 34a0ded..d3331b1 100644
--- a/demo/Ursa.Demo/ViewModels/BannerDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/BannerDemoViewModel.cs
@@ -1,6 +1,41 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
 namespace Ursa.Demo.ViewModels;
 
-public class BannerDemoViewModel: ViewModelBase
+public partial class BannerDemoViewModel : ViewModelBase
 {
-    
+    private string? _oldTitle = string.Empty;
+    private string? _oldContent = string.Empty;
+    [ObservableProperty] private string? _title = "Welcome to Ursa";
+    [ObservableProperty] private string? _content = "This is the Demo of Ursa Banner.";
+    [ObservableProperty] private bool _bordered;
+
+    [ObservableProperty] private bool _setTitleNull = true;
+    [ObservableProperty] private bool _setContentNull = true;
+
+    partial void OnSetTitleNullChanged(bool value)
+    {
+        if (value)
+        {
+            Title = _oldTitle;
+        }
+        else
+        {
+            _oldTitle = Title;
+            Title = null;
+        }
+    }
+
+    partial void OnSetContentNullChanged(bool value)
+    {
+        if (value)
+        {
+            Content = _oldContent;
+        }
+        else
+        {
+            _oldContent = Content;
+            Content = null;
+        }
+    }
 }
\ No newline at end of file