diff --git a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
index 0636b90..a915da3 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
@@ -10,45 +10,84 @@
     <DockPanel>
         <ScrollViewer DockPanel.Dock="Right" Width="260">
             <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock
+                    Theme="{DynamicResource TitleTextBlock}"
+                    Classes="H4"
+                    Text="Configuration" />
 
-                <Button Content="Toggle Drawer"
-                        HorizontalAlignment="Stretch"
-                        Click="OnToggleDrawer" />
-
-                <Separator />
+                <CheckBox Name="ToggleDrawerCheck"
+                          Content="Toggle Drawer" />
 
                 <CheckBox Name="GestureCheck"
                           Content="Gesture Enabled"
-                          IsChecked="True"
-                          IsCheckedChanged="OnGestureChanged" />
-                
-                <ComboBox SelectionChanged="OnLayoutChanged" >
-                    <ComboBoxItem Content="CompactOverlay" />
-                    <ComboBoxItem Content="CompactInline" />
-                    <ComboBoxItem Content="Split" />
-                    <ComboBoxItem Content="Overlay" />
+                          IsChecked="True" />
+
+                <TextBlock Text="Behavior" FontSize="12" />
+                <ComboBox
+                    Name="BehaviorComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerBehavior>Auto</DrawerBehavior>
+                    <DrawerBehavior>Flyout</DrawerBehavior>
+                    <DrawerBehavior>Locked</DrawerBehavior>
+                    <DrawerBehavior>Disabled</DrawerBehavior>
                 </ComboBox>
 
-                <Separator />
+                <TextBlock Text="Layout" FontSize="12" />
+                <ComboBox
+                    Name="LayoutComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerLayoutBehavior>Overlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>Split</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactOverlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactInline</DrawerLayoutBehavior>
+                </ComboBox>
 
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="Drawer: Closed"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
+                <TextBlock Text="Layout" FontSize="12" />
+                <ComboBox
+                    Name="PlacementComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerPlacement>Left</DrawerPlacement>
+                    <DrawerPlacement>Right</DrawerPlacement>
+                    <DrawerPlacement>Top</DrawerPlacement>
+                    <DrawerPlacement>Bottom</DrawerPlacement>
+                </ComboBox>
+
+                <TextBlock Text="Compact Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="CompactDrawerLengthSlider"
+                            Minimum="0" Maximum="250" Value="80"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #CompactDrawerLengthSlider.Value}" />
+                </StackPanel>
+                <TextBlock Text="Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="DrawerLengthSlider"
+                            Minimum="150" Maximum="400" Value="260"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #DrawerLengthSlider.Value}" />
+                </StackPanel>
             </StackPanel>
         </ScrollViewer>
 
         <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-        
+
         <DrawerPage Name="DemoDrawer"
                     Margin="12"
                     Header="First Look"
-                    DrawerLayoutBehavior="Overlay"
-                    CompactDrawerLength="80"
-                    DrawerLength="250">
+                    IsOpen="{Binding #ToggleDrawerCheck.IsChecked}"
+                    IsGestureEnabled="{Binding #GestureCheck.IsChecked}"
+                    DrawerBehavior="{Binding #BehaviorComboBox.SelectedItem}"
+                    DrawerLayoutBehavior="{Binding #LayoutComboBox.SelectedItem}"
+                    DrawerPlacement="{Binding #PlacementComboBox.SelectedItem}"
+                    CompactDrawerLength="{Binding #CompactDrawerLengthSlider.Value}"
+                    DrawerLength="{Binding #DrawerLengthSlider.Value}">
             <DrawerPage.DrawerHeader>
                 <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
             </DrawerPage.DrawerHeader>
@@ -74,4 +113,4 @@
             </DrawerPage.Content>
         </DrawerPage>
     </DockPanel>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
index 4428e53..019a2a9 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
@@ -1,8 +1,6 @@
-using System;
-using System.Linq;
+using System.Linq;
 using Avalonia.Controls;
 using Avalonia.Input.GestureRecognizers;
-using Avalonia.Interactivity;
 using Avalonia.Layout;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -15,32 +13,6 @@ public partial class DrawerPageDemo : UserControl
         EnableMouseSwipeGesture(DemoDrawer);
     }
 
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        DemoDrawer.Opened += OnDrawerStatusChanged;
-        DemoDrawer.Closed += OnDrawerStatusChanged;
-    }
-
-    protected override void OnUnloaded(RoutedEventArgs e)
-    {
-        base.OnUnloaded(e);
-        DemoDrawer.Opened -= OnDrawerStatusChanged;
-        DemoDrawer.Closed -= OnDrawerStatusChanged;
-    }
-
-    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
-
-    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
-    }
-
-    private void OnGestureChanged(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
-    }
-
     private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
     {
         if (DrawerMenu.SelectedItem is ListBoxItem item)
@@ -50,10 +22,7 @@ public partial class DrawerPageDemo : UserControl
                 Header = item.Content?.ToString(),
                 Content = new TextBlock
                 {
-                    Text = $"{item.Content} page content",
-                    FontSize = 16,
-                    HorizontalAlignment = HorizontalAlignment.Center,
-                    VerticalAlignment = VerticalAlignment.Center,
+                    Text = $"{item.Content} page content", FontSize = 16, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center,
                 },
                 HorizontalContentAlignment = HorizontalAlignment.Stretch,
                 VerticalContentAlignment = VerticalAlignment.Stretch
@@ -62,11 +31,6 @@ public partial class DrawerPageDemo : UserControl
         }
     }
 
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
-    }
-
     private static void EnableMouseSwipeGesture(Control control)
     {
         var recognizer = control.GestureRecognizers
@@ -75,16 +39,4 @@ public partial class DrawerPageDemo : UserControl
 
         recognizer?.IsMouseEnabled = true;
     }
-
-    private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
-        {
-            0 => DrawerLayoutBehavior.CompactOverlay,
-            1 => DrawerLayoutBehavior.CompactInline,
-            2 => DrawerLayoutBehavior.Split,
-            3 => DrawerLayoutBehavior.Overlay,
-            _ => DrawerLayoutBehavior.CompactOverlay
-        };
-    }
-}
\ No newline at end of file
+}