diff --git a/demo/Ursa.Demo/Pages/ToolBarDemo.axaml b/demo/Ursa.Demo/Pages/ToolBarDemo.axaml
index 2228a17..913a3f3 100644
--- a/demo/Ursa.Demo/Pages/ToolBarDemo.axaml
+++ b/demo/Ursa.Demo/Pages/ToolBarDemo.axaml
@@ -12,27 +12,125 @@
     x:CompileBindings="True"
     x:DataType="vm:ToolBarDemoViewModel"
     mc:Ignorable="d">
-    <DockPanel>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="BoldGlyph">M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z</StreamGeometry>
+            <StreamGeometry x:Key="ItalicGlyph">M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, *">
+        <u:EnumSelector Name="Orientation" EnumType="Orientation" />
         <u:ToolBar
-            HorizontalAlignment="Left"
             DockPanel.Dock="Top"
-            Header="Hello World">
-            <Button Content="Button 1" u:ToolBar.OverflowMode="Never" />
-            <u:ToolBarSeparator/>
+            Header="Hello World"
+            Orientation="{Binding #Orientation.Value}">
+            <Button u:ToolBar.OverflowMode="Never" Content="Button 1" />
+            <u:ToolBarSeparator />
             <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 2" />
             <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 3" />
-            <ToggleButton Content="Toggle"></ToggleButton>
+            <ToggleButton Content="Toggle" />
+            <u:ToolBar.Styles>
+                <Style Selector="u|ToolBar[Orientation=Vertical]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+                <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="3" />
+                </Style>
+            </u:ToolBar.Styles>
         </u:ToolBar>
-        <u:EnumSelector EnumType="Orientation" Name="Orientation" DockPanel.Dock="Top"></u:EnumSelector>
         <u:ToolBar
-            HorizontalAlignment="Left"
-            VerticalAlignment="Top"
             DockPanel.Dock="Top"
-            Orientation="{Binding #Orientation.Value}"
-            ItemsSource="{Binding Items}">
+            ItemsSource="{Binding Items}"
+            Orientation="{Binding #Orientation.Value}">
             <u:ToolBar.ItemTemplate>
                 <template:ToolBarItemTemplateSelector />
             </u:ToolBar.ItemTemplate>
+            <u:ToolBar.Styles>
+                <Style Selector="u|ToolBar[Orientation=Vertical]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+                <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="3" />
+                </Style>
+            </u:ToolBar.Styles>
         </u:ToolBar>
-    </DockPanel>
+        <Grid
+            Grid.Row="2"
+            Grid.Column="2"
+            RowDefinitions="Auto, *">
+            <u:ToolBar>
+                <ToggleButton Name="bold">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="{DynamicResource BoldGlyph}" />
+                </ToggleButton>
+                <ToggleButton Name="italic">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="{DynamicResource ItalicGlyph}" />
+                </ToggleButton>
+                <u:ToolBarSeparator />
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock
+                        Margin="8,0"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Text="Font Size" />
+                    <ComboBox
+                        Name="size"
+                        Width="90"
+                        SelectedIndex="0">
+                        <x:Double>8</x:Double>
+                        <x:Double>16</x:Double>
+                        <x:Double>32</x:Double>
+                    </ComboBox>
+                </StackPanel>
+                <u:ToolBar.Styles>
+                    <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                        <Setter Property="Grid.Row" Value="2" />
+                        <Setter Property="Grid.Column" Value="1" />
+                        <Setter Property="Grid.RowSpan" Value="1" />
+                        <Setter Property="Grid.ColumnSpan" Value="3" />
+                    </Style>
+                </u:ToolBar.Styles>
+
+            </u:ToolBar>
+            <TextBlock
+                Grid.Row="1"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Classes.Bold="{Binding #bold.IsChecked}"
+                Classes.Italic="{Binding #italic.IsChecked}"
+                FontSize="{Binding #size.SelectedItem}"
+                Text="Hello Ursa Avalonia">
+                <TextBlock.Styles>
+                    <Style Selector="TextBlock">
+                        <Setter Property="FontWeight" Value="Regular" />
+                        <Setter Property="FontSize" Value="8" />
+                        <Setter Property="FontStyle" Value="Normal" />
+                    </Style>
+                    <Style Selector="TextBlock.Bold">
+                        <Setter Property="FontWeight" Value="Bold" />
+                    </Style>
+                    <Style Selector="TextBlock.Italic">
+                        <Setter Property="FontStyle" Value="Italic" />
+                    </Style>
+                </TextBlock.Styles>
+            </TextBlock>
+        </Grid>
+    </Grid>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/ToolBar.axaml b/src/Ursa.Themes.Semi/Controls/ToolBar.axaml
index 8b79c81..b7770d7 100644
--- a/src/Ursa.Themes.Semi/Controls/ToolBar.axaml
+++ b/src/Ursa.Themes.Semi/Controls/ToolBar.axaml
@@ -26,6 +26,8 @@
         </Setter>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type u:ToolBar}" TargetType="u:ToolBar">
+        <Setter Property="HorizontalAlignment" Value="Left"/>
+        <Setter Property="VerticalAlignment" Value="Top"/>
         <Setter Property="ItemsPanel">
             <ItemsPanelTemplate>
                 <u:ToolBarPanel />
@@ -45,27 +47,30 @@
                             Margin="8,0"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
-                            Foreground="{DynamicResource SemiColorText2}"
                             Content="{TemplateBinding Header}"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
                             DockPanel.Dock="Left"
+                            Foreground="{DynamicResource SemiColorText2}"
                             IsVisible="{TemplateBinding Header,
                                                         Converter={x:Static ObjectConverters.IsNotNull}}" />
                         <Panel Name="PART_PopupButtonPanel" DockPanel.Dock="Right">
                             <ToggleButton
                                 Name="button"
-                                IsVisible="False"
                                 Padding="8,0"
                                 VerticalAlignment="Stretch"
+                                IsVisible="False"
                                 Theme="{DynamicResource ToolBarExpandToggleButton}">
-                                <PathIcon Name="PART_Icon" Height="16" Data="{DynamicResource ToolBarHorizontalMoreGlyph}"></PathIcon>
+                                <PathIcon
+                                    Name="PART_Icon"
+                                    Height="16"
+                                    Data="{DynamicResource ToolBarHorizontalMoreGlyph}" />
                             </ToggleButton>
                             <Popup
                                 IsLightDismissEnabled="True"
                                 IsOpen="{Binding #button.IsChecked, Mode=TwoWay}"
                                 Placement="{TemplateBinding PopupPlacement}"
                                 PlacementTarget="{Binding #button}">
-                                <Border Theme="{DynamicResource CardBorder}" Padding="2">
+                                <Border Padding="2" Theme="{DynamicResource CardBorder}">
                                     <StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}" />
                                 </Border>
                             </Popup>
@@ -84,41 +89,47 @@
         <Style Selector="^[Orientation=Vertical]">
             <Setter Property="PopupPlacement" Value="RightEdgeAlignedTop" />
             <Style Selector="^ /template/ ContentPresenter#PART_Header">
-                <Setter Property="DockPanel.Dock" Value="Top"></Setter>
+                <Setter Property="DockPanel.Dock" Value="Top" />
+                <Setter Property="HorizontalAlignment" Value="Center" />
+                <Setter Property="VerticalAlignment" Value="Top" />
+                <Setter Property="Margin" Value="0 8" />
             </Style>
             <Style Selector="^ /template/ Panel#PART_PopupButtonPanel">
-                <Setter Property="DockPanel.Dock" Value="Bottom"></Setter>
+                <Setter Property="DockPanel.Dock" Value="Bottom" />
             </Style>
             <Style Selector="^ /template/ ToggleButton#button">
-                <Setter Property="Padding" Value="0 8"></Setter>
+                <Setter Property="Padding" Value="0 8" />
             </Style>
             <Style Selector="^ /template/ PathIcon#PART_Icon">
-                <Setter Property="Data" Value="{DynamicResource ToolBarVerticalMoreGlyph}"></Setter>
-                <Setter Property="Width" Value="16"></Setter>
-                <Setter Property="Height" Value="{x:Static x:Double.NaN}"></Setter>
+                <Setter Property="Data" Value="{DynamicResource ToolBarVerticalMoreGlyph}" />
+                <Setter Property="Width" Value="16" />
+                <Setter Property="Height" Value="{x:Static x:Double.NaN}" />
             </Style>
         </Style>
         <Style Selector="^:overflow /template/ ToggleButton#button">
-            <Setter Property="IsVisible" Value="True"></Setter>
+            <Setter Property="IsVisible" Value="True" />
         </Style>
     </ControlTheme>
-    
+
     <ControlTheme x:Key="{x:Type u:ToolBarSeparator}" TargetType="u:ToolBarSeparator">
         <Setter Property="Template">
             <ControlTemplate>
-                <Rectangle Name="PART_Rect" Margin="4 " Fill="{DynamicResource SemiColorBorder}"></Rectangle>
+                <Rectangle
+                    Name="PART_Rect"
+                    Margin="4"
+                    Fill="{DynamicResource SemiColorBorder}" />
             </ControlTemplate>
         </Setter>
         <Style Selector="^ /template/ Rectangle#PART_Rect">
-            <Setter Property="Width" Value="1"/>
-            <Setter Property="VerticalAlignment" Value="Stretch"/>
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
             <Setter Property="HorizontalAlignment" Value="Center" />
         </Style>
         <Style Selector="^:vertical /template/ Rectangle#PART_Rect">
-            <Setter Property="Height" Value="1"></Setter>
+            <Setter Property="Height" Value="1" />
             <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />
-            <Setter Property="VerticalAlignment" Value="Center"></Setter>
+            <Setter Property="VerticalAlignment" Value="Center" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>