diff --git a/blazor/chat-ui/header.md b/blazor/chat-ui/header.md
index ac02c70e65..f28b49eb84 100644
--- a/blazor/chat-ui/header.md
+++ b/blazor/chat-ui/header.md
@@ -89,6 +89,12 @@ You can use the [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion
     };
 }
 
+<style>
+    #chatui-header .e-header .e-header-icon {
+        display: flex;
+    }
+</style>
+
 ```
 
 ![Blazor Chat UI HeaderIconCss](./images/header-iconCss.png)
diff --git a/blazor/chat-ui/images/timestamp.png b/blazor/chat-ui/images/timestamp.png
index 3a7202b149..c93bd3b9d0 100644
Binary files a/blazor/chat-ui/images/timestamp.png and b/blazor/chat-ui/images/timestamp.png differ
diff --git a/blazor/ribbon/backstage.md b/blazor/ribbon/backstage.md
index f005c830ad..9d3ff5d70d 100644
--- a/blazor/ribbon/backstage.md
+++ b/blazor/ribbon/backstage.md
@@ -852,7 +852,7 @@ You can customize the backstage menu items and their content using the [Template
     {
         if (backstageMenus.TryGetValue(id, out var menuItem))
         {
-            selectedContent = menuItem.name;
+            selectedContent = menuItem.name.ToLowerInvariant();
         }
     }
 
@@ -863,16 +863,22 @@ You can customize the backstage menu items and their content using the [Template
         new DropDownMenuItem{ Text = "Keep Text Only" }
     };
 
-        RenderFragment GetBackstageContent(string item) => item switch
+     private RenderFragment RenderWrapperContent(string icon, string name, string description) => @<div class="section-content">
+        <span class="e-icons @icon doc_icon"></span>
+        <span>@name</span>
+        <div class="desc" style="font-size:12px;color:#555;margin-left:26px;">@description</div>
+    </div>;
+
+        RenderFragment GetBackstageContent(string item) => (item ?? string.Empty).ToLowerInvariant() switch
     {
-        "New" => @<div class="new-wrapper" style="padding: 20px;">
+        "new" => @<div class="new-wrapper" style="padding: 20px;">
         <div class="section-title">New</div>
         <div class="category_container">
             <div class="doc_category_image"></div>
             <span class="doc_category_text">New document</span>
         </div>
     </div>,
-        "Open" => @<div class="block-wrapper">
+        "open" => @<div class="block-wrapper">
         <div class="section-title">Recent</div>
         @{
     var recentDocuments = new List<(string icon, string name, string description)>
@@ -886,7 +892,7 @@ You can customize the backstage menu items and their content using the [Template
         @RenderWrapperContent(doc.icon, doc.name, doc.description)
     }
     </div>,
-        "Save" => @<div class="block-wrapper">
+        "save" => @<div class="block-wrapper">
         <div class="section-title">Save</div>
         @{
     var saveItems = new List<(string icon, string name, string description)>
diff --git a/blazor/ribbon/gallery.md b/blazor/ribbon/gallery.md
index 0267c460c0..3631af23d2 100644
--- a/blazor/ribbon/gallery.md
+++ b/blazor/ribbon/gallery.md
@@ -100,7 +100,7 @@ Gallery items can be added using [GalleryItem](https://help.syncfusion.com/cr/bl
 
 ![Ribbon Gallery Items](./images/gallery/gallery_items.png)
 
-#### Css class
+#### CSS class
 
 You can use the `CssClass` property to customize the gallery item.
 
@@ -180,6 +180,21 @@ You can use the `CssClass` property to customize the gallery item.
     };
 }
 
+<style>
+
+    .e-ribbon-gallery-item.bad {
+        background: #ffb6b6;
+    }
+
+    .e-ribbon-gallery-item.good {
+        background: #c7ebc9;
+    }
+
+    .e-ribbon-gallery-item.neutral {
+        background: #eedd9d;
+    }
+</style>
+
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/blazor/ribbon/items.md b/blazor/ribbon/items.md
index e5d93f9fe8..e629460f2f 100644
--- a/blazor/ribbon/items.md
+++ b/blazor/ribbon/items.md
@@ -84,6 +84,7 @@ Below example demonstrates how to configure a Checkbox item including it's event
 {% highlight razor %}
 
 @using Syncfusion.Blazor.Ribbon
+@using Syncfusion.Blazor.Buttons
 
 <div style="width:30%">
     <SfRibbon>
@@ -120,7 +121,7 @@ Below example demonstrates how to configure a Checkbox item including it's event
 @code {
     private void Created() { /* your actions here */ }
 
-    private void ValueChange(ChangeEventArgs args) { /* your actions here */ }
+    private void ValueChange(ChangeEventArgs<bool> args) { /* your actions here */ }
 }
 
 {% endhighlight %}
@@ -442,6 +443,7 @@ Below example demonstrates how to configure a Colorpicker item including it's ev
 
 @using Syncfusion.Blazor.Ribbon
 @using Syncfusion.Blazor.SplitButtons
+@using Syncfusion.Blazor.Inputs
 
 <div style="width:30%">
     <SfRibbon>