diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitToggleButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitToggleButtonDemo.razor
index 4ed43aa2ac..4d84257f4f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitToggleButtonDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitToggleButtonDemo.razor
@@ -209,7 +209,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Controlled" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <ComponentExampleBox Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
             <div>Explore default checked state, two-way binding, and handling change events for a customizable user experience.</div>
             <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 913c4bfc4c..b4dbdae878 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -231,7 +231,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
         <ExamplePreview>
-            <div>Use BitCalendar in a right-to-left (RTL) layout.</div>
+            <div>Use BitCalendar in right-to-left (RTL).</div>
             <br />
             <div class="example-content">
                 <BitCalendar Dir="BitDir.Rtl" />
@@ -239,7 +239,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Hour/minute step" RazorCode="@example11RazorCode" Id="example11">
+    <ComponentExampleBox Title="Hour/Minute step" RazorCode="@example11RazorCode" Id="example11">
         <ExamplePreview>
             <div>Customizes the step increments for hours and minutes in the time picker.</div>
             <br /><br />
@@ -247,9 +247,7 @@
                 <div>HourStep = 2:</div>
                 <br />
                 <BitCalendar ShowTimePicker="true" HourStep="2" />
-
                 <br />
-
                 <div>MinuteStep = 15:</div>
                 <br />
                 <BitCalendar ShowTimePicker="true" MinuteStep="15" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
index 251ccbe032..95cad60fd9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
@@ -176,7 +176,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
         <ExamplePreview>
-            <div>Use BitCheckbox in a right-to-left (RTL).</div>
+            <div>Use BitCheckbox in right-to-left (RTL).</div>
             <br />
             <div dir="rtl">
                 <BitCheckbox Dir="BitDir.Rtl" Label="چکباکس راست به چپ" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor
index adfd22a2dc..b08830f45b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor
@@ -68,7 +68,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Public Api" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <ComponentExampleBox Title="Public API" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <ExamplePreview>
             <div>Explore the public API of the BitColorPicker component, including how to access different color formats such as Hex, RGB, RGBA, and HSV using component references.</div>
             <br /><br />
@@ -84,18 +84,18 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Class & Style" RazorCode="@example6RazorCode" Id="example6">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <ExamplePreview>
             <div>Apply custom CSS classes and styles to the BitColorPicker component for tailoring its appearance to fit your design needs.</div>
             <br /><br />
             <div class="example-content">
-                <div>Class</div>
-                <br />
-                <BitColorPicker ShowAlphaSlider Class="custom-class" />
-                <br /><br /><br />
                 <div>Style</div>
                 <br />
                 <BitColorPicker ShowAlphaSlider Style="width: 230px; height: 150px;" />
+                <br /><br /><br />
+                <div>Class</div>
+                <br />
+                <BitColorPicker ShowAlphaSlider Class="custom-class" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor.cs
index 6dafb923ca..c72d8266ed 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ColorPicker/BitColorPickerDemo.razor.cs
@@ -128,7 +128,8 @@ public partial class BitColorPickerDemo
     }
 </style>
 
-<BitColorPicker ShowAlphaSlider Class=""custom-class"" />
 
-<BitColorPicker ShowAlphaSlider Style=""width: 250px; height: 150px;"" />";
+<BitColorPicker ShowAlphaSlider Style=""""width: 250px; height: 150px;"""" />
+
+<BitColorPicker ShowAlphaSlider Class=""""custom-class"""" />"";";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor
index 8c46418568..aedccd7255 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor
@@ -254,7 +254,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example11RazorCode" Id="example11">
         <ExamplePreview>
-            <div>Use BitDatePicker in a right-to-left (RTL) layout.</div>
+            <div>Use BitDatePicker in right-to-left (RTL).</div>
             <br />
             <div dir="rtl">
                 <div class="example-content">
@@ -264,7 +264,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Hour/minute step" RazorCode="@example12RazorCode" Id="example12">
+    <ComponentExampleBox Title="Hour/Minute step" RazorCode="@example12RazorCode" Id="example12">
         <ExamplePreview>
             <div>Adjust the increment step for hours and minutes when using the BitDatePicker's time selection feature.</div>
             <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index bbb95cf616..cb06cde4ca 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -177,7 +177,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Hour/minute step" RazorCode="@example8RazorCode" Id="example8">
+    <ComponentExampleBox Title="Hour/Minute step" RazorCode="@example8RazorCode" Id="example8">
         <ExamplePreview>
             <div>Adjust the increment step for hours and minutes when using the BitDateRangePicker's time selection feature.</div>
             <br />
@@ -272,7 +272,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example11RazorCode" Id="example11">
         <ExamplePreview>
-            <div>Use BitDateRangePicker in a right-to-left (RTL) layout.</div>
+            <div>Use BitDateRangePicker in right-to-left (RTL).</div>
             <br />
             <div dir="rtl">
                 <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index ab81034c30..23ba4b104e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -398,6 +398,7 @@ public partial class BitDropdownDemo
             Description = "The template for items that have not yet been rendered in virtualization mode.",
         }
     ];
+
     private readonly List<ComponentSubClass> componentSubClasses =
     [
         new()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index 0994dc760a..0121b72918 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -11,7 +11,7 @@
                ComponentSubClasses="componentSubClasses"
                ComponentSubEnums="componentSubEnums">
 
-    <ComponentExampleBox Title="Basic FileUpload" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+    <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
         <ExamplePreview>
             <div class="example-desc">Files can be uploaded automatically after selecting them.</div>
             <div>
@@ -119,7 +119,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Custom FileUpload" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ComponentExampleBox Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <ExamplePreview>
             <div class="example-desc">Use custom template for file upload.</div>
             <div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
index 5fb1fb9cc5..26b2f72f05 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
@@ -188,8 +188,8 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
         <ExamplePreview>
-            <div>Use the BitOtpInput component in right-to-left (RTL).</div>
-            <br />
+            <div>Use BitOtpInput in right-to-left (RTL).</div>
+            <br /><br />
             <div dir="rtl">
                 <BitOtpInput Label="Default" Dir="BitDir.Rtl" />
                 <br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
index 454b2f48d2..71b975126b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
@@ -35,7 +35,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Underline" RazorCode="@example2RazorCode" Id="example2">
+    <ComponentExampleBox Title="Underlined" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
             <div>Showcases the BitTextField with an underlined style, including variations with placeholders, disabled state, and required fields.</div>
             <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
index 33e9e27f71..85c40f4bd9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
@@ -26,7 +26,7 @@
                                    ChevronDownIcon="@BitIconName.More"
                                    Variant="BitVariant.Text"
                                    title="See more"
-                                   Styles="@(new() { OperatorButton = "padding: 0.5rem; color: dodgerblue" })">
+                                   Styles="@(new() { OperatorButton = "padding: 0.5rem;" })">
                         <BitMenuButtonOption Text="Settings" IconName="@BitIconName.Settings" />
                         <BitMenuButtonOption Text="About" IconName="@BitIconName.Info" />
                         <BitMenuButtonOption Text="Feedback" IconName="@BitIconName.Feedback" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
index e3fa32edf0..8fba83a0f2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
@@ -42,7 +42,7 @@ public partial class BitHeaderDemo
                    ChevronDownIcon=""@BitIconName.More""
                    Variant=""BitVariant.Text""
                    title=""See more""
-                   Styles=""@(new() { OperatorButton = ""padding: 0.5rem; color: dodgerblue"" })"">
+                   Styles=""@(new() { OperatorButton = ""padding: 0.5rem;"" })"">
         <BitMenuButtonOption Text=""Settings"" IconName=""@BitIconName.Settings"" />
         <BitMenuButtonOption Text=""About"" IconName=""@BitIconName.Info"" />
         <BitMenuButtonOption Text=""Feedback"" IconName=""@BitIconName.Feedback"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor
index d49ddf2195..6939186eda 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor
@@ -176,6 +176,10 @@
     <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <ExamplePreview>
             <div>
+                <div>
+                    Use BitBasicList in right-to-left (RTL).
+                </div>
+                <br />
                 <BitBasicList Dir="BitDir.Rtl" Items="FewPeopleRtl" Style="border: 1px #a19f9d solid; border-radius: 4px;">
                     <RowTemplate Context="person">
                         <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor
index de2a5b5239..dbb8af9bfa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor
@@ -98,33 +98,33 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Class & Style" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
     <ExamplePreview>
         <div>Customize the appearance of BitBreadcrumb using styles and CSS classes.</div>
         <br /><br />
         <div class="example-box">
             <div>
-                <div>Items Class</div>
-                <BitBreadcrumb Items="CustomBreadcrumbItemsWithClass"
+                <div>Items Style</div>
+                <BitBreadcrumb Items="CustomBreadcrumbItemsWithStyle"
                                NameSelectors="nameSelectors" />
             </div>
             <div>
-                <div>Items Style</div>
-                <BitBreadcrumb Items="CustomBreadcrumbItemsWithStyle"
+                <div>Items Class</div>
+                <BitBreadcrumb Items="CustomBreadcrumbItemsWithClass"
                                NameSelectors="nameSelectors" />
             </div>
             <br />
-            <div>
-                <div>Selected Item Class</div>
-                <BitBreadcrumb Items="CustomBreadcrumbItems"
-                               NameSelectors="nameSelectors"
-                               SelectedItemClass="custom-selected-item" />
             </div>
             <div>
                 <div>Selected Item Style</div>
                 <BitBreadcrumb Items="CustomBreadcrumbItems"
                                NameSelectors="nameSelectors"
                                SelectedItemStyle="color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;" />
+            <div>
+                <div>Selected Item Class</div>
+                <BitBreadcrumb Items="CustomBreadcrumbItems"
+                               NameSelectors="nameSelectors"
+                               SelectedItemClass="custom-selected-item" />
             </div>
         </div>
     </ExamplePreview>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor.samples.cs
index cfde02e845..2c1db760c6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor.samples.cs
@@ -181,20 +181,19 @@ public class PageInfoModel
 </style>
 
 
-<BitBreadcrumb Items=""CustomBreadcrumbItemsWithClass""
-               NameSelectors=""nameSelectors"" />
-
 <BitBreadcrumb Items=""CustomBreadcrumbItemsWithStyle""
                NameSelectors=""nameSelectors"" />
 
+<BitBreadcrumb Items=""CustomBreadcrumbItemsWithClass""
+               NameSelectors=""nameSelectors"" />
 
 <BitBreadcrumb Items=""CustomBreadcrumbItems""
                NameSelectors=""nameSelectors""
-               SelectedItemClass=""custom-selected-item"" />
+               SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"" />
 
 <BitBreadcrumb Items=""CustomBreadcrumbItems""
                NameSelectors=""nameSelectors""
-               SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"" />";
+               SelectedItemClass=""custom-selected-item"" />";
     private readonly string example4CsharpCode = @"
 public class PageInfoModel
 {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor
index 62ec04546a..e3cc65f5aa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor
@@ -77,30 +77,30 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Class & Style" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
     <ExamplePreview>
         <div>Customize the appearance of BitBreadcrumb using styles and CSS classes.</div>
         <br /><br />
         <div class="example-box">
-            <div>
-                <div>Items Class</div>
-                <BitBreadcrumb Items="BreadcrumbItemsWithClass" />
-            </div>
             <div>
                 <div>Items Style</div>
                 <BitBreadcrumb Items="BreadcrumbItemsWithStyle" />
             </div>
-            <br />
             <div>
-                <div>Selected Item Class</div>
-                <BitBreadcrumb Items="BreadcrumbItems"
-                               SelectedItemClass="custom-selected-item" />
+                <div>Items Class</div>
+                <BitBreadcrumb Items="BreadcrumbItemsWithClass" />
             </div>
+            <br />
             <div>
                 <div>Selected Item Style</div>
                 <BitBreadcrumb Items="BreadcrumbItems"
                                SelectedItemStyle="color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;" />
             </div>
+            <div>
+                <div>Selected Item Class</div>
+                <BitBreadcrumb Items="BreadcrumbItems"
+                               SelectedItemClass="custom-selected-item" />
+            </div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor.samples.cs
index 3e61fbdd35..1f5b74386a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbItemDemo.razor.samples.cs
@@ -89,16 +89,16 @@ public partial class _BitBreadcrumbItemDemo
 </style>
 
 
-<BitBreadcrumb Items=""BreadcrumbItemsWithClass"" />
-
 <BitBreadcrumb Items=""BreadcrumbItemsWithStyle"" />
 
+<BitBreadcrumb Items=""BreadcrumbItemsWithClass"" />
+
 
 <BitBreadcrumb Items=""BreadcrumbItems""
-               SelectedItemClass=""custom-selected-item"" />
+               SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"" />
 
 <BitBreadcrumb Items=""BreadcrumbItems""
-               SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"" />";
+               SelectedItemClass=""custom-selected-item"" />";
     private readonly string example4CsharpCode = @"
 private readonly List<BitBreadcrumbItem> BreadcrumbItems =
 [
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor
index f6c889a642..8144d32041 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor
@@ -128,20 +128,11 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Class & Style" RazorCode="@example4RazorCode" Id="example4">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example4RazorCode" Id="example4">
     <ExamplePreview>
         <div>Customize the appearance of BitBreadcrumb using styles and CSS classes.</div>
         <br /><br />
         <div class="example-box">
-            <div>
-                <div>Options Class</div>
-                <BitBreadcrumb TItem="BitBreadcrumbOption">
-                    <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" Class="custom-item" />
-                    <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" Class="custom-item" />
-                    <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" Class="custom-item" />
-                    <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" Class="custom-item" IsSelected />
-                </BitBreadcrumb>
-            </div>
             <div>
                 <div>Options Style</div>
                 <BitBreadcrumb TItem="BitBreadcrumbOption">
@@ -151,10 +142,19 @@
                     <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" Style="color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" IsSelected />
                 </BitBreadcrumb>
             </div>
+            <div>
+                <div>Options Class</div>
+                <BitBreadcrumb TItem="BitBreadcrumbOption">
+                    <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" Class="custom-item" />
+                    <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" Class="custom-item" />
+                    <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" Class="custom-item" />
+                    <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" Class="custom-item" IsSelected />
+                </BitBreadcrumb>
+            </div>
             <br />
             <div>
-                <div>Selected Option Class</div>
-                <BitBreadcrumb TItem="BitBreadcrumbOption" SelectedItemClass="custom-selected-item">
+                <div>Selected Option Style</div>
+                <BitBreadcrumb TItem="BitBreadcrumbOption" SelectedItemStyle="color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;">
                     <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                     <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                     <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
@@ -162,8 +162,8 @@
                 </BitBreadcrumb>
             </div>
             <div>
-                <div>Selected Option Style</div>
-                <BitBreadcrumb TItem="BitBreadcrumbOption" SelectedItemStyle="color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;">
+                <div>Selected Option Class</div>
+                <BitBreadcrumb TItem="BitBreadcrumbOption" SelectedItemClass="custom-selected-item">
                     <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                     <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                     <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs
index 6e65d8587b..d90bbfcaa3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs
@@ -106,13 +106,6 @@ public partial class _BitBreadcrumbOptionDemo
 </style>
 
 
-<BitBreadcrumb TItem=""BitBreadcrumbOption"">
-    <BitBreadcrumbOption Text=""Option 1"" Href=""/components/breadcrumb"" Class=""custom-item"" />
-    <BitBreadcrumbOption Text=""Option 2"" Href=""/components/breadcrumb"" Class=""custom-item"" />
-    <BitBreadcrumbOption Text=""Option 3"" Href=""/components/breadcrumb"" Class=""custom-item"" />
-    <BitBreadcrumbOption Text=""Option 4"" Href=""/components/breadcrumb"" Class=""custom-item"" IsSelected />
-</BitBreadcrumb>
-
 <BitBreadcrumb TItem=""BitBreadcrumbOption"">
     <BitBreadcrumbOption Text=""Option 1"" Href=""/components/breadcrumb"" Style=""color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;"" />
     <BitBreadcrumbOption Text=""Option 2"" Href=""/components/breadcrumb"" Style=""color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;"" />
@@ -120,15 +113,22 @@ public partial class _BitBreadcrumbOptionDemo
     <BitBreadcrumbOption Text=""Option 4"" Href=""/components/breadcrumb"" Style=""color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;"" IsSelected />
 </BitBreadcrumb>
 
+<BitBreadcrumb TItem=""BitBreadcrumbOption"">
+    <BitBreadcrumbOption Text=""Option 1"" Href=""/components/breadcrumb"" Class=""custom-item"" />
+    <BitBreadcrumbOption Text=""Option 2"" Href=""/components/breadcrumb"" Class=""custom-item"" />
+    <BitBreadcrumbOption Text=""Option 3"" Href=""/components/breadcrumb"" Class=""custom-item"" />
+    <BitBreadcrumbOption Text=""Option 4"" Href=""/components/breadcrumb"" Class=""custom-item"" IsSelected />
+</BitBreadcrumb>
+
 
-<BitBreadcrumb TItem=""BitBreadcrumbOption"" SelectedItemClass=""custom-selected-item"">
+<BitBreadcrumb TItem=""BitBreadcrumbOption"" SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"">
     <BitBreadcrumbOption Text=""Option 1"" Href=""/components/breadcrumb"" />
     <BitBreadcrumbOption Text=""Option 2"" Href=""/components/breadcrumb"" />
     <BitBreadcrumbOption Text=""Option 3"" Href=""/components/breadcrumb"" />
     <BitBreadcrumbOption Text=""Option 4"" Href=""/components/breadcrumb"" IsSelected />
 </BitBreadcrumb>
 
-<BitBreadcrumb TItem=""BitBreadcrumbOption"" SelectedItemStyle=""color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;"">
+<BitBreadcrumb TItem=""BitBreadcrumbOption"" SelectedItemClass=""custom-selected-item"">
     <BitBreadcrumbOption Text=""Option 1"" Href=""/components/breadcrumb"" />
     <BitBreadcrumbOption Text=""Option 2"" Href=""/components/breadcrumb"" />
     <BitBreadcrumbOption Text=""Option 3"" Href=""/components/breadcrumb"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
index 530a1d02ed..74fa7f1222 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
@@ -27,12 +27,16 @@
 
     <ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
+            <div>Display an icon within a BitTag to represent its content visually.</div>
+            <br />
             <BitTag Text="Calendar icon" IconName="@BitIconName.Calendar" />
         </ExamplePreview>
     </ComponentExampleBox>
 
     <ComponentExampleBox Title="Dismiss" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <ExamplePreview>
+            <div>Use the OnDismiss feature in BitTag to provide a close button for the tag content.</div>
+            <br />
             @if (isDismissed is false)
             {
                 <BitTag IconName="@BitIconName.AlarmClock" Text="Dismiss me" OnDismiss="() => isDismissed = true" />
@@ -103,6 +107,8 @@
 
     <ComponentExampleBox Title="Template" RazorCode="@example7RazorCode" Id="example7">
         <ExamplePreview>
+            <div>Customize the content inside BitTag using a template with different elements and components.</div>
+            <br />
             <BitTag>
                 <BitStack Horizontal Gap="0.5rem" Style="padding-inline: 0.5rem;">
                     <BitLabel>Custom content</BitLabel>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor
index 2ba12f927a..9a9edee341 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor
@@ -137,6 +137,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example6RazorCode" Id="example6">
         <ExamplePreview>
+            <div class="example-desc">Use BitAccordion in right-to-left (RTL).</div>
             <div class="example-box">
                 <BitAccordion Dir="BitDir.Rtl" 
                               Title="تنظیمات" 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
index 77ea298c8f..c35b593fc1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
@@ -213,6 +213,8 @@
 
     <ComponentExampleBox Title="Draggable" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <ExamplePreview>
+            <div>Enable the draggable feature in BitModal to allow users to move the modal around the screen.</div>
+            <br />
             <div>
                 <BitToggle Label="Is Draggable?" @bind-Value="IsDraggable" />
                 <br />
@@ -267,6 +269,8 @@
 
     <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
+            <div>Explore styling and class customization for BitModal, including component styles, custom classes, and detailed styles.</div>
+            <br /><br />
             <div>
                 <div>Component's Style & Class:</div>
                 <br />
@@ -361,8 +365,10 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Basic" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example1+7">
+    <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example1+7">
         <ExamplePreview>
+            <div>Use BitModal in right-to-left (RTL).</div>
+            <br />
             <div>
                 <BitButton Dir="BitDir.Rtl" OnClick=@(() => IsOpen11 = true)>باز کردن مُدال</BitButton>
                 <BitModal Dir="BitDir.Rtl" @bind-IsOpen="IsOpen11">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
index b9bd4cacd0..f6b7cbc2a6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
@@ -177,6 +177,8 @@
 
         <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
             <ExamplePreview>
+                <div>Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.</div>
+                <br /><br />
                 <div>
                     <div class="btn-container">
                         <div>Component's Style & Class:</div>
@@ -221,21 +223,25 @@
 
         <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
             <ExamplePreview>
-                <BitButton Dir="BitDir.Rtl" OnClick=@(() => IsRtlPanelOpen = true)>
-                    باز کردن پنل
-                </BitButton>
+                <div>Use BitPanel in right-to-left (RTL).</div>
+                <br /><br />
+                <div>
+                    <BitButton Dir="BitDir.Rtl" OnClick=@(() => IsRtlPanelOpen = true)>
+                        باز کردن پنل
+                    </BitButton>
 
-                <BitPanel @bind-IsOpen="IsRtlPanelOpen" 
-                          Dir="BitDir.Rtl"
-                          HeaderText="سرصفحه ی ساده"
-                          Classes="@panelClassStyles">
-                    <p>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                    </p>
-                </BitPanel>
+                    <BitPanel @bind-IsOpen="IsRtlPanelOpen"
+                              Dir="BitDir.Rtl"
+                              HeaderText="سرصفحه ی ساده"
+                              Classes="@panelClassStyles">
+                        <p>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                        </p>
+                    </BitPanel>
+                </div>
             </ExamplePreview>
         </ComponentExampleBox>
     </ComponentDemo>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Tooltip/BitTooltipDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Tooltip/BitTooltipDemo.razor
index 204d0dd844..d4818ded3b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Tooltip/BitTooltipDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Tooltip/BitTooltipDemo.razor
@@ -106,6 +106,7 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example5RazorCode" Id="example5">
         <ExamplePreview>
+            <div>Use BitTooltip in right-to-left (RTL).</div>
             <br /><br />
             <div class="tooltips-container">
                 <BitTooltip Dir="BitDir.Rtl">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor
index 6f06bf397e..33f09a34a3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor
@@ -14,6 +14,8 @@
     </ComponentExampleBox>
     <ComponentExampleBox Title="Tag" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
+            <div>Render different HTML elements by setting the Element property of BitElement.</div>
+            <br />
             <BitElement Element="input" placeholder="Input" />
             <br /><br />
             <BitElement Element="a" href="https://bitplatform.dev/" target="_blank">Anchor (Link)</BitElement>
@@ -23,6 +25,8 @@
     </ComponentExampleBox>
     <ComponentExampleBox Title="Advanced" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
         <ExamplePreview>
+            <div>Change the HTML tag dynamically using the Element property.</div>
+            <br />
             <BitElement Element="@elementTag"
                         placeholder="@elementTag"
                         target="_blank"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor.cs
index c62be25210..a721292d69 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Element/BitElementDemo.razor.cs
@@ -41,14 +41,14 @@ public partial class BitElementDemo
 <BitElement>This is default (div)</BitElement>";
 
     private string example2RazorCode = @"
-<BitElement Tag=""input"" placeholder=""Input"" />
-<BitElement Tag=""a"" href=""https://bitplatform.dev/"" target=""_blank"">Anchor (Link)</BitElement>
-<BitElement Tag=""button"" @onclick=""@(() => counter++)"">Button (Click count @counter)</BitElement>";
+<BitElement Element=""input"" placeholder=""Input"" />
+<BitElement Element=""a"" href=""https://bitplatform.dev/"" target=""_blank"">Anchor (Link)</BitElement>
+<BitElement Element=""button"" @onclick=""@(() => counter++)"">Button (Click count @counter)</BitElement>";
     private string example2CsharpCode = @"
 private int counter;";
 
     private string example3RazorCode = @"
-<BitElement Tag=""@elementTag""
+<BitElement Element=""@elementTag""
             placeholder=""@elementTag""
             target=""_blank""
             href=""https://bitplatform.dev/"">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
index e5b68cb450..e9f96911aa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
@@ -20,6 +20,8 @@
 
     <ComponentExampleBox Title="Disabled AutoClose" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
+            <div>Use BitOverlay with NoAutoClose to disable automatic closing when clicking outside the overlay.</div>
+            <br />
             <div>
                 <BitButton OnClick="() => AutoCloseIsOpen = true">Show Overlay</BitButton>
                 <BitOverlay @bind-IsOpen="AutoCloseIsOpen" Class="overlay" NoAutoClose>
@@ -143,6 +145,8 @@
 
     <ComponentExampleBox Title="Events" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
+            <div>Use BitOverlay with event handlers to handle custom actions on user interactions, such as clicking outside to close.</div>
+            <br />
             <div>
                 <BitButton OnClick="() => EventOnCloseIsOpen = true">Show Overlay</BitButton>
                 <BitOverlay @bind-IsOpen="EventOnCloseIsOpen" Class="overlay" OnClick=@(() => EventOnCloseIsOpen = false) NoAutoClose>