diff --git a/src/Ursa.Themes.Semi/Controls/Timeline.axaml b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
index 63e311c..9397b3a 100644
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -48,21 +48,16 @@
                             HorizontalAlignment="Center"
                             VerticalAlignment="Top"
                             Classes="start"
-                            Fill="LightGray" />
+                            Fill="{DynamicResource TimelineLineBrush}" />
                         <Panel Grid.Row="1">
                             <Ellipse
+                                Name="PART_Indicator"
                                 Width="8"
                                 Height="8"
                                 Margin="2"
                                 HorizontalAlignment="Center"
-                                VerticalAlignment="Top">
-                                <Ellipse.Fill>
-                                    <MultiBinding Converter="{StaticResource ForegroundConverter}">
-                                        <Binding Path="ItemType" RelativeSource="{RelativeSource TemplatedParent}" />
-                                        <Binding Path="IconForeground" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    </MultiBinding>
-                                </Ellipse.Fill>
-                            </Ellipse>
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource DefaultTimelineIconForeground}" />
                         </Panel>
                         <Rectangle
                             Grid.Row="2"
@@ -71,7 +66,7 @@
                             HorizontalAlignment="Center"
                             VerticalAlignment="Stretch"
                             Classes="end"
-                            Fill="LightGray" />
+                            Fill="{DynamicResource TimelineLineBrush}" />
                     </Grid>
                     <Rectangle
                         Grid.Row="2"
@@ -80,7 +75,7 @@
                         HorizontalAlignment="Center"
                         VerticalAlignment="Stretch"
                         Classes="end"
-                        Fill="LightGray" />
+                        Fill="{DynamicResource TimelineLineBrush}" />
                     <ContentPresenter
                         Grid.Row="0"
                         Grid.Column="1"
@@ -112,5 +107,23 @@
         <Style Selector="^:last /template/ Rectangle.end">
             <Setter Property="Rectangle.Fill" Value="Transparent" />
         </Style>
+        <Style Selector="^:none /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:TimelineItem}, Path=IconForeground}" />
+        </Style>
+        <Style Selector="^:not(:none):default /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{DynamicResource DefaultTimelineIconForeground}" />
+        </Style>
+        <Style Selector="^:not(:none):ongoing /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{DynamicResource OngoingTimelineIconForeground}" />
+        </Style>
+        <Style Selector="^:not(:none):success /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{DynamicResource SuccessTimelineIconForeground}" />
+        </Style>
+        <Style Selector="^:not(:none):warning /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{DynamicResource WarningTimelineIconForeground}" />
+        </Style>
+        <Style Selector="^:not(:none):error /template/ Ellipse#PART_Indicator">
+            <Setter Property="Ellipse.Fill" Value="{DynamicResource ErrorTimelineIconForeground}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Timeline.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Timeline.axaml
new file mode 100644
index 0000000..47b44c7
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Timeline.axaml
@@ -0,0 +1,9 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DefaultTimelineIconForeground" Opacity="0.2" Color="White" />
+    <SolidColorBrush x:Key="OngoingTimelineIconForeground" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SuccessTimelineIconForeground" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="WarningTimelineIconForeground" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="ErrorTimelineIconForeground" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="TimelineLineBrush" Opacity="0.2" Color="White" />
+</ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
index 7a530cc..004d6a1 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
@@ -5,5 +5,6 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Timeline.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Timeline.axaml b/src/Ursa.Themes.Semi/Themes/Light/Timeline.axaml
index e879046..b5549db 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Timeline.axaml
@@ -5,4 +5,5 @@
     <SolidColorBrush x:Key="SuccessTimelineIconForeground" Color="#FF3BB346" />
     <SolidColorBrush x:Key="WarningTimelineIconForeground" Color="#FFFC8800" />
     <SolidColorBrush x:Key="ErrorTimelineIconForeground" Color="#FFF93920" />
+    <SolidColorBrush x:Key="TimelineLineBrush" Opacity="0.13" Color="#FF2E3238" />
 </ResourceDictionary>
diff --git a/src/Ursa/Controls/Timeline/TimelineItem.cs b/src/Ursa/Controls/Timeline/TimelineItem.cs
index 9ba9f9c..0958a31 100644
--- a/src/Ursa/Controls/Timeline/TimelineItem.cs
+++ b/src/Ursa/Controls/Timeline/TimelineItem.cs
@@ -8,7 +8,7 @@ using Avalonia.Media;
 
 namespace Ursa.Controls;
 
-[PseudoClasses(PC_First, PC_Last, PC_Default, PC_Ongoing, PC_Success, PC_Warning, PC_Error)]
+[PseudoClasses(PC_First, PC_Last, PC_Default, PC_Ongoing, PC_Success, PC_Warning, PC_Error, PC_None)]
 public class TimelineItem: ContentControl
 {
     private const string PC_First = ":first";
@@ -18,6 +18,7 @@ public class TimelineItem: ContentControl
     private const string PC_Success = ":success";
     private const string PC_Warning = ":warning";
     private const string PC_Error = ":error";
+    private const string PC_None = ":none";
 
     private static readonly IReadOnlyDictionary<TimelineItemType, string> _itemTypeMapping = new Dictionary<TimelineItemType, string>
     {
@@ -81,6 +82,7 @@ public class TimelineItem: ContentControl
     static TimelineItem()
     {
         ItemTypeProperty.Changed.AddClassHandler<TimelineItem>((o, e) => { o.OnItemTypeChanged(e); });
+        IconForegroundProperty.Changed.AddClassHandler<TimelineItem>((o, e) => { o.OnIconForegroundChanged(e); });
     }
 
     private void OnItemTypeChanged(AvaloniaPropertyChangedEventArgs args)
@@ -90,5 +92,10 @@ public class TimelineItem: ContentControl
         PseudoClasses.Set(_itemTypeMapping[oldValue], false);
         PseudoClasses.Set(_itemTypeMapping[newValue], true);
     }
-    
+
+    private void OnIconForegroundChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        IBrush? newValue = args.GetOldValue<IBrush?>();
+        PseudoClasses.Set(PC_None, newValue is null);
+    }
 }
\ No newline at end of file