diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index 785808a..d6beab9 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -90,15 +90,21 @@
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
                     <Border Padding="2,0" Background="Transparent">
-                        <Canvas Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
                                 Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
                             <Rectangle
                                 Name="Container"
                                 Width="{DynamicResource CarouselIndicatorColumnarWidth}"
                                 Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                                Fill="{TemplateBinding Background}"
-                                Canvas.Top="{DynamicResource CarouselIndicatorColumnarCanvasHeight}"/>
-                        </Canvas>
+                                VerticalAlignment="Bottom"
+                                Fill="{TemplateBinding Background}">
+                                <Rectangle.Transitions>
+                                    <Transitions>
+                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
+                                    </Transitions>
+                                </Rectangle.Transitions>
+                            </Rectangle>
+                        </Border>
                     </Border>
                 </Panel>
             </ControlTemplate>
@@ -112,7 +118,6 @@
         <Style Selector="^:selected /template/ Rectangle#Container">
             <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
             <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
-            <Setter Property="Canvas.Top" Value="{DynamicResource CarouselIndicatorColumnarSelectedCanvasHeight}" />
         </Style>
     </ControlTheme>
 
diff --git a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
index 3633801..f32bfdc 100644
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -10,8 +10,6 @@
     <x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
-    <x:Double x:Key="CarouselIndicatorColumnarCanvasHeight">8</x:Double>
-    <x:Double x:Key="CarouselIndicatorColumnarSelectedCanvasHeight">0</x:Double>
 
     <Thickness x:Key="CarouselButtonMargin">8</Thickness>
 </ResourceDictionary>
\ No newline at end of file