diff --git a/demo/Ursa.Demo/Pages/TimelineDemo.axaml b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
index 70bccc0..e8f66b0 100644
--- a/demo/Ursa.Demo/Pages/TimelineDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
@@ -14,45 +14,48 @@
     mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
-            <selectors:TimelineIconTemplateSelector x:Key="IconSelector">
-                <Ellipse
-                    x:Key="Default"
-                    Width="12"
-                    Height="12"
-                    Fill="{DynamicResource SemiGray6}" />
-                <Ellipse
-                    x:Key="Ongoing"
-                    Width="12"
-                    Height="12"
-                    Fill="{DynamicResource SemiBlue6}" />
-                <Ellipse
-                    x:Key="Success"
-                    Width="12"
-                    Height="12"
-                    Fill="{DynamicResource SemiGreen6}" />
-                <Ellipse
-                    x:Key="Warning"
-                    Width="12"
-                    Height="12"
-                    Fill="{DynamicResource SemiOrange6}" />
-                <Ellipse
-                    x:Key="Error"
-                    Width="12"
-                    Height="12"
-                    Fill="{DynamicResource SemiRed6}" />
+            <selectors:TimelineIconTemplateSelector x:Key="IconSelector" >
+                <SolidColorBrush x:Key="Default" Color="{DynamicResource SemiGray6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Ongoing" Color="{DynamicResource SemiBlue6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Success" Color="{DynamicResource SemiGreen6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Warning" Color="{DynamicResource SemiOrange6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Error" Color="{DynamicResource SemiRed6Color}"></SolidColorBrush>
             </selectors:TimelineIconTemplateSelector>
         </ResourceDictionary>
     </UserControl.Resources>
     <StackPanel>
         <u:Timeline
+            Mode="Alternate"
             HorizontalAlignment="Left"
-            DescriptionMemberBinding="{ReflectionBinding Description}"
+            ContentMemberBinding="{ReflectionBinding Description}"
             HeaderMemberBinding="{ReflectionBinding Header}"
             IconMemberBinding="{ReflectionBinding ItemType}"
             IconTemplate="{StaticResource IconSelector}"
             ItemsSource="{Binding Items}"
-            TimeMemberBinding="{ReflectionBinding Time}" />
-        <u:Timeline HorizontalAlignment="Left">
+            TimeMemberBinding="{ReflectionBinding Time}" >
+                
+        </u:Timeline>
+        <u:Timeline
+            Mode="Left"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+        </u:Timeline>
+        <u:Timeline
+            Mode="Right"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+        </u:Timeline>
+        <u:Timeline HorizontalAlignment="Left" Mode="Alternate">
             <u:TimelineItem
                 Content="Step 1"
                 Header="第一步"
diff --git a/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs b/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs
index ceba90a..a278e6f 100644
--- a/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs
+++ b/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs
@@ -17,7 +17,11 @@ public class TimelineIconTemplateSelector: ResourceDictionary, IDataTemplate
             if (ContainsKey(s))
             {
                 object? o = this[s];
-                if (o is Control c) return c;
+                if (o is SolidColorBrush c)
+                {
+                    var ellipse = new Ellipse() { Width = 12, Height = 12, Fill = c };
+                    return ellipse;
+                }
             }
         }
         return null;
diff --git a/src/Ursa.Themes.Semi/Controls/Timeline.axaml b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
index 3278740..40d3b6a 100644
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -32,13 +32,14 @@
         WarningBrush="{DynamicResource WarningTimelineIconForeground}" />
 
     <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
-        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
-        <Setter Property="VerticalAlignment" Value="Top"></Setter>
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="u:TimelineItem.Template">
             <ControlTemplate TargetType="u:TimelineItem">
-                <Grid Name="PART_RootGrid" 
-                      RowDefinitions="Auto, Auto, Auto" 
-                      ColumnDefinitions="Auto, Auto, Auto">
+                <Grid
+                    Name="PART_RootGrid"
+                    ColumnDefinitions="Auto, Auto, Auto"
+                    RowDefinitions="Auto, Auto, Auto">
                     <!--  Icon and Axis  -->
                     <Grid
                         Name="PART_IconAxisRoot"
@@ -63,36 +64,38 @@
                             Fill="{DynamicResource TimelineLineBrush}" />
                     </Grid>
                     <ContentPresenter
+                        Name="PART_Header"
                         Grid.Row="0"
                         Grid.Column="2"
-                        Name="PART_Header"
-                        Margin="8 4"
+                        Margin="8,4"
+                        VerticalAlignment="Top"
                         Content="{TemplateBinding Header}"
-                        Foreground="{DynamicResource SemiGrey9}"
+                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                         FontSize="14"
-                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
+                        Foreground="{DynamicResource SemiGrey9}" />
                     <ContentPresenter
+                        Name="PART_Content"
                         Grid.Row="1"
                         Grid.Column="2"
-                        Name="PART_Content"
-                        Margin="8 2"
-                        TextElement.Foreground="Gray"
-                        TextElement.FontSize="12"
+                        Margin="8,2"
+                        VerticalAlignment="Top"
                         Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        TextElement.FontSize="12"
+                        TextElement.Foreground="Gray" />
                     <TextBlock
+                        Name="PART_Time"
                         Grid.Row="0"
                         Grid.Column="0"
-                        Name="PART_Time"
-                        Margin="8 2 8 16"
-                        Foreground="Gray"
+                        Margin="8,2"
+                        VerticalAlignment="Top"
                         FontSize="12"
-                        TextWrapping="Wrap"
-                        >
+                        Foreground="Gray"
+                        TextWrapping="Wrap">
                         <TextBlock.Text>
                             <MultiBinding Converter="{StaticResource FormatConverter}">
-                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Time"></Binding>
-                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="TimeFormat"></Binding>
+                                <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="TimeFormat" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </TextBlock.Text>
                     </TextBlock>
@@ -117,62 +120,65 @@
         </Style>
         <Style Selector="^:all-left">
             <Style Selector="^ /template/ ContentPresenter#PART_Header">
-                <Setter Property="Grid.Row" Value="0"></Setter>
-                <Setter Property="Grid.Column" Value="0"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Right"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Right"></Setter>
+                <Setter Property="Grid.Row" Value="0" />
+                <Setter Property="Grid.Column" Value="0" />
+                <Setter Property="HorizontalContentAlignment" Value="Right" />
+                <Setter Property="HorizontalAlignment" Value="Right" />
             </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_Content">
-                <Setter Property="Grid.Row" Value="1"></Setter>
-                <Setter Property="Grid.Column" Value="0"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Right"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Right"></Setter>
+                <Setter Property="Grid.Row" Value="1" />
+                <Setter Property="Grid.Column" Value="0" />
+                <Setter Property="HorizontalContentAlignment" Value="Right" />
+                <Setter Property="HorizontalAlignment" Value="Right" />
             </Style>
             <Style Selector="^ /template/ TextBlock#PART_Time">
-                <Setter Property="Grid.Row" Value="2"></Setter>
-                <Setter Property="Grid.Column" Value="0"></Setter>
-                <Setter Property="TextAlignment" Value="Right"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Right"></Setter>
+                <Setter Property="Grid.Row" Value="2" />
+                <Setter Property="Grid.Column" Value="0" />
+                <Setter Property="TextAlignment" Value="Right" />
+                <Setter Property="HorizontalAlignment" Value="Right" />
+                <Setter Property="Margin" Value="8 2 8 12"></Setter>
             </Style>
         </Style>
         <Style Selector="^:all-right">
             <Style Selector="^ /template/ ContentPresenter#PART_Header">
-                <Setter Property="Grid.Row" Value="0"></Setter>
-                <Setter Property="Grid.Column" Value="2"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                <Setter Property="Grid.Row" Value="0" />
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="HorizontalContentAlignment" Value="Left" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
             </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_Content">
-                <Setter Property="Grid.Row" Value="1"></Setter>
-                <Setter Property="Grid.Column" Value="2"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                <Setter Property="Grid.Row" Value="1" />
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="HorizontalContentAlignment" Value="Left" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
             </Style>
             <Style Selector="^ /template/ TextBlock#PART_Time">
-                <Setter Property="Grid.Row" Value="2"></Setter>
-                <Setter Property="Grid.Column" Value="2"></Setter>
-                <Setter Property="TextAlignment" Value="Left"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                <Setter Property="Grid.Row" Value="2" />
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="TextAlignment" Value="Left" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
+                <Setter Property="Margin" Value="8 2 8 12"></Setter>
             </Style>
         </Style>
         <Style Selector="^:separate">
             <Style Selector="^ /template/ ContentPresenter#PART_Header">
-                <Setter Property="Grid.Row" Value="0"></Setter>
-                <Setter Property="Grid.Column" Value="2"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                <Setter Property="Grid.Row" Value="0" />
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="HorizontalContentAlignment" Value="Left" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
             </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_Content">
-                <Setter Property="Grid.Row" Value="1"></Setter>
-                <Setter Property="Grid.Column" Value="2"></Setter>
-                <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                <Setter Property="Grid.Row" Value="1" />
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="HorizontalContentAlignment" Value="Left" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
+                <Setter Property="Margin" Value="8 2 8 12"></Setter>
             </Style>
             <Style Selector="^ /template/ TextBlock#PART_Time">
-                <Setter Property="Grid.Row" Value="0"></Setter>
-                <Setter Property="Grid.Column" Value="0"></Setter>
-                <Setter Property="TextAlignment" Value="Right"></Setter>
-                <Setter Property="HorizontalAlignment" Value="Right"></Setter>
+                <Setter Property="Grid.Row" Value="0" />
+                <Setter Property="Grid.Column" Value="0" />
+                <Setter Property="TextAlignment" Value="Right" />
+                <Setter Property="HorizontalAlignment" Value="Right" />
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Ursa/Controls/Timeline/Timeline.cs b/src/Ursa/Controls/Timeline/Timeline.cs
index bcb6cfb..467237f 100644
--- a/src/Ursa/Controls/Timeline/Timeline.cs
+++ b/src/Ursa/Controls/Timeline/Timeline.cs
@@ -37,15 +37,15 @@ public class Timeline: ItemsControl
         set => SetValue(HeaderMemberBindingProperty, value);
     }
 
-    public static readonly StyledProperty<IBinding?> DescriptionMemberBindingProperty = AvaloniaProperty.Register<Timeline, IBinding?>(
-        nameof(DescriptionMemberBinding));
+    public static readonly StyledProperty<IBinding?> ContentMemberBindingProperty = AvaloniaProperty.Register<Timeline, IBinding?>(
+        nameof(ContentMemberBinding));
     
     [AssignBinding]
     [InheritDataTypeFromItems(nameof(ItemsSource))]
-    public IBinding? DescriptionMemberBinding
+    public IBinding? ContentMemberBinding
     {
-        get => GetValue(DescriptionMemberBindingProperty);
-        set => SetValue(DescriptionMemberBindingProperty, value);
+        get => GetValue(ContentMemberBindingProperty);
+        set => SetValue(ContentMemberBindingProperty, value);
     }
     
 
@@ -110,6 +110,7 @@ public class Timeline: ItemsControl
         if (this.ItemsPanelRoot is TimelinePanel panel)
         {
             panel.Mode = e.NewValue.Value;
+            SetItemMode();
         }
     }
 
@@ -133,7 +134,7 @@ public class Timeline: ItemsControl
             bool start = index == 0;
             bool end = index == ItemCount - 1;
             t.SetEnd(start, end);
-            if (IconMemberBinding != null)
+            if (IconMemberBinding is not null)
             {
                 t.Bind(TimelineItem.IconProperty, IconMemberBinding);
             }
@@ -141,9 +142,9 @@ public class Timeline: ItemsControl
             {
                 t.Bind(HeaderedContentControl.HeaderProperty, HeaderMemberBinding);
             }
-            if (DescriptionMemberBinding != null)
+            if (ContentMemberBinding != null)
             {
-                t.Bind(ContentControl.ContentProperty, DescriptionMemberBinding);
+                t.Bind(ContentControl.ContentProperty, ContentMemberBinding);
             }
             if (TimeMemberBinding != null)
             {
@@ -161,6 +162,58 @@ public class Timeline: ItemsControl
     {
         var panel = this.ItemsPanelRoot as TimelinePanel;
         panel.Mode = this.Mode;
+        SetItemMode();
         return base.ArrangeOverride(finalSize);
     }
+
+    private void SetItemMode()
+    {
+        if (ItemsPanelRoot is TimelinePanel panel)
+        {
+            var items = panel.Children.OfType<TimelineItem>();
+            if (Mode == TimelineDisplayMode.Left)
+            {
+                foreach (var item in items)
+                {
+                    SetIfUnset(item, TimelineItem.ModeProperty, TimelineItemDisplayMode.Left);
+                }
+            }
+            else if (Mode == TimelineDisplayMode.Right)
+            {
+                foreach (var item in items)
+                {
+                    SetIfUnset(item, TimelineItem.ModeProperty, TimelineItemDisplayMode.Right);
+                }
+            }
+            else if (Mode == TimelineDisplayMode.Center)
+            {
+                foreach (var item in items)
+                {
+                    SetIfUnset(item, TimelineItem.ModeProperty, TimelineItemDisplayMode.Separate);
+                }
+            }
+            else if (Mode == TimelineDisplayMode.Alternate)
+            {
+                bool left = false;
+                foreach (var item in items)
+                {
+                    if (left)
+                    {
+                        SetIfUnset(item, TimelineItem.ModeProperty, TimelineItemDisplayMode.Left);
+                    }
+                    else
+                    {
+                        SetIfUnset(item, TimelineItem.ModeProperty, TimelineItemDisplayMode.Right);
+                    }
+                    left = !left;
+                }
+            }
+        }
+    }
+    
+    private void SetIfUnset<T>(AvaloniaObject target, StyledProperty<T> property, T value)
+    {
+        if (!target.IsSet(property))
+            target.SetCurrentValue(property, value);
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/Timeline/TimelinePanel.cs b/src/Ursa/Controls/Timeline/TimelinePanel.cs
index 8e0992e..f1028b7 100644
--- a/src/Ursa/Controls/Timeline/TimelinePanel.cs
+++ b/src/Ursa/Controls/Timeline/TimelinePanel.cs
@@ -74,9 +74,4 @@ public class TimelinePanel: Panel
         //return base.ArrangeOverride(finalSize);
         return new Size(left + mid + right, height);
     }
-
-    public override void ApplyTemplate()
-    {
-        base.ApplyTemplate();
-    }
 }
\ No newline at end of file