diff --git a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
index e8dd809..d41cfdc 100644
--- a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
+++ b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
@@ -129,95 +129,4 @@ public static class ColorTokens
         new("SemiColorShadow", "Shadow"),
         new("SemiShadowElevated", "Shadow Elevated"),
     };
-
-    public static IReadOnlyList<Tuple<string, string>> HeightTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiHeightControlSmall", ""),
-        new("SemiHeightControlDefault", ""),
-        new("SemiHeightControlLarge", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> IconSizeTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiWidthIconExtraSmall", ""),
-        new("SemiWidthIconSmall", ""),
-        new("SemiWidthIconMedium", ""),
-        new("SemiWidthIconLarge", ""),
-        new("SemiWidthIconExtraLarge", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> CornerRadiusTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiBorderRadiusExtraSmall", ""),
-        new("SemiBorderRadiusSmall", ""),
-        new("SemiBorderRadiusMedium", ""),
-        new("SemiBorderRadiusLarge", ""),
-        new("SemiBorderRadiusFull", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BorderSpacingTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiBorderSpacing", ""),
-        new("SemiBorderSpacingControl", ""),
-        new("SemiBorderSpacingControlFocus", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BorderThicknessTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiBorderThickness", ""),
-        new("SemiBorderThicknessControl", ""),
-        new("SemiBorderThicknessControlFocus", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> SpacingTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiSpacingNone", ""),
-        new("SemiSpacingSuperTight", ""),
-        new("SemiSpacingExtraTight", ""),
-        new("SemiSpacingTight", ""),
-        new("SemiSpacingBaseTight", ""),
-        new("SemiSpacingBase", ""),
-        new("SemiSpacingBaseLoose", ""),
-        new("SemiSpacingLoose", ""),
-        new("SemiSpacingExtraLoose", ""),
-        new("SemiSpacingSuperLoose", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> ThicknessTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiThicknessNone", ""),
-        new("SemiThicknessSuperTight", ""),
-        new("SemiThicknessExtraTight", ""),
-        new("SemiThicknessTight", ""),
-        new("SemiThicknessBaseTight", ""),
-        new("SemiThicknessBase", ""),
-        new("SemiThicknessBaseLoose", ""),
-        new("SemiThicknessLoose", ""),
-        new("SemiThicknessExtraLoose", ""),
-        new("SemiThicknessSuperLoose", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> FontSizeTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiFontSizeSmall", ""),
-        new("SemiFontSizeRegular", ""),
-        new("SemiFontSizeHeader6", ""),
-        new("SemiFontSizeHeader5", ""),
-        new("SemiFontSizeHeader4", ""),
-        new("SemiFontSizeHeader3", ""),
-        new("SemiFontSizeHeader2", ""),
-        new("SemiFontSizeHeader1", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> FontWeightTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiFontWeightLight", ""),
-        new("SemiFontWeightRegular", ""),
-        new("SemiFontWeightBold", ""),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> FontFamilyTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiFontFamilyRegular", ""),
-    };
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml
index 9db4525..f9b7f9d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml
@@ -10,74 +10,73 @@
     <Design.DataContext>
         <vm:VariablesDemoViewModel />
     </Design.DataContext>
-    <ScrollViewer>
-        <StackPanel>
-            <ItemsControl ItemsSource="{Binding VariableGrid}">
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <HeaderedContentControl
-                            Header="{Binding Title}"
-                            Content="{Binding VariableItems}">
-                            <HeaderedContentControl.HeaderTemplate>
-                                <DataTemplate DataType="x:String">
-                                    <SelectableTextBlock
-                                        Classes="H3"
-                                        Text="{Binding}"
-                                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                                </DataTemplate>
-                            </HeaderedContentControl.HeaderTemplate>
-                            <HeaderedContentControl.ContentTemplate>
-                                <DataTemplate>
-                                    <DataGrid IsReadOnly="True" ItemsSource="{Binding}">
-                                        <DataGrid.Columns>
-                                            <DataGridTemplateColumn Width="300" Header="ResourceKey">
-                                                <DataGridTemplateColumn.CellTemplate>
-                                                    <DataTemplate DataType="vm:VariableItemViewModel">
-                                                        <SelectableTextBlock
-                                                            Margin="12,0"
-                                                            VerticalAlignment="Center"
-                                                            Text="{Binding ResourceKey}" />
-                                                    </DataTemplate>
-                                                </DataGridTemplateColumn.CellTemplate>
-                                            </DataGridTemplateColumn>
-                                            <DataGridTemplateColumn Width="200" Header="Value">
-                                                <DataGridTemplateColumn.CellTemplate>
-                                                    <DataTemplate DataType="vm:VariableItemViewModel">
-                                                        <SelectableTextBlock
-                                                            Margin="12,0"
-                                                            HorizontalAlignment="Left"
-                                                            VerticalAlignment="Center"
-                                                            Text="{Binding Value}"
-                                                            TextWrapping="Wrap" />
-                                                    </DataTemplate>
-                                                </DataGridTemplateColumn.CellTemplate>
-                                            </DataGridTemplateColumn>
-                                            <DataGridTemplateColumn Width="100" Header="CopyText">
-                                                <DataGridTemplateColumn.CellTemplate>
-                                                    <DataTemplate DataType="vm:VariableItemViewModel">
-                                                        <Button
-                                                            Command="{Binding $parent[pages:VariablesDemo].Copy}"
-                                                            CommandParameter="{Binding CopyText}"
-                                                            Theme="{DynamicResource  IconBorderlessButton}"
-                                                            Content="{StaticResource SemiIconCopy}" />
-                                                    </DataTemplate>
-                                                </DataGridTemplateColumn.CellTemplate>
-                                            </DataGridTemplateColumn>
-                                            <DataGridTextColumn
-                                                Width="*"
-                                                x:DataType="vm:VariableItemViewModel"
-                                                Binding="{Binding Description}"
-                                                IsVisible="False"
-                                                CanUserSort="False"
-                                                Header="Description" />
-                                        </DataGrid.Columns>
-                                    </DataGrid>
-                                </DataTemplate>
-                            </HeaderedContentControl.ContentTemplate>
-                        </HeaderedContentControl>
+    <DataGrid
+        Margin="8"
+        CanUserReorderColumns="True"
+        CanUserResizeColumns="True"
+        CanUserSortColumns="True"
+        HeadersVisibility="All"
+        IsReadOnly="True"
+        ItemsSource="{Binding GridData}">
+        <DataGrid.Columns>
+            <DataGridTemplateColumn
+                Width="300"
+                x:DataType="vm:VariableItem"
+                Header="ResourceKey">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding ResourceKey}" />
                     </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </StackPanel>
-    </ScrollViewer>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="200"
+                x:DataType="vm:VariableItem"
+                Header="Value">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Text="{Binding Value}"
+                            TextWrapping="Wrap" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="*"
+                x:DataType="vm:VariableItem"
+                Header="Description">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Text="{Binding Description}"
+                            TextWrapping="Wrap" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="100"
+                x:DataType="vm:VariableItem"
+                Header="CopyText"
+                SortMemberPath="Duration">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <Button
+                            Command="{Binding $parent[pages:VariablesDemo].Copy}"
+                            CommandParameter="{Binding CopyText}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+        </DataGrid.Columns>
+    </DataGrid>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs
index 76afc89..29521e4 100644
--- a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs
@@ -1,7 +1,5 @@
 using System.Threading.Tasks;
 using Avalonia.Controls;
-using Avalonia.Controls.Primitives;
-using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -14,13 +12,6 @@ public partial class VariablesDemo : UserControl
         this.DataContext = new VariablesDemoViewModel();
     }
 
-    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
-    {
-        base.OnApplyTemplate(e);
-        var vm = this.DataContext as VariablesDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
     public async Task Copy(object? o)
     {
         if (o is null) return;
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs
index 753d23a..b9e4d70 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs
@@ -1,57 +1,32 @@
 using System;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using System.Globalization;
 using Avalonia;
+using Avalonia.Collections;
 using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
-using Semi.Avalonia.Demo.Constant;
 using Semi.Avalonia.Tokens;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public partial class VariablesDemoViewModel : ObservableObject
+public class VariablesDemoViewModel : ObservableObject
 {
-    private readonly IResourceDictionary? _dictionary;
-    public ObservableCollection<VariableGridViewModel> VariableGrid { get; set; } = [];
+    public DataGridCollectionView GridData { get; set; }
 
     public VariablesDemoViewModel()
     {
-        _dictionary = new Variables();
-    }
-
-    public void InitializeResources()
-    {
-        VariableGrid.Add(new VariableGridViewModel("Height", _dictionary, ColorTokens.HeightTokens));
-        VariableGrid.Add(new VariableGridViewModel("Icon Size", _dictionary, ColorTokens.IconSizeTokens));
-        VariableGrid.Add(new VariableGridViewModel("Border CornerRadius", _dictionary, ColorTokens.CornerRadiusTokens));
-        VariableGrid.Add(new VariableGridViewModel("Border Spacing", _dictionary, ColorTokens.BorderSpacingTokens));
-        VariableGrid.Add(new VariableGridViewModel("Border Thickness", _dictionary, ColorTokens.BorderThicknessTokens));
-        VariableGrid.Add(new VariableGridViewModel("Spacing", _dictionary, ColorTokens.SpacingTokens));
-        VariableGrid.Add(new VariableGridViewModel("Thickness", _dictionary, ColorTokens.ThicknessTokens));
-        VariableGrid.Add(new VariableGridViewModel("FontSize", _dictionary, ColorTokens.FontSizeTokens));
-        VariableGrid.Add(new VariableGridViewModel("FontWeight", _dictionary, ColorTokens.FontWeightTokens));
-        VariableGrid.Add(new VariableGridViewModel("FontFamily", _dictionary, ColorTokens.FontFamilyTokens));
-    }
-}
-
-public partial class VariableGridViewModel : ObservableObject
-{
-    [ObservableProperty] private string? _title;
-    public ObservableCollection<VariableItemViewModel> VariableItems { get; set; } = [];
-
-    public VariableGridViewModel(string title, IResourceDictionary? dictionary,
-        IReadOnlyList<Tuple<string, string>> tokens)
-    {
-        Title = title;
-        foreach (var (key, name) in tokens)
+        IResourceDictionary dictionary = new Variables();
+        foreach (var token in Tokens)
         {
-            if (dictionary?.TryGetValue(key, out var value) ?? false)
+            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
             {
-                VariableItems.Add(new VariableItemViewModel(name, GetValueString(value), key));
+                token.Value = GetValueString(value);
             }
         }
+
+        GridData = new DataGridCollectionView(Tokens);
+        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
     }
 
     private static string GetValueString(object? value)
@@ -68,23 +43,79 @@ public partial class VariableGridViewModel : ObservableObject
             _ => value.ToString()
         };
     }
+
+    private static List<VariableItem> Tokens { get; set; } =
+    [
+        new("Height", "SemiHeightControlSmall"),
+        new("Height", "SemiHeightControlDefault"),
+        new("Height", "SemiHeightControlLarge"),
+        new("Icon Size", "SemiWidthIconExtraSmall"),
+        new("Icon Size", "SemiWidthIconSmall"),
+        new("Icon Size", "SemiWidthIconMedium"),
+        new("Icon Size", "SemiWidthIconLarge"),
+        new("Icon Size", "SemiWidthIconExtraLarge"),
+        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusMedium"),
+        new("Border CornerRadius", "SemiBorderRadiusLarge"),
+        new("Border CornerRadius", "SemiBorderRadiusFull"),
+        new("Border Spacing", "SemiBorderSpacing"),
+        new("Border Spacing", "SemiBorderSpacingControl"),
+        new("Border Spacing", "SemiBorderSpacingControlFocus"),
+        new("Border Thickness", "SemiBorderThickness"),
+        new("Border Thickness", "SemiBorderThicknessControl"),
+        new("Border Thickness", "SemiBorderThicknessControlFocus"),
+        new("Spacing", "SemiSpacingNone"),
+        new("Spacing", "SemiSpacingSuperTight"),
+        new("Spacing", "SemiSpacingExtraTight"),
+        new("Spacing", "SemiSpacingTight"),
+        new("Spacing", "SemiSpacingBaseTight"),
+        new("Spacing", "SemiSpacingBase"),
+        new("Spacing", "SemiSpacingBaseLoose"),
+        new("Spacing", "SemiSpacingLoose"),
+        new("Spacing", "SemiSpacingExtraLoose"),
+        new("Spacing", "SemiSpacingSuperLoose"),
+        new("Thickness", "SemiThicknessNone"),
+        new("Thickness", "SemiThicknessSuperTight"),
+        new("Thickness", "SemiThicknessExtraTight"),
+        new("Thickness", "SemiThicknessTight"),
+        new("Thickness", "SemiThicknessBaseTight"),
+        new("Thickness", "SemiThicknessBase"),
+        new("Thickness", "SemiThicknessBaseLoose"),
+        new("Thickness", "SemiThicknessLoose"),
+        new("Thickness", "SemiThicknessExtraLoose"),
+        new("Thickness", "SemiThicknessSuperLoose"),
+        new("FontSize", "SemiFontSizeSmall"),
+        new("FontSize", "SemiFontSizeRegular"),
+        new("FontSize", "SemiFontSizeHeader6"),
+        new("FontSize", "SemiFontSizeHeader5"),
+        new("FontSize", "SemiFontSizeHeader4"),
+        new("FontSize", "SemiFontSizeHeader3"),
+        new("FontSize", "SemiFontSizeHeader2"),
+        new("FontSize", "SemiFontSizeHeader1"),
+        new("FontWeight", "SemiFontWeightLight"),
+        new("FontWeight", "SemiFontWeightRegular"),
+        new("FontWeight", "SemiFontWeightBold"),
+        new("FontFamily", "SemiFontFamilyRegular"),
+    ];
 }
 
-public partial class VariableItemViewModel : ObservableObject
+public class VariableItem()
 {
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _description;
-    [ObservableProperty] private string? _value;
+    public string? Category { get; set; }
+    public string? ResourceKey { get; set; }
+    public string? Description { get; set; }
+    public string? Value { get; set; }
+
+    public VariableItem(string category, string resourceKey, string description = "") : this()
+    {
+        Category = category;
+        ResourceKey = resourceKey;
+        Description = description;
+    }
 
     public string CopyText =>
         $"""
          <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
          """;
-
-    public VariableItemViewModel(string description, object value, string resourceKey)
-    {
-        ResourceKey = resourceKey;
-        Description = description;
-        Value = value.ToString();
-    }
 }
\ No newline at end of file