diff --git a/demo/Ursa.Demo/Pages/TimelineDemo.axaml b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
index 0093166..d77dbca 100644
--- a/demo/Ursa.Demo/Pages/TimelineDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
@@ -15,57 +15,20 @@
         <u:TimelineFormatConverter x:Key="FormatConverter" />
     </UserControl.Resources>
     <StackPanel>
-        <Grid Width="600">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="1*" />
-                <ColumnDefinition Width="Auto" />
-                <ColumnDefinition Width="1*" />
-            </Grid.ColumnDefinitions>
-            <Border
-                Grid.Column="0"
-                Width="300"
-                Height="100"
-                Background="Red" />
-            <Ellipse
-                Grid.Column="1"
-                Width="8"
-                Height="8"
-                Fill="Red" />
-            <Border
-                Grid.Column="2"
-                Width="500"
-                Height="100"
-                Background="Green" />
-        </Grid>
-        <ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Items}">
-            <ItemsControl.ItemTemplate>
-                <DataTemplate>
-                    <Grid>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
-                            <ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
-                            <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
-                        </Grid.ColumnDefinitions>
-                        <ContentPresenter
-                            Grid.Column="0"
-                            HorizontalAlignment="Stretch"
-                            Background="Aqua"
-                            Content="121231233" />
-                        <Ellipse
-                            Grid.Column="1"
-                            Width="8"
-                            Height="8"
-                            Fill="Red" />
-                        <ContentPresenter
-                            Name="content"
-                            Grid.Column="2"
-                            HorizontalAlignment="Stretch"
-                            Background="Yellow"
-                            Content="{Binding}" />
-                    </Grid>
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
+        <u:Timeline>
+            <u:TimelineItem
+                Content="Start"
+                Description="Get Started!"
+                Time="2022-01-01" />
+            <u:TimelineItem
+                Content="In between"
+                Description="In Process!"
+                Time="2022-01-02" />
+            <u:TimelineItem
+                Content="Finished"
+                Description="Done!"
+                Time="2022-01-03" />
+        </u:Timeline>
         <u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
             <u:Timeline.ItemTemplate>
                 <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
diff --git a/demo/Ursa.Demo/Ursa.Demo.csproj b/demo/Ursa.Demo/Ursa.Demo.csproj
index 7cc1b6c..f66e639 100644
--- a/demo/Ursa.Demo/Ursa.Demo.csproj
+++ b/demo/Ursa.Demo/Ursa.Demo.csproj
@@ -5,6 +5,7 @@
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <ApplicationManifest>app.manifest</ApplicationManifest>
+        <AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <ItemGroup>
diff --git a/src/Ursa.Themes.Semi/Controls/Timeline.axaml b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
index 8d01b88..b36677a 100644
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -17,9 +17,7 @@
     <ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline">
         <Setter Property="Template">
             <ControlTemplate TargetType="u:Timeline">
-                <Grid Grid.IsSharedSizeScope="True">
-                    <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
-                </Grid>
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -27,16 +25,51 @@
     <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
         <Setter Property="u:TimelineItem.Template">
             <ControlTemplate TargetType="u:TimelineItem">
-                <Grid Background="Pink">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
-                        <ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
-                        <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
-                    </Grid.ColumnDefinitions>
-                    <ContentPresenter
+                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, Auto, *">
+
+                    <Rectangle
+                        Grid.Row="2"
                         Grid.Column="0"
+                        Width="1"
+                        VerticalAlignment="Stretch"
+                        Classes="end"
+                        Fill="Gray" />
+                    <Grid
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="0"
+                        Width="16"
+                        RowDefinitions="Auto, Auto, *">
+                        <Rectangle
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Width="1"
+                            Height="8"
+                            VerticalAlignment="Top"
+                            Classes="start"
+                            Fill="Red" />
+                        <Ellipse
+                            Grid.Row="1"
+                            Width="8"
+                            Height="8"
+                            Margin="4"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Top"
+                            Fill="Gray" />
+                        <Rectangle
+                            Grid.Row="2"
+                            Grid.Column="0"
+                            Width="1"
+                            VerticalAlignment="Stretch"
+                            Classes="end"
+                            Fill="Gray" />
+                    </Grid>
+                    <ContentPresenter
+                        Grid.Row="0"
+                        Grid.Column="1"
                         HorizontalAlignment="Stretch"
-                        Background="Aqua">
+                        VerticalAlignment="Bottom"
+                        Foreground="DarkGray">
                         <ContentPresenter.Content>
                             <MultiBinding Converter="{StaticResource FormatConverter}">
                                 <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
@@ -44,26 +77,22 @@
                             </MultiBinding>
                         </ContentPresenter.Content>
                     </ContentPresenter>
-                    <Ellipse
-                        Grid.Column="1"
-                        Width="8"
-                        Height="8"
-                        Fill="Red" />
                     <ContentPresenter
                         Name="content"
-                        Grid.Column="2"
-                        HorizontalAlignment="Stretch"
-                        Background="Yellow"
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}" />
                 </Grid>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:first /template/ ContentPresenter#content">
-            <Setter Property="ContentPresenter.Foreground" Value="Red" />
+        <Style Selector="^:first /template/ Rectangle.start">
+            <Setter Property="Rectangle.Fill" Value="Transparent" />
         </Style>
-        <Style Selector="^:last /template/ ContentPresenter#content">
-            <Setter Property="ContentPresenter.Foreground" Value="Green" />
+        <Style Selector="^:last /template/ Rectangle.end">
+            <Setter Property="Rectangle.Fill" Value="Transparent" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Ursa/Controls/Timeline/Timeline.cs b/src/Ursa/Controls/Timeline/Timeline.cs
index 23e52dc..3304ab0 100644
--- a/src/Ursa/Controls/Timeline/Timeline.cs
+++ b/src/Ursa/Controls/Timeline/Timeline.cs
@@ -44,12 +44,13 @@ public class Timeline: ItemsControl
         {
             if (this.LogicalChildren[i] is TimelineItem t)
             {
-                t.SetPosition(i == 0, i == this.LogicalChildren.Count - 1);
+                t.SetIndex(i == 0, i == this.LogicalChildren.Count - 1);
             }
             else if (this.LogicalChildren[i] is ContentPresenter { Child: TimelineItem t2 })
             {
-                t2.SetPosition(i == 0, i == this.LogicalChildren.Count - 1);
+                t2.SetIndex(i == 0, i == this.LogicalChildren.Count - 1);
             }
         }
     }
+    
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/Timeline/TimelineItem.cs b/src/Ursa/Controls/Timeline/TimelineItem.cs
index 0139823..2760bb7 100644
--- a/src/Ursa/Controls/Timeline/TimelineItem.cs
+++ b/src/Ursa/Controls/Timeline/TimelineItem.cs
@@ -58,9 +58,58 @@ public class TimelineItem: ContentControl
         set => SetValue(DescriptionTemplateProperty, value);
     }
 
-    internal void SetPosition(bool isFirst, bool isLast)
+    internal void SetIndex(bool isFirst, bool isLast)
     {
         PseudoClasses.Set(PC_First, isFirst);
         PseudoClasses.Set(PC_Last, isLast);
     }
+}
+
+public class TimelineItemLayoutProperties: AvaloniaObject
+{
+    private double _dimensionDelta = 0.01;
+    
+    public static readonly StyledProperty<double> TimeSlotWidthProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
+        nameof(TimeSlotWidth));
+
+    public double TimeSlotWidth
+    {
+        get => GetValue(TimeSlotWidthProperty);
+        set
+        {
+            if (Math.Abs(GetValue(TimeSlotWidthProperty) - value) < _dimensionDelta) return; 
+            SetValue(TimeSlotWidthProperty, value);
+        }
+    }
+
+    public static readonly StyledProperty<double> TimeSlotHeightProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
+        nameof(TimeSlotHeight));
+
+    public double TimeSlotHeight
+    {
+        get => GetValue(TimeSlotHeightProperty);
+        set
+        {
+            if (Math.Abs(GetValue(TimeSlotHeightProperty) - value) < _dimensionDelta) return;
+            SetValue(TimeSlotHeightProperty, value);
+        }
+    }
+
+    public static readonly StyledProperty<double> ContentSlotWidthProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
+        nameof(ContentSlotWidth));
+
+    public double ContentSlotWidth
+    {
+        get => GetValue(ContentSlotWidthProperty);
+        set => SetValue(ContentSlotWidthProperty, value);
+    }
+
+    public static readonly StyledProperty<double> ContentSlotHeightProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
+        nameof(ContentSlotHeight));
+
+    public double ContentSlotHeight
+    {
+        get => GetValue(ContentSlotHeightProperty);
+        set => SetValue(ContentSlotHeightProperty, value);
+    }
 }
\ No newline at end of file