diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml b/demo/Ursa.Demo/Pages/BannerDemo.axaml
index b269c4c..e7b9630 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml
@@ -4,32 +4,49 @@
     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"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <pages:BannerDemoViewModel />
+    </Design.DataContext>
     <StackPanel Spacing="20">
-        <!--    -->
-        <u:Banner
-            Margin="8"
-            Classes="Bordered"
-            Content="Content"
-            Header="Header" />
-        <u:Banner
-            Margin="8"
-            Classes="Bordered"
-            Content="C" />
-        <u:Banner
-            Margin="8"
-            HorizontalContentAlignment="Left"
-            Classes="Bordered"
-            Content="Content"
-            Header="Header" />
-        <u:Banner
-            Margin="8"
-            HorizontalContentAlignment="Left"
-            Classes="Bordered"
-            Content="C" />
-        <u:Banner Margin="8" Content="Content" />
+        <Grid ColumnDefinitions="*, 300">
+            <Grid Grid.Column="0">
+                <Border Margin="20">
+                    <u:Banner
+                        Classes.Bordered="{Binding Bordered}"
+                        Content="This is the Demo of Ursa Banner. "
+                        Header="Welcome to Ursa"
+                        Type="{Binding SelectedType}" />
+                </Border>
+            </Grid>
+            <Border Grid.Column="1" VerticalAlignment="Top">
+                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *">
+                    <Label
+                        Grid.Row="0"
+                        Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="Type" />
+                    <ComboBox
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        MinWidth="200"
+                        Items="{Binding Types}"
+                        SelectedItem="{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}" />
+                </Grid>
+            </Border>
+        </Grid>
+
     </StackPanel>
 </UserControl>
diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
index 435968b..8ea8b76 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
@@ -1,6 +1,9 @@
+using System.Collections.ObjectModel;
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Controls.Notifications;
 using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
 
@@ -9,10 +12,37 @@ public partial class BannerDemo : UserControl
     public BannerDemo()
     {
         InitializeComponent();
+        this.DataContext = new BannerDemoViewModel();
+    }
+}
+
+public class BannerDemoViewModel: ViewModelBase
+{
+    private ObservableCollection<NotificationType> _types;
+    public ObservableCollection<NotificationType> Types
+    {
+        get => _types;
+        set => SetProperty(ref _types, value);
     }
 
-    private void InitializeComponent()
+    private NotificationType _selectedType;
+
+    public NotificationType SelectedType
     {
-        AvaloniaXamlLoader.Load(this);
+        get => _selectedType;
+        set => SetProperty(ref _selectedType, value);
+    }
+
+    private bool _bordered;
+
+    public bool Bordered
+    {
+        get => _bordered;
+        set => SetProperty(ref _bordered, value);
+    }
+
+    public BannerDemoViewModel()
+    {
+        Types = new ObservableCollection<NotificationType>() { NotificationType.Information, NotificationType.Warning, NotificationType.Error, NotificationType.Success };
     }
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Ursa.Demo.csproj b/demo/Ursa.Demo/Ursa.Demo.csproj
index 0df5a4d..272045d 100644
--- a/demo/Ursa.Demo/Ursa.Demo.csproj
+++ b/demo/Ursa.Demo/Ursa.Demo.csproj
@@ -23,6 +23,7 @@
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview5" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
+        <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5.1" />
         <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
 
diff --git a/src/Ursa.Themes.Semi/Controls/Banner.axaml b/src/Ursa.Themes.Semi/Controls/Banner.axaml
index 4d07cce..27f68b2 100644
--- a/src/Ursa.Themes.Semi/Controls/Banner.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Banner.axaml
@@ -4,6 +4,8 @@
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:Banner}" TargetType="u:Banner">
+        <Setter Property="u:Banner.BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
+        <Setter Property="u:Banner.BorderBrush" Value="Transparent" />
         <Setter Property="u:Banner.HorizontalContentAlignment" Value="Center" />
         <Setter Property="u:Banner.Template">
             <ControlTemplate TargetType="u:Banner">
@@ -23,6 +25,7 @@
                                 Grid.Row="0"
                                 Grid.RowSpan="2"
                                 Grid.Column="0"
+                                Margin="{DynamicResource BannerIconMargin}"
                                 VerticalAlignment="Top"
                                 IsVisible="{TemplateBinding ShowIcon}">
                                 <ContentPresenter Content="{TemplateBinding Icon}" />
@@ -50,32 +53,70 @@
                         <Button
                             Name="{x:Static u:Banner.PART_CloseButton}"
                             Grid.Column="1"
+                            Padding="4"
+                            Cursor="Hand"
                             IsVisible="{TemplateBinding CanClose}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
                                 Width="12"
                                 Height="12"
                                 Data="{DynamicResource BannerCloseIconGeometry}"
-                                Foreground="Black" />
+                                Foreground="{DynamicResource BannerCloseButtonForeground}" />
                         </Button>
                     </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
         <Style Selector="^[Type=Information]">
+            <Style Selector="^.Bordered /template/ Border#PART_Container">
+                <Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BannerInformationBorderBrush}" />
+            </Style>
             <Style Selector="^ /template/ Border#PART_Container">
                 <Setter Property="Background" Value="{DynamicResource BannerInformationBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource BannerInformationBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
                 <Setter Property="PathIcon.Data" Value="{DynamicResource BannerInformationIconGeometry}" />
                 <Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerInformationBorderBrush}" />
             </Style>
         </Style>
-        <Style Selector="^.Bordered">
-            <Style Selector="^ /template/ Border#PART_Container">
+        <Style Selector="^[Type=Warning]">
+            <Style Selector="^.Bordered /template/ Border#PART_Container">
                 <Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
-                <Setter Property="Border.BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BannerWarningBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_Container">
+                <Setter Property="Background" Value="{DynamicResource BannerWarningBackground}" />
+            </Style>
+            <Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
+                <Setter Property="PathIcon.Data" Value="{DynamicResource BannerWarningIconGeometry}" />
+                <Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerWarningBorderBrush}" />
+            </Style>
+        </Style>
+        <Style Selector="^[Type=Error]">
+            <Style Selector="^.Bordered /template/ Border#PART_Container">
+                <Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BannerErrorBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_Container">
+                <Setter Property="Background" Value="{DynamicResource BannerErrorBackground}" />
+            </Style>
+            <Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
+                <Setter Property="PathIcon.Data" Value="{DynamicResource BannerErrorIconGeometry}" />
+                <Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerErrorBorderBrush}" />
+            </Style>
+        </Style>
+        <Style Selector="^[Type=Success]">
+            <Style Selector="^.Bordered /template/ Border#PART_Container">
+                <Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BannerSuccessBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_Container">
+                <Setter Property="Background" Value="{DynamicResource BannerSuccessBackground}" />
+            </Style>
+            <Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
+                <Setter Property="PathIcon.Data" Value="{DynamicResource BannerSuccessIconGeometry}" />
+                <Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerSuccessBorderBrush}" />
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Banner.axaml b/src/Ursa.Themes.Semi/Themes/Light/Banner.axaml
index bb71aab..2fda7f5 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Banner.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Banner.axaml
@@ -2,4 +2,12 @@
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="BannerInformationBackground" Color="#EAF5FF" />
     <SolidColorBrush x:Key="BannerInformationBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="BannerWarningBackground" Color="#FFF8EA" />
+    <SolidColorBrush x:Key="BannerWarningBorderBrush" Color="#FC8800" />
+    <SolidColorBrush x:Key="BannerErrorBackground" Color="#FEF2ED" />
+    <SolidColorBrush x:Key="BannerErrorBorderBrush" Color="#F93920" />
+    <SolidColorBrush x:Key="BannerSuccessBackground" Color="#ECF7EC" />
+    <SolidColorBrush x:Key="BannerSuccessBorderBrush" Color="#3BB346" />
+
+    <SolidColorBrush x:Key="BannerCloseButtonForeground" Opacity="0.62" Color="#1C1F23" />
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
index a62c46c..39a925c 100644
--- a/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
@@ -8,4 +8,5 @@
 
     <CornerRadius x:Key="BannerCornerRadius">3</CornerRadius>
     <Thickness x:Key="BannerBorderThickness">1</Thickness>
+    <Thickness x:Key="BannerIconMargin">0 0 12 0</Thickness>
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj b/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj
index ff62375..7fb04b2 100644
--- a/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj
+++ b/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj
@@ -9,7 +9,6 @@
 
     <ItemGroup>
       <PackageReference Include="Avalonia" Version="11.0.0-preview5" />
-      <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5" />
       <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>