diff --git a/blazor/datagrid/images/style-and-appearance/grid-frozenHeader-css.webp b/blazor/datagrid/images/style-and-appearance/grid-frozenHeader-css.webp
new file mode 100644
index 0000000000..6cdaeace53
Binary files /dev/null and b/blazor/datagrid/images/style-and-appearance/grid-frozenHeader-css.webp differ
diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md
index 52426929c7..372835f2ca 100644
--- a/blazor/datagrid/style-and-appearance/header.md
+++ b/blazor/datagrid/style-and-appearance/header.md
@@ -145,6 +145,160 @@ internal sealed class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSiDWnrSSbAdxE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## Customize the Blazor DataGrid frozen header cells
+
+The **.e-leftfreeze** class styles all the left frozen header cells in the Blazor DataGrid.
+
+```css
+
+.e-headercell.e-leftalign.e-leftfreeze {
+ background-color: lightgreen;
+}
+
+.e-headercell.e-rightalign.e-leftfreeze {
+ background-color: lightgreen;
+}
+
+```
+
+The **.e-rightfreeze** class styles all the right frozen header cells in the Blazor DataGrid.
+
+```css
+
+.e-headercell.e-rightalign.e-rightfreeze {
+ background-color: lightblue;
+}
+
+```
+
+The **.e-fixedfreeze** class styles all the fixed frozen header cells in the Blazor DataGrid.
+
+```css
+
+.e-headercell.e-leftalign.e-fixedfreeze {
+ background-color: lightgrey;
+}
+
+```
+
+Properties such as **color**, **background-color**, **font**, and alignment can be adjusted to align with the grid design.
+
+
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code
+{
+ public List OrderData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShipAddress = ShipAddress;
+ this.ShipRegion = shipRegion;
+ this.ShipPostalCode = shipPostalCode;
+
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ"));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ"));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83, new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ"));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce", "69004", "CJ"));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ"));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ"));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ"));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ"));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP"));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira"));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ"));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ"));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ"));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ"));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM"));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipAddress { get; set; }
+ public string ShipRegion { get; set; }
+ public string ShipPostalCode { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVxNyWoJBAoNKsc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Hide the Blazor DataGrid header
The **.e-gridheader .e-columnheader** class combination targets the column header row in the Blazor DataGrid. Use CSS to hide the header: