diff --git a/src/Ursa.Themes.Semi/Controls/Timeline.axaml b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
index 87d5e48..3278740 100644
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -18,7 +18,7 @@
     <ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline">
         <Setter Property="Template">
             <ControlTemplate TargetType="u:Timeline">
-                <ItemsPresenter Grid.IsSharedSizeScope="True" ItemsPanel="{TemplateBinding ItemsPanel}" />
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -68,19 +68,25 @@
                         Name="PART_Header"
                         Margin="8 4"
                         Content="{TemplateBinding Header}"
+                        Foreground="{DynamicResource SemiGrey9}"
+                        FontSize="14"
                         ContentTemplate="{TemplateBinding HeaderTemplate}" />
                     <ContentPresenter
                         Grid.Row="1"
                         Grid.Column="2"
                         Name="PART_Content"
                         Margin="8 2"
+                        TextElement.Foreground="Gray"
+                        TextElement.FontSize="12"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}" />
                     <TextBlock
                         Grid.Row="0"
                         Grid.Column="0"
                         Name="PART_Time"
-                        Margin="8 2"
+                        Margin="8 2 8 16"
+                        Foreground="Gray"
+                        FontSize="12"
                         TextWrapping="Wrap"
                         >
                         <TextBlock.Text>
@@ -113,42 +119,60 @@
             <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>
             </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>
             </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>
             </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>
             </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>
             </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>
             </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>
             </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>
             </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>
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Ursa/Controls/Timeline/Timeline.cs b/src/Ursa/Controls/Timeline/Timeline.cs
index f6809ca..bcb6cfb 100644
--- a/src/Ursa/Controls/Timeline/Timeline.cs
+++ b/src/Ursa/Controls/Timeline/Timeline.cs
@@ -156,4 +156,11 @@ public class Timeline: ItemsControl
         }
 
     }
+
+    protected override Size ArrangeOverride(Size finalSize)
+    {
+        var panel = this.ItemsPanelRoot as TimelinePanel;
+        panel.Mode = this.Mode;
+        return base.ArrangeOverride(finalSize);
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/Timeline/TimelineItem.cs b/src/Ursa/Controls/Timeline/TimelineItem.cs
index 4b63f70..e40841f 100644
--- a/src/Ursa/Controls/Timeline/TimelineItem.cs
+++ b/src/Ursa/Controls/Timeline/TimelineItem.cs
@@ -158,13 +158,35 @@ public class TimelineItem: HeaderedContentControl
         PseudoClasses.Set(PC_Last, end);
     }
 
-    internal (double?, double?, double?, double?) GetWidth()
+    internal (double left, double mid, double right) GetWidth()
     {
-        return (_headerPresenter?.Bounds.Width, _contentPresenter?.Bounds.Width, _iconPresenter?.Bounds.Width, _timePresenter?.Bounds.Width);
+        if (_headerPresenter is null) return new ValueTuple<double, double, double>(0, 0, 0);
+        double header = _headerPresenter?.DesiredSize.Width ?? 0;
+        double icon = _iconPresenter?.DesiredSize.Width ?? 0;
+        double content = _contentPresenter?.DesiredSize.Width ?? 0;
+        double time = _timePresenter?.DesiredSize.Width ?? 0;
+        double max = Math.Max(header, content);
+        if (Mode == TimelineItemDisplayMode.Left)
+        {
+            max = Math.Max(max, time);
+            return (max, icon, 0);
+        }
+        if (Mode == TimelineItemDisplayMode.Right)
+        {
+            max = Math.Max(max, time);
+            return (0, icon, max);
+        }
+        if (Mode == TimelineItemDisplayMode.Separate)
+        {
+            return (time, icon, max);
+        }
+        return new ValueTuple<double, double, double>(0, 0, 0);
     }
 
-    internal void SetWidth(double? header, double? content, double? icon, double? time)
+    internal void SetWidth(double? left, double? mid, double? right)
     {
-        _rootGrid.ColumnDefinitions[0].Width = new GridLength(200);
+        _rootGrid.ColumnDefinitions[0].Width = new GridLength(left??0);
+        _rootGrid.ColumnDefinitions[1].Width = new GridLength(mid??0);
+        _rootGrid.ColumnDefinitions[2].Width = new GridLength(right??0);
     }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/Timeline/TimelinePanel.cs b/src/Ursa/Controls/Timeline/TimelinePanel.cs
index 37371f4..8e0992e 100644
--- a/src/Ursa/Controls/Timeline/TimelinePanel.cs
+++ b/src/Ursa/Controls/Timeline/TimelinePanel.cs
@@ -25,7 +25,6 @@ public class TimelinePanel: Panel
         double left = 0;
         double right = 0;
         double icon = 0;
-        double width = 0;
         double height = 0;
         foreach (var child in Children)
         {
@@ -33,40 +32,51 @@ public class TimelinePanel: Panel
             if (child is TimelineItem t)
             {
                 var doubles = t.GetWidth();
+                left = Math.Max(left, doubles.left);
+                icon = Math.Max(icon, doubles.mid);
+                right = Math.Max(right, doubles.right);
             }
-            width = Math.Max(width, child.DesiredSize.Width);
             height+=child.DesiredSize.Height;
         }
-        foreach (var child in Children)
-        {
-            if (child is TimelineItem t)
-            {
-                t.LeftWidth = left;
-                t.RightWidth = right;
-                t.IconWidth = icon;
-            }
-        }
-
-        return new Size(width, height);
+        return new Size(left+icon+right, height);
     }
 
     protected override Size ArrangeOverride(Size finalSize)
     {
-        Rect rect = new Rect();
+        
+        double left = 0, mid = 0, right = 0;
+        double height = 0;
         foreach (var child in Children)
         {
-            rect = rect.WithWidth(Math.Max(rect.Width, child.DesiredSize.Width));
-            rect = rect.WithHeight(rect.Height + child.DesiredSize.Height);
-            child.Arrange(rect);
-            rect = rect.WithY(rect.Y+child.DesiredSize.Height);
             if (child is TimelineItem t)
             {
                 var doubles = t.GetWidth();
-                t.SetWidth(0, 0, 0, 0);
+                left = Math.Max(left, doubles.left);
+                mid = Math.Max(mid, doubles.mid);
+                right = Math.Max(right, doubles.right);
+            }
+        }
+
+        Rect rect = new Rect(0, 0, left + mid + right, 0);
+        foreach (var child in Children)
+        {
+            if (child is TimelineItem t)
+            {
+                t.SetWidth(left, mid, right);
+                rect = rect.WithHeight(t.DesiredSize.Height);
+                t.InvalidateArrange();
+                //rect = rect.WithHeight(t.DesiredSize.Height);
+                child.Arrange(rect);
+                rect = rect.WithY(rect.Y + t.DesiredSize.Height);
+                height+=t.DesiredSize.Height;
             }
-            
         }
         //return base.ArrangeOverride(finalSize);
-        return rect.Size;
+        return new Size(left + mid + right, height);
+    }
+
+    public override void ApplyTemplate()
+    {
+        base.ApplyTemplate();
     }
 }
\ No newline at end of file